对象，类与面向对象-JavaScript红宝书笔记

1. 理解对象

1.1 属性的类型

属性分两种：数据属性和访问器属性。。
为了将某个特性标识为内部特性，规范会用两个中括号把特性的名称括起来，比如[[Enumerable]]

1.1.1 数据属性

数据属性有4个特性
• [[Configurable]]：表示属性是否可以通过 delete 删除并重新定义，是否可以修改它的特性，以及是否可以把它改为访问器属性。默认为true。
• [[Enumerable]]：表示属性是否可以通过 for-in 循环返回，是否可以遍历。默认为 true，
• [[Writable]]：表示属性的值是否可以被修改。默认为true
• [[Value]]：包含属性实际的值。这就是前面提到的那个读取和写入属性值的位置。这个特性的默认值为 undefined。
Object.defineProperty()方法

let person = {}; 
Object.defineProperty(person, "name", { 
 writable: false, 
 value: "Nicholas" 
}); 
console.log(person.name); // "Nicholas" 
person.name = "Greg"; 
console.log(person.name); // "Nicholas"

1.1.2 访问器属性

包含一个获取（getter）函数和一个设置（setter）函数
• [[Configurable]]：表示属性是否可以通过 delete 删除并重新定义，是否可以修改它的特性，以及是否可以把它改为数据属性。默认情况下，所有直接定义在对象上的属性的这个特性都是 true。
• [[Enumerable]]：表示属性是否可以通过 for-in 循环返回。默认情况下，所有直接定义在对象上的属性的这个特性都是 true。
• [[Get]]：获取函数，在读取属性时调用。默认值为 undefined。
• [[Set]]：设置函数，在写入属性时调用。默认值为 undefined。
访问器的属性不能直接定义，必须使用Object.defineProperty()

let book = { 
 year_: 2017, 
 edition: 1
  }; 
Object.defineProperty(book, "year", { 
 get() { 
 return this.year_; 
 }, 
 set(newValue) { 
 if (newValue > 2017) { 
 this.year_ = newValue; 
 this.edition += newValue - 2017; 
 } 
 } 
}); 
book.year = 2018; 
console.log(book.edition); // 2

访问器属性的典型使用场景，即设置一个属性值会导致一些其他变化发生。
1.2 定义多个属性
Object.defineProperties()方法

let book = {}; 
Object.defineProperties(book, { 
 year_: { 
 value: 2017 
 }, 
 edition: { 
 value: 1 
 }, 
 year: { 
 get() { 
 return this.year_; 
 },
   set(newValue) { 
 if (newValue > 2017) { 
 this.year_ = newValue; 
 this.edition += newValue - 2017; 
 } 
 } 
 } 
});

1.3 读取属性的特性

Object.getOwnPropertyDescriptor()方法
两个参数：对象和要获取的属性名

• 对于访问器属性包含configurable、enumerable、get 和 set 属性
• 对于数据属性包含 configurable、enumerable、writable 和 value 属性

let person={
        name:"weihangyu",
        book:200
    };
    console.log(JSON.stringify(Object.getOwnPropertyDescriptor(person,"name"),null,2))

Object.getOwnPropertyDescriptor()方法

    let person={
        name:"weihangyu",
        book:200
    };
    console.log(JSON.stringify(Object.getOwnPropertyDescriptors(person),null,2))

1.4 合并对象

Object.assign()方法
参数：收一个目标对象和一个或多个源对象作为参数
Object.assign()对每个源对象执行的是浅复制。

let dest, src, result; 
/** 
 * 覆盖属性
 */ 
dest = { id: 'dest' }; 
result = Object.assign(dest, { id: 'src1', a: 'foo' }, { id: 'src2', b: 'bar' }); 
// Object.assign 会覆盖重复的属性
console.log(result); // { id: src2, a: foo, b: bar } 
// 可以通过目标对象上的设置函数观察到覆盖的过程：
dest = { 
 set id(x) { 
 console.log(x); 
 } 
}; 
Object.assign(dest, { id: 'first' }, { id: 'second' }, { id: 'third' }); 
// first 
// second 
// third 
/** 
 * 对象引用
 */ 
dest = {}; 
src = { a: {} }; 
Object.assign(dest, src); 
// 浅复制意味着只会复制对象的引用
console.log(dest); // { a :{} } 
console.log(dest.a === src.a); // true

1.5 对象标识及相等判定

Object.is()方法
和===很像
两个参数，判断两边是否相等。

console.log(Object.is(true, 1)); // false 
console.log(Object.is({}, {})); // false 
console.log(Object.is("2", 2)); // false 
// 正确的 0、-0、+0 相等/不等判定
console.log(Object.is(+0, -0)); // false 
console.log(Object.is(+0, 0)); // true 
console.log(Object.is(-0, 0)); // false 
// 正确的 NaN 相等判定
console.log(Object.is(NaN, NaN)); // true

要检查超过两个值，递归地利用相等性传递即可：

function recursivelyCheckEqual(x, ...rest) { 
 return Object.is(x, rest[0]) && 
 (rest.length < 2 || recursivelyCheckEqual(...rest)); 
}

1.6 增强的对象语法

1.6.1 属性值简写

为person添加name属性

let name = 'Matt'; 
let person = { 
 name: name 
};

可以改为下面的代码，效果一样。

let name = 'Matt'; 
let person = { 
 name 
}; 
console.log(person); // { name: 'Matt' }

1.6.2 可计算属性

中括号包围的对象属性键会被JavaScript认为表达式来求值：

const nameKey = 'name'; 
const ageKey = 'age'; 
const jobKey = 'job'; 
let uniqueToken = 0; 
function getUniqueKey(key) { 
 return `${key}_${uniqueToken++}`; 
} 
let person = { 
 [getUniqueKey(nameKey)]: 'Matt', 
 [getUniqueKey(ageKey)]: 27, 
 [getUniqueKey(jobKey)]: 'Software engineer' 
}; 
console.log(person); // { name_0: 'Matt', age_1: 27, job_2: 'Software engineer' }

因为被当作 JavaScript 表达式求值，所以可计算属性本身可以是复杂的表达式，在实例化时再求值：

1.6.3 简写方法名

let person = { 
 sayName: function(name) { 
 console.log(`My name is ${name}`); 
 } 
};

可以简写为下面的

let person = { 
 sayName(name) { 
 console.log(`My name is ${name}`); 
 } 
};

简写方法名与可计算属性键相互兼容：

const methodKey = 'sayName'; 
let person = { 
 [methodKey](name) { 
 console.log(`My name is ${name}`); 
 } 
} 
person.sayName('Matt'); // My name is Matt

1. 7 对象解构

对象解构就是使用与对象匹配的结构来实现对象属性赋值

// 使用对象解构
let person = { 
 name: 'Matt', 
 age: 27 
}; 
let { name: personName, age: personAge } = person; 
console.log(personName); // Matt 
console.log(personAge); // 27

上面代码直接把person的属性值赋给单个变量personName和personAge了。

如果想让变量直接使用属性的名称，那么可以使用简写语法

let person = { 
 name: 'Matt', 
 age: 27 
}; 
let { name, age } = person; 
console.log(name); // Matt 
console.log(age); // 27

也可以在解构赋值的同时定义默认值

let person = { 
 name: 'Matt', 
 age: 27 
}; 
let { name, job='Software engineer' } = person; 
console.log(name); // Matt 
console.log(job); // Software engineer

解构在内部使用函数 ToObject()把源数据结构转换为对象.

1.7.1 嵌套解构

let person = { 
 name: 'Matt', 
 age: 27, 
 job: { 
 title: 'Software engineer' 
 } 
}; 
// 声明 title 变量并将 person.job.title 的值赋给它
let { job: { title } } = person; 
console.log(title); // Software engineer

外层属性没有定义的情况下不能使用嵌套解构

1.7.2 部分解构

开始的赋值成功而后面的赋值出错，则整个解构赋值只会完成一部分

let person = { 
 name: 'Matt', 
 age: 27 
}; 
let personName, personBar, personAge; 
try { 
 // person.foo 是 undefined，因此会抛出错误
 ({name: personName, foo: { bar: personBar }, age: personAge} = person); 
} catch(e) {} 
console.log(personName, personBar, personAge); 
// Matt, undefined, undefined

1.7.3 参数上下文匹配

let person = { 
 name: 'Matt', 
 age: 27 
}; 
function printPerson(foo, {name, age}, bar) { 
 console.log(arguments); 
 console.log(name, age); 
} 
function printPerson2(foo, {name: personName, age: personAge}, bar) { 
 console.log(arguments); 
 console.log(personName, personAge); 
} 
printPerson('1st', person, '2nd'); 
// ['1st', { name: 'Matt', age: 27 }, '2nd'] 
// 'Matt', 27 
printPerson2('1st', person, '2nd'); 
// ['1st', { name: 'Matt', age: 27 }, '2nd'] 
// 'Matt', 27

2. 创建对象

2.1 工厂模式

下面的例子展示了一种按照特定接口创建对象的方式：

function createPerson(name, age, job) { 
 let o = new Object(); 
 o.name = name; 
 o.age = age; 
 o.job = job; 
 o.sayName = function() { 
 console.log(this.name); 
 }; 
 return o; 
} 
let person1 = createPerson("Nicholas", 29, "Software Engineer"); 
let person2 = createPerson("Greg", 27, "Doctor");

这种工厂模式虽然可以解决创建多个类似对象的问题，但没有解决对象标识问题（即新创建的对象是什么类型）。

2.2 构造函数模式

function Person(name, age, job){ 
 this.name = name; 
 this.age = age; 
 this.job = job; 
 this.sayName = function() { 
 console.log(this.name); 
 }; 
} 
let person1 = new Person("Nicholas", 29, "Software Engineer"); 
let person2 = new Person("Greg", 27, "Doctor"); 
person1.sayName(); // Nicholas 
person2.sayName(); // Greg

与工厂模式的区别：

• 没有显式地创建对象。
• 属性和方法直接赋值给了 this。
• 没有 return。
• 注意函数名 Person 的首字母大写

要创建 Person 的实例，应使用 new 操作符。以这种方式调用构造函数会执行如下操作：
(1) 在内存中创建一个新对象。
(2) 这个新对象内部的[[Prototype]]特性被赋值为构造函数的 prototype 属性。
(3) 构造函数内部的 this 被赋值为这个新对象（即 this 指向新对象）。
(4) 执行构造函数内部的代码（给新对象添加属性）。
(5) 如果构造函数返回非空对象，则返回该对象；否则，返回刚创建的新对象。

赋值给变量的函数表达式也可以表示构造函数

let Person = function(name, age, job) { 
 this.name = name; 
 this.age = age; 
 this.job = job; 
 this.sayName = function() { 
 console.log(this.name); 
 }; 
} 
let person1 = new Person("Nicholas", 29, "Software Engineer"); 
let person2 = new Person("Greg", 27, "Doctor"); 
person1.sayName(); // Nicholas 
person2.sayName(); // Greg 
console.log(person1 instanceof Object); // true 
console.log(person1 instanceof Person); // true 
console.log(person2 instanceof Object); // true 
console.log(person2 instanceof Person); // true

构造函数后面的括号可加可不加

2.2.1 构造函数也是函数

// 作为构造函数 
let person = new Person("Nicholas", 29, "Software Engineer"); 
person.sayName(); // "Nicholas" 
// 作为函数调用
Person("Greg", 27, "Doctor"); // 添加到 window 对象
window.sayName(); // "Greg" 
// 在另一个对象的作用域中调用
let o = new Object(); 
Person.call(o, "Kristen", 25, "Nurse"); 
o.sayName(); // "Kristen"

2.2.2 构造函数的问题

因为都是做一样的事，所以没必要定义两个不同的 Function 实例。况且，this 对象可以把函数与对象的绑定推迟到运行时。
要解决这个问题，可以把函数定义转移到构造函数外部：

function Person(name, age, job){ 
 this.name = name; 
 this.age = age; 
 this.job = job; 
 this.sayName = sayName; 
} 
function sayName() { 
 console.log(this.name); 
} 
let person1 = new Person("Nicholas", 29, "Software Engineer"); 
let person2 = new Person("Greg", 27, "Doctor"); 
person1.sayName(); // Nicholas 
person2.sayName(); // Greg

2.3 原型模式

每个函数都会创建一个 prototype 属性，这个属性是一个对象

未完待续…