共计 12914 个字符，预计需要花费 33 分钟才能阅读完成。
本文是我学习《你所不晓得的 javaScript 上卷》的读书笔记的整顿。
更多具体内容，请 微信搜寻“前端爱好者 “， 戳我 查看。
1. 对象
对象（object）是 JavaScript 语言的外围概念，也是最重要的数据类型。
什么是对象？简略说，对象就是一组“键值对”（key-value）的汇合，是一种无序的复合数据汇合。
var obj = {
foo: 'Hello',
bar: 'World'
};
下面代码中，大括号就定义了一个对象，它被赋值给变量 obj，所以变量 obj 就指向一个对象。
该对象外部蕴含两个键值对（又称为两个“成员”）:
-
第一个键值对是 foo: ‘Hello’，其中 foo 是“键名”（成员的名称），字符串 Hello 是“键值”（成员的值）。
键名与键值之间用冒号分隔。
-
第二个键值对是 bar: ‘World’，bar 是键名，World 是键值。
两个键值对之间用逗号分隔。
1.1 创立新对象
JavaScript 领有一系列预约义的对象。
从 JavaScript 1.2 之后，你能够通过对象初始化器（Object Initializer）创建对象。
你也能够创立一个构造函数并应用该函数和 new 操作符 初始化对象。
1.1.1 应用对象初始化器 / 对象的文字语法
var myObj = {
key: value
// ...
};
1.1.2 应用构造函数
function Person(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
}
var rand = new Person("Rand McKinnon", 33, "M");
1.1.3 应用 Object.create 办法
对象也能够用 Object.create() 办法创立。
该办法十分有用，因为它容许你为创立的对象抉择其原型对象，而不必定义一个构造函数。
// Animal properties and method encapsulation
var Animal = {
type: "Invertebrates", // Default value of properties
displayType : function() { // Method which will display type of Animal
console.log(this.type);
}
}
// Create new animal type called animal1
var animal1 = Object.create(Animal);
animal1.displayType(); // Output:Invertebrates
// Create new animal type called Fishes
var fish = Object.create(Animal);
fish.type = "Fishes";
fish.displayType(); // Output:FishesObject.create() 办法会应用指定的原型对象及其属性去创立一个新的对象。
1Object.create(proto[, propertiesObject])
Object.create()
参数
- proto 新创建对象的原型对象。
- propertiesObject 可选。
如果没有指定为 undefined，则是要增加到新创建对象的可枚举属性（即其本身定义的属性，而不是其原型链上的枚举属性）对象的属性描述符以及相应的属性名称。
这些属性对应 Object.defineProperties()的第二个参数。
返回值 — 在指定原型对象上增加新属性后的对象。
例外 — 如果proto 参数不是 null 或一个 对象，则抛出一个 TypeError 异样。
1.2 javaScript 内置对象
对象是 JavaScript 的根底。
JavaScript 中有一些对象子类型，通常被称为 内置对象，次要有：
- String
- Number
- Boolean
- Object
- Function
- Array
- Date
- RegExp
- Error
有些内置对象的名字看起来和简略根底类型一样，不过实际上它们的关系更简单。
根本数据类型
在 JavaScript 中一共有六种次要类型（术语是“语言类型”）
- string
- number
- boolean
- null
- undefined
- object（注：Array 是非凡的 Object）
- Symbol（es6 新定义的）
简略根本类型（string、boolean、number、null 和 undefined）自身并不是对象。
null 有时会被当作一种对象类型，然而这其实只是语言自身的一个 bug，即对 null 执行
typeof null 时会返回字符串 “object”。实际上，null 自身是根本类型。
“JavaScript 中万物皆是对象”，这显然是谬误的。
留神辨别 js 中的根本数据类型和内置对象
这些内置对象从表现形式来说很像其余语言中的类型（type）或者类（class），比方 Java 中的 String 类。
然而在 JavaScript 中，它们实际上只是一些内置函数。
这些内置函数能够当作构造函数
（由 new 产生的函数调用）来应用，从而能够结构一个对应子类型的新对象。
var strPrimitive = "I am a string";
typeof strPrimitive; // "string"
strPrimitive instanceof String; // false
var strObject = new String("I am a string");
typeof strObject; // "object"
strObject instanceof String; // true
// 查看 sub-type 对象
Object.prototype.toString.call(strObject); // [object String]
string 和 number、boolean JS 引擎会在须要的时候把他们转成相应的对象，调用其中放大，操作实现后对象又转回成简略的字面量。
null 和 undefined 没有对应的结构模式，它们只有文字模式。
Date 只有结构，没有文字模式。
Object、Array、Function 和 RegExp（正则表达式）无论应用文字模式还是结构模式，它们都是对象，不是字面量。
Error 对象很少在代码中显式创立，个别是在抛出异样时被主动创立。也能够应用 new Error(..) 这种结构模式来创立。
1.3 对象取值
如果要拜访 对象中的值，咱们须要应用 . 操作符或者 [] 操作符。
- . 语法通常被称为“属性拜访”，
- [] 语法通常被称为“键拜访”。
var myObject = {a: 2};
myObject.a; // 2
myObject["a"]; // 2
在对象中，属性名永远都是字符串。
如果你应用 string（字面量）以外的其余值作为属性名，那它首先会被转换为一个字符串。
即便是数字也不例外，尽管在数组下标中应用的确实是数字，然而在对象属性名中数字会被转换成字符串，所以当心 不要搞混对象和数组中数字的用法。
1.4 可计算属性名
如果须要通过表达式来计算属性名，那么 myObject[..] 这种属性拜访语法就能够派上用场了，如能够应用 myObject[prefix + name]。
ES6 减少了可计算属性名，能够在文字模式中应用 [] 包裹一个表达式来当作属性名：
var prefix = "foo";
var myObject = {[prefix + "bar"]:"hello",
[prefix + "baz"]: "world"
};
myObject["foobar"]; // hello myObject["foobaz"]; // world
可计算属性名最罕用的场景可能是 ES6 的符号（Symbol）
1.5 属性与办法
1.5.1 函数永远不会“属于”一个对象
从技术角度来说，
函数永远不会“属于”一个对象，
所以把对象外部援用的函数称为“办法”仿佛有点不妥。
function foo() {console.log( "foo");
}
var someFoo = foo; // 对 foo 的变量援用
var myObject = {someFoo: foo};
foo; // function foo(){..}
someFoo; // function foo(){..}
myObject.someFoo; // function foo(){..}someFoo 和 myObject.someFoo 只是对于同一个函数的不同援用，并不能阐明这个函数是特地的或者“属于”某个对象。
如果 foo() 定义时在外部有一个 this 援用，那这两个函数援用的惟一区别就是 myObject.someFoo 中的 this 会被隐式绑定到一个对象。
无论哪种援用模式都不能称之为“办法”。
1.5.2 在对象的文字模式中申明一个函数表达式
即便你在对象的文字模式中申明一个函数表达式，这个函数也不会“属于”这个对象
它们只是对于雷同函数对象的多个援用。
var myObject = {foo: function() {console.log( "foo");
}
};
var someFoo = myObject.foo;
someFoo; // function foo(){..}
myObject.foo; // function foo(){..}
1.6 数组
数组也是对象，所以尽管每个下标都是整数，你依然能够给数组增加属性
var myArray = ["foo", 42, "bar"];
myArray.baz = "baz";
myArray.length; // 3
myArray.baz; // "baz"
然而数组和一般的对象都依据其对应的行为和用处进行了优化，所以最好:
- 只用对象来存储键 / 值对，
- 只用数组来存储数值下标 / 值对。
如果你试图向数组增加一个属性，然而属性名“看起来”像一个数字，那它会变成一个数值下标（因而会批改数组的内容而不是增加一个属性）
var myArray = ["foo", 42, "bar"];
myArray["3"] = "baz";
myArray.length; // 4
myArray[3]; // "baz" 2. 对象罕用操作
2.1 复制对象
JavaScript 初学者最常见的问题之一就是如何复制一个对象。看起来应该有一个内置的 copy()办法？
实际上事件比你设想的更简单，因为咱们无奈抉择一个默认的复制算法。
function anotherFunction() { /*..*/}
var anotherObject = {c: true};
var anotherArray = [];
var myObject = {
a: 2,
b: anotherObject, // 援用，不是复本！c: anotherArray, // 另一个援用！d: anotherFunction
};如何精确地示意 myObject 的复制呢？
首先，咱们应该判断它是浅复制还是深复制。
- 对于
浅拷贝来说，复制出的新对象中 a 的值会复制旧对象中 a 的值，也就是 2，然而新对象中 b、c、d 三个属性其实只是三个援用，它们和旧对象中 b、c、d 援用的对象是一样的。 - 对于
深复制来说，除了复制 myObject 以外还会复制 anotherObject 和 anotherArray。这时问题就来了，anotherArray 援用了 anotherObject 和
myObject，所以又须要复制 myObject，这样就会因为循环援用导致死循环。
平安的 JSON 对象
对于 JSON 平安（也就是说能够被序列化为一个 JSON 字符串并且能够依据这个字符串解析出一个构造和值齐全一样的对象）的对象来说，有一种奇妙的复制办法：
var newObj = JSON.parse(JSON.stringify( someObj) );
当然，这种办法须要保障对象是 JSON 平安的，所以只实用于局部状况。
浅复制 ES6 解决方案 — Object.assign(…)
Object.assign(..)
Object.assign() 办法用于将所有可枚举属性的值从一个或多个源对象复制到指标对象。它将返回指标对象。
const object1 = {
a: 1,
b: 2,
c: 3
};
const object2 = Object.assign({}, object1);
console.log(object2.c);
// expected output: 3
语法
Object.assign(target, ...sources)
参数
- target 指标对象。
- sources 源对象。
返回值
指标对象。
2.2 属性描述符 — Object.defineProperties()
从 ES5 开始，所有的属性都具备了属性描述符。
在 ES5 之前，JavaScript 语言自身并没有提供能够间接检测属性个性的办法，比方判断属性是否是只读。
var myObject = {a:2};
Object.getOwnPropertyDescriptor(myObject, "a");
// {
// value: 2,
// writable: true,（可写）// enumerable: true,（可枚举）// configurable: true（可配置）// }在创立一般属性时属性描述符会应用默认值。
咱们也能够应用 Object.defineProperty(..)
来增加一个新属性或者批改一个已有属性（如果它是 configurable）并对个性进行设置。
var myObject = {};
Object.defineProperty( myObject, "a", {
value: 2,
writable: true,
configurable: true,
enumerable: true
});
myObject.a; // 2
咱们应用 defineProperty(..) 给 myObject 增加了一个一般的属性并显式指定了一些个性。
然而，一般来说不会应用这种形式.
除非你想批改属性描述符。
2.2.1 Object.defineProperties()详解：
Object.defineProperties() 间接在一个对象上定义一个或多个新的属性或批改现有属性，并返回该对象。
语法
Object.defineProperties(obj, props)
参数
2.2.2 defineProperty VS defineProperties
Object.defineProperty() 间接在一个对象上定义一个新属性，或者批改一个对象的现有属性，并返回这个对象。
Object 的
defineProperty
defineProperties
次要性能就是用来定义或批改这些外部属性,
与之绝对应
getOwnPropertyDescriptor
getOwnPropertyDescriptors
就是获取这些外部属性的形容。
var obj = {};
Object.defineProperties(obj, {
'property1': {
value: true,
writable: true
},
'property2': {
value: 'Hello',
writable: false
}
// etc. etc.
});
区别：Object.defineProperty(obj, "key", {
enumerable: false,
configurable: false,
writable: false,
value: "static"
});2.3 对象是不可扭转或者对象属性不可扭转
在 ES5 中能够通过很多种办法来实现, 对象是不可扭转或者对象属性不可扭转。
所有的办法创立的都是 浅不变性，也就是说，它们只会影响指标对象和它的间接属性。
如果指标对象援用了其余对象（数组、对象、函数，等），其余对象的内容不受影响，依然是可变的。
2.3.1 对象常量
联合 writable:false 和 configurable:false 就能够创立一个真正的常量属性（不可批改、重定义或者删除）。
var myObject = {};
Object.defineProperty( myObject, "FAVORITE_NUMBER", {
value: 42,
writable: false,
configurable: false
});
2.3.2 禁止扩大
能够应用 Object.preventExtensions(..)
var myObject = {a:2};
Object.preventExtensions(myObject); myObject.b = 3;
myObject.b; // undefined
在非严格模式下，创立属性 b 会静默失败。在严格模式下，将会抛出 TypeError 谬误。
2.3.3 密封
Object.seal(..) 会创立一个“密封”的对象，这个办法实际上会在一个现有对象上调用
Object.preventExtensions(..) 并把所有现有属性标记为 configurable:false。
所以，密封之后不仅不能增加新属性，也不能重新配置或者删除任何现有属性（尽管能够批改属性的值）。
2.3.4 解冻
Object.freeze(..) 会创立一个解冻对象，这个办法实际上会在一个现有对象上调用 Object.seal(..) 并把所有“数据拜访”属性标记为 writable:false，这样就无奈批改它们的值。
这个办法是你能够利用在对象上的级别最高的不可变性，它会禁止对于对象自身及其任意间接属性的批改（不过就像咱们之前说过的，这个对象援用的其余对象是不受影响的）。
2.4 [[Get]]
var myObject = {a: 2};
myObject.a; // 2
myObject.a 是一次属性拜访，然而这条语句并不仅仅是在 myObjet 中查找名字为 a 的属性。
在语言标准中，myObject.a 在 myObject 上实际上是实现了 [[Get]] 操作（有点像函数调用：[[Get]]()）。
对象默认的内置 [[Get]] 操作首先在对象中查找是否有名称雷同的属性：
- 如果找到就会返回这个属性的值。
- 如果没有找到名称雷同的属性，依照 [[Get]] 算法的定义会执行另外一种十分重要的行为遍历可能存在的[[Prototype]] 链，也就是原型链。
- 如果无论如何都没有找到名称雷同的属性，那 [[Get]] 操作会返回值 undefined。
如果你援用了一个以后词法作用域中不存在的变量，并不会像对象属性一样返回 undefined，而是会抛出一个 ReferenceError 异样。
var myObject = {a: undefined};
myObject.a; // undefined
myObject.b; // undefined
从返回值的角度来说，这两个援用没有区别——它们都返回了 undefined。
然而，只管乍看之下没什么区别，
实际上底层的 [[Get]] 操作对 myObject.b 进行了更简单的解决。
2.5 [[Put]]
你可能会认为给对象的属性赋值会触发 [[Put]] 来设置或者创立这个属性。然而理论状况 并不齐全是这样。
[[Put]] 被触发时，理论的行为取决于许多因素，包含对象中是否曾经存在这个属性（这是最重要的因素）。
如果曾经存在这个属性，[[Put]] 算法大抵会查看上面这些内容。
- 属性是否是拜访描述符（参见 3.3.9 节）？如果是并且存在 setter 就调用 setter。
- 属性的数据描述符中 writable 是否是 false？如果是，在非严格模式下静默失败，在严格模式下抛出 TypeError 异样。
- 如果都不是，将该值设置为属性的值。
如果对象中不存在这个属性，[[Put]] 操作会更加简单。
2.6 Getter 和 Setter
对象默认的 [[Put]] 和 [[Get]] 操作别离能够管制属性值的设置和获取。
在 ES5 中能够应用 getter 和 setter 局部改写默认操作，然而只能利用在单个属性上，无奈利用在整个对象上。
getter 是一个暗藏函数，会在获取属性值时调用。
setter 也是一个暗藏函数，会在设置属性值时调用。
var myObject = {
// 给 a 定义一个 getter
get a() {return 2;}
};
Object.defineProperty(
myObject, // 指标对象
"b", // 属性名
{ // 描述符
// 给 b 设置一个 getter
get: function(){return this.a * 2},
// 确保 b 会呈现在对象的属性列表中
enumerable: true
}
);
myObject.a; // 2
myObject.b; // 4不论是对象文字语法中的 get a() { ..}，还是 defineProperty(..) 中的显式定义，二者都会在对象中创立一个不蕴含值的属性，
对于这个属性的拜访会主动调用一个暗藏函数，它的返回值会被当作属性拜访的返回值。
var myObject = {
// 给 a 定义一个 getter
get a() {return 2;}
};
myObject.a = 3;
myObject.a; // 2
因为咱们只定义了 a 的 getter，所以对 a 的值进行设置时 set 操作会疏忽赋值操作，不会抛出谬误。
而且即使有非法的 setter，因为咱们自定义的 getter 只会返回 2，所以 set 操作是没有意义的。
var myObject = {
// 给 a 定义一个 getter、get a() {return this._a_;},
// 给 a 定义一个 setter
set a(val) {this._a_ = val * 2;}
};
myObject.a = 2;
myObject.a; // 4为了让属性更正当，还该当定义 setter，和你冀望的一样，setter 会笼罩单个属性默认的 [[Put]]（也被称为赋值）操作。
本例中，实际上咱们把赋值（[[Put]]）操作中的值 2 存储到了另一个变量 _a_ 中。名称 _a_ 只是一种常规，没有任何非凡的行为——和其余一般属性一样
通常来说 getter 和 setter 是成对呈现。
2.7 判断对象中是否存在这个属性 / 办法
如何辨别：
- 值有可能是属性中存储的 undefined？
- 还是因为属性不存在所以返回 undefined？
在不拜访属性值的状况下 判断对象中是否存在这个属性
var myObject = {a:2};
("a" in myObject); // true
("b" in myObject); // false
myObject.hasOwnProperty("a"); // true myObject.hasOwnProperty("b"); // false
总结
in操作符会查看属性是否在对象及其 [[Prototype]] 原型链中
hasOwnProperty(..)只会查看属性是否在 myObject 对象中，不会查看 [[Prototype]] 链。所有的一般对象都能够通过对于 Object.prototype 的委托来拜访
hasOwnProperty(..),然而有的对象可能没有连贯到 Object.prototype（通过
Object. create(null)来创立）。在这种状况下，形如 myObejct.hasOwnProperty(..)
就会失败。这时能够应用一种更加强硬的办法来进行判断：
Object.prototype.hasOwnProperty. call(myObject,"a")
，它借用根底的 hasOwnProperty(..) 办法并把它显式绑定 到 myObject 上。
in 操作
in 操作符能够查看容器内是否有某个值，实际上查看的是某个 属性名 是否存在。
对于数组来说这个区别十分重要
4 in [2, 4, 6] 的结
果并不是你期待的 True，因为 [2, 4, 6] 这个数组中蕴含的属性名是 0、1、
2，没有 4。
2.8 枚举 – for..in(枚举属性值)
var myObject = { };
Object.defineProperty(
myObject, "a", {
enumerable: true, // 让 a 像一般属性一样能够枚举
value: 2
});
Object.defineProperty(
myObject, "b", {
enumerable: false, // 让 b 不可枚举
value: 3
});
myObject.b; // 3
("b" in myObject); // true
myObject.hasOwnProperty("b"); // true
// .......
for (var k in myObject) {console.log( k, myObject[k] );
}
// "a" 2myObject.b 的确存在并且有拜访值，然而却不会呈现在 for..in 循环中（只管能够通过 in 操作符来判断是否存在）。
起因是: numerable: false。
“可枚举”就相当于“能够呈现在对象属性的遍历中”。
对象上遍历属性值利用 for..in 循环，
遍历数组就应用传统的 for 循环来遍历数值索引。
var myObject = { };
Object.defineProperty(
myObject, "a", {
enumerable: true, // 让 a 像一般属性一样能够枚举
value: 2
});
Object.defineProperty(
myObject, "b", {
enumerable: false, // 让 b 不可枚举
value: 3
});
myObject.propertyIsEnumerable("a"); // true
myObject.propertyIsEnumerable("b"); // false
Object.keys(myObject); // ["a"]
Object.getOwnPropertyNames(myObject); // ["a", "b"]总结
- propertyIsEnumerable(..) 会查看给定的属性名是否间接存在于对象中（而不是在原型链上）并且满足 enumerable: true。
- Object.keys(..) 会返回一个数组，蕴含所有可枚举属性 enumerable: true。
- Object.getOwnPropertyNames(..) 会返回一个数组，蕴含所有属性，无论它们是否可枚举。
- in 和 hasOwnProperty(..)区别：是否查找 [[Prototype]] 链。
- Object.keys(..) 和 Object.getOwnPropertyNames(..) 都只会查找对象间接蕴含的属性。
2.9 遍历 – for..in(枚举属性值)
for..in 循环能够用来遍历对象的可枚举属性列表（包含 [[Prototype]] 链）。然而如何遍历属性的值呢？
数组 — 能够应用规范的 for 循环来遍历值
var myArray = [1, 2, 3];
for (var i = 0; i < myArray.length; i++) {console.log( myArray[i] );
}
// 1 2 3
这实际上并不是在遍历值，而是遍历下标来指向值，如 myArray[i]。
ES5 中减少了一些数组的辅助迭代器
- forEach(..)
- every(..)
- some(..)
每种辅助迭代器都能够 承受一个回调函数并把它利用到数组的每个元素上，
惟一的区别就是它们对于回调函数返回值的解决形式不同。
- forEach(..) 会遍历数组中的所有值并疏忽回调函数的返回值。
- every(..) 会始终运行直到回调函数返回 false（或者“假”值）
- some(..) 会始终运行直到回调函数返回 true（或者
“真”值）。
every(..) 和 some(..) 中非凡的返回值和一般 for 循环中的 break 语句相似，它们会提前终止遍历。
for..in 遍历对象是无奈间接获取属性值
应用 for..in 遍历对象是无奈间接获取属性值的，因为它实际上遍历的是对象中的 所有可枚举属性 ，你须要 手动获取属性值。
for..in 遍历数组下标时采纳的是数字程序（for 循环或者其余迭代器）
然而 for..in 遍历对象属性时的程序是不确定的，在不同的 JavaScript 引擎中可能不一样。
因而，在不同的环境中须要保障一致性时，肯定不要置信任何察看到的程序，它们是不牢靠的。
如何间接遍历值而不是数组下标（或者对象属性）呢？
ES6 减少了一种用来遍历数组的 for..of 循环语法（如果对象自身定义了迭代器的话也能够遍历对象）
var myArray = [1, 2, 3];
for (var v of myArray) {console.log( v);
}
// 1
// 2
// 3
var myArray = [1, 2, 3];
for (var v in myArray) {console.log( v);
}
// 0
// 1
// 2for..of 原理
for..of 循环首先会向被拜访对象申请一个迭代器对象，而后通过调用迭代器对象的
next() 办法来遍历所有返回值。
数组有内置的 @@iterator，因而 for..of 能够间接利用在数组上。咱们应用内置的 @@
iterator 来手动遍历数组，看看它是怎么工作的：
var myArray = [1, 2, 3];
var it = myArray[Symbol.iterator]();
it.next(); // { value:1, done:false} it.next(); // { value:2, done:false} it.next(); // { value:3, done:false} it.next(); // { done:true}
一般的对象没有内置的 @@iterator，所以无奈主动实现 for..of 遍历。
你能够给任何想遍历的对象定义 @@iterator
var myObject = {
a: 2,
b: 3
};
Object.defineProperty(
myObject, Symbol.iterator, {
enumerable: false,
writable: false,
configurable: true,
value: function() {
var o = this;
var idx = 0;
var ks = Object.keys(o);
return {next: function() {
return {value: o[ks[idx++]],
done: (idx > ks.length)
};
};
}
});
// 手动遍历 myObject
var it = myObject[Symbol.iterator]();
it.next(); // { value:2, done:false}
it.next(); // { value:3, done:false}
it.next(); // { value:undefined, done:true}
// 用 for..of 遍历 myObject for (var v of myObject) {console.log( v);
}
// 2
// 3咱们应用 Object.defineProperty(..) 定义了咱们本人的 @@iterator（次要是为了让它不可枚举），不过留神，咱们把符号当作可计算属性名（本章之前有介绍）。
此外，也能够间接在定义对象时进行申明，比方 var myObject = {a:2, b:3, [Symbol.iterator]: function() { /* .. */} }。
总结
参考文档
- http://javascript.ruanyifeng.com/grammar/object.html
- https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide…\_with\_Objects
- https://www.cnblogs.com/ihboy/p/6700059.html
- https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Refer…
- https://segmentfault.com/a/1190000011294519
- 《你所不晓得的 javaScript 上卷》
