js中的对象学习笔记(一)

简介: js中的对象学习笔记

一、object类型

{
k : v,
k : v,
k : v,
k : v   <-----注意这里最后一个没有逗号很容易出错!!!格式严谨!!!
}


JSON要比对象字面量,要严格,严格在哪儿呢?就是所有的k,必须加引号。


JSON:


{
"k" : v,
"k" : v,
"k" : v,
"k" : v
}

但是,下面的特殊情况,这个k必须加引号:


k是特殊字符


k是数字


k是有空格


k是关键字、保留字


先说一下,上面这些情况,也同时不能使用点语法来访问属性了,比如使用方括号:

var obj = {
name : "考拉"
}
console.log(obj["name"]);

特殊形式的k,必须要加上引号,检索属性的时候,必须用方括号:


var obj = {
"24&*$&#@@)@!" : "哈哈",
"all name" : "考拉",
"++++%%%%" : "嘻嘻",
"var" : "么么哒",
"function" : "嘻嘻"
}
console.log(obj["24&*$&#@@)@!"]);
console.log(obj["all name"]);
console.log(obj["++++%%%%"]);
console.log(obj["var"]);
console.log(obj["function"]);

对象的属性的访问,点语法是有局限的,它不能访问上面的特殊的那些情况。也不能访问以变量保存的k:

var obj = {
name : "考拉",
age : 18,
sex : "男",
"study score" : 100
}
//console.log(obj."study score");//错误的
console.log(obj["study score"]); //正确的
console.log(obj["a" + "ge"]); //正确的
var a = "sex";
console.log(obj[a]); //正确的
</script>


1.var obj = new Object(); //这是一个空对象,里面没有任何属性

var obj = {
name : "考拉",
age : 18,
sex : "男"
};

构造函数方式:

var obj = new Object();
obj.name = "考拉";
obj.age = 18;
obj.sex = "男";

二、对象的方法


当一个对象的属性的值,是一个函数,那么这个函数我们就称为对象的“方法”(method)。


方法就是一个对象能够做的事情,一般来说,就是一个动词。比如小明打招呼、长大、变性方法。

var xiaoming = {
name : "小明",
age : 18,
sex : "男",
sayHello : function(){
alert("你好,我是" + this.name);
alert("今年" + this.age + "岁了");
alert("我是可爱的小" + this.sex + "生");
}
}
xiaoming.sayHello();


一个对象,方法函数里面的this指的是这个对象。


构造函数

注意,我们学习Java、C++、C#语言的惯例,构造函数以大写字母开头。

function People(){
}

JavaScript规定,一个函数可以用new关键字来调用。那么此时将按顺序发生四件事情:


1)隐秘的创建一个新的空对象


2)将这个函数里面的this绑定到刚才创建隐秘新对象上


3)执行函数体里面的语句


4)返回这个新的对象


我们称呼这个函数,叫做构造函数,一般的,构造函数用大写字母开头。也叫作People“类”。


我们称呼xiaoming这个对象是People类的实例。


当一个函数用()调用的时候,this就是window


当一个函数用对象方法调用的时候,this就是这个对象


当一个函数绑定给一个HTML元素事件的时候,this就是这个HTML元素


当一个函数用定时器调用的时候,this就是window


当一个函数用apply、call调用的时候,this就是你指定这个东西


当一个函数用new调用的时候,this就是隐秘创建的空对象,函数里面的语句将被执行,并且返回新对象


1.People.prototype = {
name : "考拉",
sex : "男",
age : 18
}

1.People.prototype.name=”考拉”

两种赋值方法

//构造函数,构造函数里面没有任何语句,也就是说,这个构造函数在执行的时候,不会给创建出来的对象添加任何属性。
function People(){
}
//构造函数的原型,我们更改了构造函数的原型,为一个新的对象:
People.prototype = {
name : "考拉",
sex : "男",
age : 18
}
//当一个对象被new出来的时候,不仅仅执行了构造函数里面的语句,也会把这个函数的__proto__指向构造函数的prototype。
var xiaoming = new People();
console.log(xiaoming.__proto__);
console.log(xiaoming.__proto__ == People.prototype);
//当我们试图访问name、sex、age属性的时候,身上没有。那么就去查找原型,原型身上有,就当做了自己的属性返回了。说明给原型对象加了属性以后 构造函数身上却没有这个属性
console.log(xiaoming.name);
console.log(xiaoming.sex);
console.log(xiaoming.age);


通过构造函数出来的对象给原型对象加属性以后,后面通过构造函数构造的对象都有这个原型对象的属性

image.png

当我们试图访问一个对象身上的属性的时候,如果这个对象身上有这个属性,则返回它的值。如果它身上没有这个属性,那么将访问它的原型对象,检测它的原型对象身上是否有这个值,如果有返回它原型对象身上的这个值。


4.2 原型的用途

我们定义一个方法的时候,如果写在构造函数里面:

function People(name,age){
this.name = name;
this.age = age;
this.sayHello = function(){
alert("你好,我是" + this.name + "我今年" + this.age + "岁了");
}
}
var xiaoming = new People("小明",12);
var xiaohong = new People("小红",11);
xiaoming.sayHello();
xiaohong.sayHello();


实际上这个函数被复制了两份,一份给了xiaoming,一份给了xiaohong。xiaoming和xiaohong这两个实例身上有了相同功能的函数,但是这个函数不是同一个函数!


而函数天生要被复用,你没有复用函数:

alert(xiaoming.sayHello == xiaohong.sayHello); //false

xiaoming身上的函数,和xiaohong身上的函数,不是同一个函数。


那应该怎么办呢?一句话:所有的属性要绑在对象身上,而所有的方法,定义在对象的原型对象中:

function People(name,age){
//构造函数里面,负责定义一些属性,随着构造函数的执行,这些属性将绑定到new出来的对象身上
this.name = name;
this.age = age;
}
//把所有的方法,定义在原型对象身上:
People.prototype.sayHello = function(){
alert("你好,我是" + this.name + "我今年" + this.age + "岁了");
}

image.png

alert(xiaoming.sayHello == xiaohong.sayHello);

image.png

证明了xiaoming的sayHello方法和xiaohong的,是同一个函数。内存消耗小很多。

People.prototype.constructor //指向构造函数


目录
相关文章
|
15天前
|
JavaScript
JS 获取对象数据类型的键值对的键与值
JS 获取对象数据类型的键值对的键与值
|
25天前
|
JavaScript 前端开发
Math对象:JavaScript中的数学工具
Math对象:JavaScript中的数学工具
27 1
N..
|
1月前
|
存储 JavaScript 前端开发
JavaScript中的对象
JavaScript中的对象
N..
10 0
|
1月前
|
JavaScript 前端开发
JavaScript对象系列(菜菜出品,必看!!!)
JavaScript对象系列(菜菜出品,必看!!!)
|
18天前
|
JavaScript 算法
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
|
1月前
|
存储 JavaScript 前端开发
在JavaScript中,对象和数组是如何进行扩展的?
在JavaScript中,对象和数组是如何进行扩展的?
22 4
|
1天前
|
JavaScript 前端开发 Java
webgl学习笔记2_javascript基础快速学习
webgl学习笔记2_javascript基础快速学习
8 0
|
2天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
16 3
|
4天前
|
JavaScript 前端开发 开发者
JavaScript中的错误处理:try-catch语句与错误对象
【4月更文挑战第22天】JavaScript中的错误处理通过try-catch语句和错误对象实现。try块包含可能抛出异常的代码,catch块捕获并处理错误,finally块则无论是否出错都会执行。错误对象提供关于错误的详细信息,如类型、消息和堆栈。常见的错误类型包括RangeError、ReferenceError等。最佳实践包括及时捕获错误、提供有用信息、不忽略错误、利用堆栈信息和避免在finally块中抛错。
|
10天前
|
JavaScript
【Js】检查Date对象是否为Invalid Date
【Js】检查Date对象是否为Invalid Date
14 0