ES6知识点总结（七）
对象进阶
JavaScript对象
JavaScript的基本数据类型，一种复合值，可看做是属性的无序集合。
特征
- 每个属性都是一个名/值对 （名称是唯一的）
- 属性名是字符串，可以把对象看成是从字符串到值得映射。
- 可以从一个称为原型的对象继承属性
- 对象是动态的，可以增加或删除属性
- 除了字符串、数值、true、false、null和undefined，其他值都是对象。
- 属性值是任意JavaScript值，或者是一个getter或setter函数。
- 对象最常见的用法是对其属性进行创建、设置、查找、删除、检测和枚举等操作。
属性特征（property abttribute）
- 可写（writable attribute），表明是否可以设置属性的值。
- 可枚举（enumerable attribute），表明是否可以通过for/in结构返回该属性。
- 可配置（configurable attribute），表明是否可以删除或修改该属性。
对象特性
- 对象的原型（prototype），指向另一个对象，该对象的属性会被当前对象继承
- 对象的类（class），一个标识对象类型的字符串
- 对象的扩展标记（extensible flag），指明了是否可以向该对象添加新属性
对象的分类
- 内置对象，native object
由ECMAScript实现提供的对象，独立于宿主环境，在一个脚本程序执行的开始处。
包括：String（字符串对象）、RegExp（正则表达式对象）、Number（数字对象）、Math（数学对象）、Function（函数对象）、Error（异常对象）、Date（日期/时间对象）、Boolean（布尔对象）、Array（数组对象）、Object（对象超类） - 宿主对象，host object
由 ECMAScript 实现的宿主环境提供的对象 - 自定义对象，user-defined object
属性的分类
- 自有属性，own property
- 继承属性，inherited property
创建对象
- 对象字面量
对象字面量是一个表达式，每次运算都会创建一个新的对象，其中的属性值也会重新计算。
let empty = {}; //没有任何属性的对象
let point = { x: 0, y: 0 }; //具有属性的对象
let book = {
//属性名中有空格，必须用字符串表示。
"main title": "JavaScript",
//属性名中有特殊字符，必须用字符串表示
"sub-title": "The Definitive Gruide",
//属性名可以是保留字，但尽量避免。
for: "all audiences",
//属性值可以是一个对象。
author: {
firstname: "David",
lastname: "Flanagan",
},
};- 通过new创建对象
通过new调用构造函数（constructor）来创建并初始化一个新对象。
JavaScript语言核心中的原始类型都包含内置构造函数，如Object()、Array()、Date()等
function Person(name , age){
this.name = name;
this.age = age;
return this;
}
var p1 = new Object();
p1 = Person('neo','23');
console.log(p1.name); //neo原型
- 每一个JavaScript对象（null除外）都和原型对象相关联。每一个对象都从原型继承属性
所有通过对象字面量创建的对象都具有同一个原型对象
let obj = {value:100};
Object.prototype.flag = "head"; //最顶层的原型增加了属性
console.log(obj.flag); //head
let arr = [1,2,3,4];
console.log(arr.flag); //head
let str= "adw";
console.log(str.flag); //head- 通过Object.prototype获得原型对象的引用。
（Object.prototype的原型是null，它是对象继承的顶端）
对象.__ proto__ == Object.prototype - 通过new和构造函数创建的对象的原型就是构造函数的prototype属性引用的对象
如：new Array()对象的原型就是Array.prototype - 极少对象没有原型。
如：Object.prototype，它不继承任何属性。 - 所有内置构造函数都具有一个继承自Object.prototype的原型
Array.prototype的属性继承自Object.prototype。
通过层级的原型继承形成的链接，称为“原型链”（prototype chain）
- Object.create( )
创建一个新对象，使用现有的对象来提供新创建的对象的__proto__
// obj1继承了属性x和y。
let obj1 = Object.create({ x: 1, y: 2 });
//obj2不继承任何属性和方法。
let obj2 = Object.create(null);
//obj3是一个普通的空对象。
let obj3 = Object.create(Object.prototype);原型对象保护机制
当一个对象要改变属性对应的值，会给对象自动创建一个新的属性，而不是改变原型对象中的对应属性。
属性相关
访问属性
使用“ . ”和“ [ ] ”来访问对象的属性
let author = {
"first name": "Tonny",
"last-name": "Michael",
age: 40,
};
console.log(author["first name"], author["last-name"]); //Tonny Michael
let { "first name": fname, "last-name": lname } = author;
console.log(fname, lname, author.age); //Tonny Michael 40作为关联数组的对象
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
}继承
属性赋值操作首先检查原型链，以此判断是否允许赋值操作。
let a = {};
a.x = 1;
let b = Object.create(a);
b.y = 2;
b.x = 100;
let c = Object.create(b);
c.z = 3;
console.log(c.toString()); //[object Object]
console.log(c.x + c.y + c.z); //105属性访问错误
查询一个不存在的属性并不会报错，如果在对象o自身的属性或继承的属性中均未找到属性x，属性访问表达式o.x返回undefined
如果对象不存在，那么试图查询这个不存在的对象的属性就会报错
对象o设置属性p会失败的场景
- o中的属性p是只读的：不能给只读属性重新赋值(defineProperty()方法中有一个例外，可以对可配置的只读属性重新赋值
- o中的属性p是继承属性，且它是只读的：不能通过同名自有属性覆盖只读的继承属性
- o中不存在自有属性p：o没有使用setter方法继承属性p，并且o的可扩展性(extensible attribute)是false
删除属性
delete运算符可以删除对象的属性，只能删除自有属性，不能删除继承属性
let o = { x: 1 };
delete o.x;
delete o.toString;
console.log(o, o.toString()); //{} "[object Object]"delete只是断开属性和宿主对象的联系，而不会去操作属性中的属性。
let book= { "author":"may"};
let auth = book.author;
delete book.author;
console.log(book, auth); //{} "may"delete不能删除那些可配置性为false的属性
检测属性
判断某个属性是否存在于某个对象中，可以通过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")); //true
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枚举属性
for/in循环可以在循环体中遍历对象中所有可枚举的属性(包括自有属性和继承的属性)，把属性名称赋值给循环变量
let o =Object.create({m:10,n:20});
o.x=1; o.y=2; o.z=3;
for (let p in o) {
console.log(p, o[p]);
//x 1
//y 2
//z 3
//m 10
//n 20
}Object.keys()，它返回一个数组，这个数组由对象中可枚举的自有属性的名称组成
Object.getOwnPropertyNames()，返回对象的所有自有属性的名称，不仅仅是可枚举的属性。
let o = Object.create({ m: 10, n: 20 });
o.x = 1; o.y = 2; o.z = 3;
console.log(Object.keys(o)); //["x", "y", "z"]
let o = Object.create({ m: 10, n: 20 });
o.x = 1; o.y = 2; o.z = 3;
console.log(Object.getOwnPropertyNames(o)); //["x", "y", "z"]存取器属性
由getter和setter定义的属性称做“存取器属性”
- 当程序查询存取器属性的值时，JavaScript调用getter方法(无参数)。这个方法的返回值就是属性存取表达式的值。
- 当程序设置一个存取器属性的值时，JavaScript调用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); //62.83185307179586 314.1592653589793
circle.round = 60;
console.log(circle.r, circle.area); //9.549296585513721 286.47889756541167数据属性的4个特性
值(value)、可写性(writable)、可枚举性(enumerable)、可配置性(configurable)
存取器属性的4个特性
读取(get)、写入(set)、可枚举性(enumerable)、可配置性(configurable)
通过一个名为“属性描述符”(property descriptor)的对象实现属性特性的查询和设置操作
- Object.getOwnPropertyDescriptor()可以获得某个对象特定属性的属性描述符
- 调用Object.definePeoperty()设置属性的特性
let o = {};
Object.defineProperty(o, "x", {
value: 10,
writable: true,
enumerable: false,
configurable: true,
});
console.log(o.x, Object.keys(o)); //10 []
console.log(Object.getOwnPropertyDescriptor(o, "x"));
//{value: 10, writable: true, enumerable: false, configurable: true}
Object.defineProperty(o, "x", { enumerable: true });
console.log(Object.getOwnPropertyDescriptor(o, "x"));
//{value: 10, writable: true, enumerable: true, configurable: true}如果要同时修改或创建多个属性，使用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,
},
}
);原型属性
- 通过对象直接量创建的对象使用Object.prototype作为它们的原型
- 通过new创建的对象使用构造函数（ constructor属性）的prototype属性作为它们的原型
- 通过Object.create()创建的对象使用第一个参数(也可以是null)作为它们的原型
- 将对象作为参数传入Object.getPrototypeOf()可以查询它的原型
isPrototypeOf()方法，检测一个对象是否是另一个对象的原型(或处于原型链中)
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可扩展性
- 可以给对象添加新属性
- 所有内置对象和自定义对象都是显式可扩展的
- 宿主对象的可扩展性是由JavaScript引擎定义的
对象序列化(serialization)是指将对象的状态转换为字符串，也可将字符串还原为对象
- 内置函数JSON.stringify()和JSON.parse()用来序列化和反序列化JavaScript对象
- JSON.stringify()只能序列化对象可枚举的自有属性
- 函数、RegExp、Error对象和undefined值不能序列化和还原
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()
返回给定对象自身可枚举值的数组。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
