1、JS对象
1.1 JS对象特征
1、JS对象是基本数据数据类型之一,是一种复合值,可以看成若干属性的集合。
- 属性是名值对的形式(key:value)
- 属性名是字符串,因此可以把对象看成是字符串到值的映射
2、对象除了可以保持自有的属性,还可以从一个称为原型的对象继承属性。其中,原型链继承是JavaScript的核心特征。
3、对象是动态的,可以增加或删除属性。
4、除了字符串、数值、true、false、null和undefined,其它值都是对象。
5、对象最常见的用法是对其属性进行创建、设置、查找、删除、检测和枚举等操作。
- 属性值是任意JavaScript值,或者是一个getter或setter函数
- 每个属性还有一些与之相关的值,称为“属性特征。分别为:可写(writable attribute,表明是否可以设置属性的值)、可枚举(enumerable attribute,表明是否可以通过for/in结构返回该属性)和可配置(configurable attribute,表明是否可以删除或修改该属性)。
6、每个对象还拥有三个相关的对象特性。分别为:
- 对象的原型 (prototype)指向另一个对象,该对象的属性会被当前对象继承)
- 对象的类(class)一个标识对象类型的字符串
- 对象的扩展标记(extensible flag)指明了是否可以向该对象添加新属性)。
7、对象分为内置对象、宿主对象、自定义对象。
8、属性分为自由属性和继承属性。
1.2 JS创建对象
1.2.1 通过字面量创建对象(key:value)
对象字面量是一个表达式,每次运算都会创建一个新的对象,其中的属性值也会重新计算。如:
let empty = {};
let point = { x: 0, y: 0 };
let book = {
"first title": "JavaScript",
"second-title": "HTML5 CSS3",
for: "readers",
author: {
firstname: "xiao",
lastname: "ming",
},
};
在这个例子里,先创建了一个空对象,没有任何属性,然后创建了point对象,赋予了它两种属性,分别是x和y,book对象,赋予了first title,second-title,for,author四个属性,属性名可以是字符串也可以是对象。若属性名有空格或特殊字符,必须用字符串表示。属性名可以是保留字,但尽量避免。
当然,通过字面量创建还可以先给对象留空{},通过对象名.属性名或对象名["属性名"]来进行对象的赋值,如:
let book = {}
book.author = {
firstname: "xiao",
lastname: "ming",
},
book.for = "readers"
book.salestate = "good"
book["first title"] = "JavaScript",
book["second-title"] = "HTML5 CSS3"
1.2.2 通过new创建对象
通过new调用构造函数来创建并初始化一个新对象,通过对象名.属性名或对象名["属性名"]来进行对象赋值。
JavaScript语言核心中的原始类型都包含内置构造函数,如Object()、Array()、Date()等,如:
let book = new Object()
book['author'] = {
firstname: "xiao",
lastname: "ming",
},
book.for = "readers"
book.salestate = "good"
book['first title'] = "JavaScript",
book['second-title'] = "HTML5 CSS3"
console.log(book);
1.2.3 通过Object.create()创建对象
对象也可以用Object.create(proto, [ propertiesObject ])方法创建,其中,proto指这个对象的原型对象,propertiesObject 可选参数,用以对对象的属性进行描述。该方法可以在创建对象时指定原型或若干属性的对象。如:
let obj1 = Object.create({ x: 1, y: 2 });
// obj1继承了属性x和y。
let obj2 = Object.create(null);
//obj2不继承任何属性和方法。
let obj3 = Object.create(Object.prototype);
//obj3是一个普通的空对象。
1.3 原型
1、每一个JavaScript对象(null除外)都和原型对象相关联。每一个对象都从原型继承属性。
2、所有通过对象字面量创建的对象都具有同一个原型对象,可通过Object.prototype获得原型对象的引用。
3、通过new和构造函数创建的对象的原型就是构造函数的prototype属性引用的对象。如:
let book = new Object()
book['author'] = {
firstname: "xiao",
lastname: "ming",
}
console.log(Object.prototype); // [Object: null prototype] {}
console.log(Object.getPrototypeOf(book)); // [Object: null prototype] {}
console.log(book.__proto__); // [Object: null prototype] {}
4、极少数的对象没有原型,如:Object.prototype,它不继承任何属性。
5、所有内置构造函数都具有一个继承自Object.prototype的原型。
- Array.prototype的属性继承自Object.prototype
- 这种通过层级的原型继承形成的链接,称为“原型链”
示例:
let obj = { value: 100 };
Object.prototype.sex= "boy";
console.log(obj.sex); // boy
let arr = [1, 2, 3, 4];
console.log(arr.sex); // 继承了Object新添加的sex属性,输出boy
1.4 对象的属性
1.4.1 对象中属性的访问方式
若存在一个对象person,里面有fullname,sex,age属性。要访问这些属性,可以通过person.sex等进行访问。也可以通过person['sex'],如:
let person = Object.create({
fullname:"小明",
age: 12,
sex: "男"
})
console.log(person.fullname); // 小明
console.log(person['age']); // 12
console.log(person['sex']); // 男
1.4.2 作为关联数组的对象
举个例子:
let result = {
data1: {
name: "Language",
value: "Chinese",
},
data2: {
name: "Country",
value: "China",
},
data3: {
name: "Gender",
value: "Male",
},
};
for (let i = 1; i < 4; i++) {
let data = result["data" + i];
console.log(`${data.name}-->${data.value}`);
}
输出结果:
Language-->Chinese
Country-->China
Gender-->Male
1.4.3 对象中属性的继承(原型链继承)
原型链继承是将父类的实例作为子类的原型,继承后父类方法可以复用,但是父类的引用属性会被所有子类实例共享,并且子类构建实例时不能向父类传递参数。如:
function Parent() {
this.parentName = '父级函数';
}
Parent.prototype.getParentName = function () {
return this.parentName;
};
function Child() {
this.childName = '子级函数';
}
// 继承 Parent
Child.prototype = new Parent();
Child.prototype.getChildName = function () {
return this.childName;
};
let a = new Child();
console.log(a.getParentName());
运行结果:
父级函数
1.4.4 属性访问错误
-
查询一个不存在的属性并不会报错,如果在对象o自身的属性或继承的属性中均未找到属性x,属性访问表达式o.x返回undefined。
-
但是,如果对象不存在,那么试图查询这个不存在的对象的属性就会报错。
-
null和undefined值都没有属性,因此查询这些值的属性会报错。
举个例子:
改变前:let one = { two: { three: 3 } }; console.log(one.two.three); if (one) { if (one.two) { if (one.two.three) console.log(one.two.three); } } console.log(one && one.two && one.two.three); console.log(one?.two?.three); // Null传导运算符
输出:
3
3
3
3改变后:
let one = {}; console.log(one.two.three); if (one) { if (one.two) { if (one.two.three) console.log(one.two.three); } } console.log(one && one.two && one.two.three); console.log(one?.two?.three); // Null传导运算符
输出结果:
TypeError: Cannot read property 'three' of undefined -
在以下场景下给对象o设置属性p会失败:
- o中的属性p是只读的:不能给只读属性重新赋值(defineProperty()方法中有一个例外,可以对可配置的只读属性重新赋值)。
- o中的属性p是继承属性,且它是只读的:不能通过同名自有属性覆盖只读的继承属性。
- o中不存在自有属性p:o没有使用setter方法继承属性p,并且o的可扩展性(extensible attribute)是false。如果o中不存在p,而且没有setter方法可供调用,则p一定会添加至o中。但如果o不是可扩展的,那么在o中不能定义新属性。
1.4.5 删除属性方法
delete运算符可以删除对象的属性。
- 它的操作数应当是一个属性访问表达式
- delete只是断开属性和宿主对象的联系,而不会去操作属性中的属性。
- delete运算符只能删除自有属性,不能删除继承属性。若要删除继承属性必须从定义这个属性的原型对象上删除它,而且这会影响到所有继承自这个原型的对象。
- delete不能删除那些可配置性为false的属性。某些内置对象的属性是不可配置的,比如通过变量声明和函数声明创建的全局对象的属性。
举个例子:
let book = new Object()
book['author'] = {
firstname: "xiao",
lastname: "ming",
}
book.name="致明天",
book.salenum=123456,
book.price=12
console.log("删除前:",book);
delete book.author;
delete book.toString()
console.log("删除后:",book);
运行结果:
删除前: {
author: { firstname: 'xiao', lastname: 'ming' },
name: '致明天',
salenum: 123456,
price: 12
}
删除后: { name: '致明天', salenum: 123456, price: 12 }
1.4.6 检测属性方法
判断某个属性是否存在于某个对象中,可以通过in运算符、hasOwnPreperty()和propertyIsEnumerable()方法,甚至也可以仅通过属性查询。如:
let o = { x: 1 };
console.log("x" in o); // true
console.log("y" in o); // false
console.log("toString" in o); // true
console.log(o.hasOwnProperty("x")); // true
console.log(o.hasOwnProperty("y")); // false
console.log(o.hasOwnProperty("toString")); // false
console.log(o.propertyIsEnumerable("x")); // true
console.log(o.propertyIsEnumerable("y")); // false
console.log(o.propertyIsEnumerable("toString")); // false
console.log(Object.prototype.propertyIsEnumerable("toString")); // false
1.4.7 枚举属性方法
1、for/in循环可以在循环体中遍历对象中所有可枚举的属性(包括自有属性和继承的属性),把属性名称赋值给循环变量。
注意:对象继承的内置方法不可枚举的,但在代码中给对象添加的属性都是可枚举的。
let obj = Object.create({ a: 10, b: 20 });
obj.c = 30;
for (let i in obj) {
console.log(i, obj[i]);
}
输出结果:
c 30
a 10
b 20
2、利用for/in循环,可以对两个对象进行各种形式的合并。
3、Object.keys(),它返回一个数组,这个数组由对象中可枚举的自有属性的名称组成。如:
let obj = Object.create({ a: 10, b: 20 });
obj.c = 30;
obj.d = 40;
console.log(Object.keys(obj));
输出结果:
[ 'c', 'd' ]
4、Object.getOwnPropertyNames(),它和Ojbect.keys()类似,只是它返回对象的所有自有属性的名称,而不仅仅是可枚举的属性。如:
let obj = Object.create({ a: 10, b: 20 });
obj.c = 30;
obj.d = 40;
console.log(Object.getOwnPropertyNames(obj));
输出结果:
[ 'c', 'd' ]
1.4.8 属性的getter和setter
- 对象属性是由名字、值和一组特性构成的。
在es5中,属性值可以被getter和setter两种方法替换,由getter和setter定义的属性称为存储器属性,它不同于数据属性,数据属性只是简单的一个值。 - 当程序查询存取器属性的值时,JS调用getter方法(无参数),这个方法的返回值就是属性存取表达式的值。
- 当程序设置一个存取器属性的值时,JS调用setter方法,将赋值表达式右侧的值当做参数传入setter。从某种意义上讲,这个方法负责“设置”属性值。可以忽略setter方法的返回值。
实例:
let circle = {
r: 10,
get round() {
return 2 * this.r * Math.PI
},
set round(v) {
this.r = v / 2 / Math.PI
},
get area() {
return Math.PI * this.r ** 2
}
}
console.log(circle.round, circle.area)
circle.round = 60
console.log(circle.r, circle.area)
let circle1 = Object.create(circle);
// 和数据属性一样,存取器属性是可以继承的。
circle1.r = 20;
console.log(circle1.round);
circle1.round = 500;
console.log(circle1.r, circle1.area);
输出结果:
62.83185307179586 314.1592653589793
9.549296585513721 286.47889756541167
125.66370614359172
79.57747154594767 19894.367886486918
1.4.9 属性的特性
1、除了包含名字和值之外,属性还包含一些标识它们可写、可枚举和可配置的特性。
- 可以通过这些API给原型对象添加方法,并将它们设置成不可枚举的,这让它们看起来更像内置方法。
- 可以通过这些API给对象定义不能修改或删除的属性,借此“锁定”这个对象。
2、数据属性的4个特性
值(value)、可写性(writable)、可枚举性(enumerable)和可配置性(configurable)。
3、存取器属性不具有值(value)特性和可写性。
- 它们的可写性是由setter方法存在与否决定的。
- 因此存取器属性的4个特性是读取(get)、写入(set)、可枚举性和可配置性。
4、通过一个名为“属性描述符”(property descriptor)的对象实现属性特性的查询和设置操作。
- 这个对象代表那4个特性。
- 描述符对象的属性和它们所描述的属性特性是同名的。因此,数据属性的描述符对象的属性有value、writable、enumerable和configurable。
- Object.getOwnPropertyDescriptor()可以获得某个对象特定属性的属性描述符。
- 对于继承属性和不存在的属性,返回undefined。
如:
let circle = {
r: 10,
get round() {
return 2 * this.r * Math.PI
},
set round(v) {
this.r = v / 2 / Math.PI
},
get area() {
return Math.PI * this.r ** 2
}
}
let circle1 = Object.create(circle);
console.log(Object.getOwnPropertyDescriptor(circle, "r"));
console.log(Object.getOwnPropertyDescriptor(circle1, "r"));
输出:
{ value: 10, writable: true, enumerable: true, configurable: true }
undefined
5、要想设置属性的特性,或者想让新建属性具有某种特性,则需要调用Object.definePeoperty(),传入要修改的对象、要创建或修改的属性的名称以及属性描述符对象。传入Object.defineProperty()的属性描述符对象不必包含所有4个特性。如:
let o = {};
Object.defineProperty(o, "x", {
value: 10,
writable: true,
enumerable: false,
configurable: false,
});
console.log(o.x, Object.keys(o)); // 10 []
6、如果要同时修改或创建多个属性,使用Object.defineProperties()。第一个参数是要修改的对象,第二个参数是一个映射表,它包含要新建或修改的属性的名称,以及它们的属性描述符。如:
let p = Object.defineProperties(
{},
{
x: { value: 1, writable: true, enumerable: true, configurable: true },
y: { value: 1, writable: true, enumerable: true, configurable: true },
r: {
get: function () {
return Math.hypot(this.x, this.y);
},
enumerable: true,
configurable: true,
},
}
);
1.5 对象的特性和序列化对象
1.5.1 原型属性
原型属性是在实例对象创建之初就设置好的。
- 原型属性是在实例对象创建之初就设置好的
- 将对象作为参数传入Object.getPrototypeOf()可以查询它的原型
-
要想检测一个对象是否是另一个对象的原型(或处于原型链中),使用isPrototypeOf()方法。(和instanceof运算符非常类似)
如:let o = { x: 1 }; let p = Object.create(o); p.y = 2; console.log(Object.getPrototypeOf(p)); // { x: 1 } console.log(o.isPrototypeOf(p)); // true
1.5.2 可扩展性
对象的可扩展性用以表示是否可以给对象添加新属性。
- 所有内置对象和自定义对象都是显式可扩展的。
- 宿主对象的可扩展性是由JavaScript引擎定义的。
1.5.3 序列化对象
1、对象序列化是指将对象的状态转换为字符串,也可将字符串还原为对象。
2、ES5提供了内置函数JSON.stringify()和JSON.parse()用来序列化和反序列化JavaScript对象。
3、注意事项
- 函数、RegExp、Error对象和undefined值不能序列化和还原。
- JSON.stringify()只能序列化对象可枚举的自有属性
- 对于一个不能序列化的属性来说,在序列化后的输出字符串中会将这个属性省略掉
1.6 Object 构造函数的方法
Object构造函数提供了如下方法:
方法 | 描述 |
---|---|
Object.assign() | 通过复制一个或多个对象来创建一个新的对象。 |
Object.create() | 使用指定的原型对象和属性创建一个新对象。 |
Object.defineProperty() | 给对象添加一个属性并指定该属性的配置。 |
Object.defineProperties() | 给对象添加多个属性并分别指定它们的配置。 |
Object.entries() | 返回给定对象自身可枚举属性的 [key, value] 数组。 |
Object.freeze() | 冻结对象,其他代码不能删除或更改任何属性。 |
Object.getOwnPropertyDescriptor() | 返回对象指定的属性配置。 |
Object.getOwnPropertyNames() | 返回一个数组,它包含了指定对象所有的可枚举或不可枚举的属性名 |
Object.getOwnPropertySymbols() | 返回一个数组,它包含了指定对象自身所有的符号属性。 |
Object.getPrototypeOf() | 返回指定对象的原型对象。 |
Object.is() | 比较两个值是否相同。所有 NaN 值都相等(这与==和===不同)。 |
Object.isExtensible() | 判断对象是否可扩展。 |
Object.isFrozen() | 判断对象是否已经冻结。 |
Object.isSealed() | 判断对象是否已经密封。 |
Object.keys() | 返回一个包含所有给定对象自身可枚举属性名称的数组。 |
Object.preventExtensions() | 防止对象的任何扩展。 |
Object.seal() | 防止其他代码删除对象的属性。 |
Object.setPrototypeOf() | 设置对象的原型(即内部 [[Prototype]] 属性)。 |
Object.values() | 返回给定对象自身可枚举值的数组。 |