一起探讨 JavaScript 的对象

水深无声 2022-03-08 03:36 161阅读 0赞

# 一起探讨 JavaScript 的对象 #

对象是多个属性的动态集合，它有一个链接着原型的隐藏属性（注：`__proto__`）。

一个属性拥有一个 key 和一个 value 。

## 属性的 key ##

属性的 key 是一个唯一的字符串。

访问属性有两种方式：点表示法和括号表示法。当使用点表示法，属性的 key 必须是有效的标识符。

1.  `let obj = {`
2.  `message : "A message"`
3.  `}`
4.  `obj.message //"A message"`
5.  `obj["message"] //"A message"`
6.  `复制代码`

访问一个不存在的属性不会抛出错误，但是会返回 `undefined`。

1.  `obj.otherProperty //undefined`
2.  `复制代码`

当使用括号表示法，属性的 key 不要求是有效的标识符 —— 可以是任意值。

1.  `let french = {};`
2.  `french["thank you very much"] = "merci beaucoup";`
3.   
4.  `french["thank you very much"]; //"merci beaucoup"`
5.  `复制代码`

当属性的key是一个非字符串的值，会用toString()方法（如果可用的话）把它转换为字符串。

1.  `let obj = {};`
2.  `//Number`
3.  `obj[1] = "Number 1";`
4.  `obj[1] === obj["1"]; //true`
5.  `//Object`
6.  `let number1 = {`
7.  `toString : function() { return "1"; }`
8.  `}`
9.  `obj[number1] === obj["1"]; //true`
10. `复制代码`

在上面的示例中，对象 `number1` 被用作一个 key 。它会被转换为字符串，转换结果 “1” 被用作属性的 key 。

## 属性的值 ##

属性的值可以是任意的基础数据类型，对象，或函数。

## 对象作为值 ##

对象可以嵌套在其他对象里。[看下面这个例子][Link 1]：

1.  `let book = {`
2.  `title : "The Good Parts",`
3.  `author : {`
4.  `firstName : "Douglas",`
5.  `lastName : "Crockford"`
6.  `}`
7.  `}`
8.  `book.author.firstName; //"Douglas"`
9.  `复制代码`

通过这种方式，我们就可以创建一个命名空间:

1.  `let app = {};`
2.  `app.authorService = { getAuthors : function() {} };`
3.  `app.bookService = { getBooks : function() {} };`
4.  `复制代码`

## 函数作为值 ##

当一个函数被作为属性值，通常成为一个方法。在方法中，`this` 关键字代表着当前的对象。

`this` ，会根据函数的调用方式有不同的值。了解更多关于`this` 丢失上下文的问题，可以查看[当"this"丢失上下文时应该怎么办][this]。

## 动态性 ##

对象本质上就是动态的。可以任意添加删除属性。

1.  `let obj = {};`
2.  `obj.message = "This is a message"; //add new property`
3.  `obj.otherMessage = "A new message"; //add new property`
4.  `delete obj.otherMessage; //delete property`
5.  `复制代码`

## Map ##

我们可以把对象当做一个 Map。Map 的 key 就是对象的属性。

访问一个 key 不需要去扫描所有属性。访问的时间复杂度是 o(1)。

## 原型 ##

对象有一个链接着原型对象的“隐藏”属性 `__proto__`，对象是从这个原型对象中继承属性的。

举个例子，使用对象字面量创建的对象有一个指向 `Object.prototype` 的链接:

1.  `var obj = {};`
2.  `obj.__proto__ === Object.prototype; //true`
3.  `复制代码`

### 原型链 ###

原型对象有它自己的原型。当一个属性被访问的时候并且不包含在当前对象中，JavaScript会沿着原型链向下查找直到找到被访问的属性，或者到达 `null` 为止。

### 只读 ###

原型只用于读取值。对象进行更改时，只会作用到当前对象，不会影响对象的原型；就算原型上有同名的属性，也是如此。

### 空对象 ###

正如我们看到的，空对象 `{}` 并不是真正意义上的空，因为它包含着指向 `Object.prototype` 的链接。为了创建一个真正的空对象，我们可以使用 `Object.create(null)` 。它会创建一个没有任何属性的对象。这通常用来创建一个Map。

## 原始值和包装对象 ##

在允许访问属性这一点上，JavaScript 把原始值描述为对象。当然了，原始值并不是对象。

1.  `(1.23).toFixed(1); //"1.2"`
2.  `"text".toUpperCase(); //"TEXT"`
3.  `true.toString(); //"true"`
4.  `复制代码`

为了允许访问原始值的属性， JavaScript 创造了一个包装对象，然后销毁它。JavaScript引擎对创建包装和销毁包装对象的过程做了优化。

数值、字符串和布尔值都有等效的包装对象。跟别是：`Number`、`String`、`Boolean`。

`null` 和 `undefined` 原始值没有相应的包装对象并且不提供任何方法。

## 内置原型 ##

Numbers 继承自`Number.prototype`，`Number.prototype`继承自`Object.prototype`。

1.  `var no = 1;`
2.  `no.__proto__ === Number.prototype; //true`
3.  `no.__proto__.__proto__ === Object.prototype; //true`
4.  `复制代码`

Strings 继承自 `String.prototype`。Booleans 继承自 `Boolean.prototype`

函数都是对象，继承自 `Function.prototype` 。函数拥有 `bind()`、`apply()` 和 `call()` 等方法。

所有对象、函数和原始值（除了 `null` 和 `undefined` ）都从 `Object.prototype` 继承属性。他们都有 `toString()` 方法。

## 使用 polyfill 扩充内置对象 ##

JavaScript 可以轻松地使用新功能扩充内置对象。

polyfill 就是一个代码片段，用于在不支持某功能的浏览器中实现该功能。

### 实用工具 ###

举个例子，这个为 `Object.assign()` 写的[polyfill][]，如果它不可用，那么就在 `Object` 上添加一个新方法。

为 `Array.from()` 写了类似的[polyfill][polyfill 1]，如果它不可用，就在 `Array` 上添加一个新方法。

### 原型 ###

新的方法可以被添加到原型。

举个例子，`String.prototype.trim()` [polyfill][polyfill 2]让所有的字符串都能使用 `trim()` 方法。

1.  `let text = " A text ";`
2.  `text.trim(); //"A text"`
3.  `复制代码`

`Array.prototype.find()` [polyfill][polyfill 3]让所有的数组都能使用`find()`方法。[polyfill][polyfill 4]也是同样的。

1.  `let arr = ["A", "B", "C", "D", "E"];`
2.  `arr.indexOf("C"); //2`
3.  `复制代码`

## 单一继承 ##

`Object.create()` 用特定的原型对象创建一个新对象。它用来做单一继承。[思考下面的例子][Link 2]:

1.  `let bookPrototype = {`
2.  `getFullTitle : function(){`
3.  `return this.title + " by " + this.author;`
4.  `}`
5.  `}`
6.  `let book = Object.create(bookPrototype);`
7.  `book.title = "JavaScript: The Good Parts";`
8.  `book.author = "Douglas Crockford";`
9.  `book.getFullTitle();//JavaScript: The Good Parts by Douglas Crockford`
10. `复制代码`

## 多重继承 ##

`Object.assign()` 从一个或多个对象拷贝属性到目标对象。它用来做多重继承。[看下面的例子][Link 3]:

1.  `let authorDataService = { getAuthors : function() {} };`
2.  `let bookDataService = { getBooks : function() {} };`
3.  `let userDataService = { getUsers : function() {} };`
4.  `let dataService = Object.assign({},`
5.  `authorDataService,`
6.  `bookDataService,`
7.  `userDataService`
8.  `);`
9.  `dataService.getAuthors();`
10. `dataService.getBooks();`
11. `dataService.getUsers();`
12. `复制代码`

## 不可变对象 ##

`Object.freeze()` 冻结一个对象。属性不能被添加、删除、更改。对象会变成不可变的。

1.  `"use strict";`
2.  `let book = Object.freeze({`
3.  `title : "Functional-Light JavaScript",`
4.  `author : "Kyle Simpson"`
5.  `});`
6.  `book.title = "Other title";//Cannot assign to read only property 'title'`
7.  `复制代码`

`Object.freeze()` 实行浅冻结。要深冻结，需要递归冻结对象的每一个属性。

## 拷贝 ##

`Object.assign()` 被用作拷贝对象。

1.  `let book = Object.freeze({`
2.  `title : "JavaScript Allongé",`
3.  `author : "Reginald Braithwaite"`
4.  `});`
5.  `let clone = Object.assign({}, book);`
6.  `复制代码`

`Object.assign()` 执行浅拷贝，不是深拷贝。它拷贝对象的第一层属性。嵌套的对象会在原始对象和副本对象之间共享。

## 对象字面量 ##

对象字面量提供一种简单、优雅的方式创建对象。

1.  `let timer = {`
2.  `fn : null,`
3.  `start : function(callback) { this.fn = callback; },`
4.  `stop : function() {},`
5.  `}`
6.  `复制代码`

但是，这种语法有一些缺点。所有的属性都是公共的，方法能够被重定义，并且不能在新实例中使用相同的方法。

1.  `timer.fn;//null`
2.  `timer.start = function() { console.log("New implementation"); }`
3.  `复制代码`

## Object.create() ##

`Object.create()` 和 `Object.freeze()` 一起能够解决最后两个问题。

首先，我要使用所有方法创建一个冻结原型 `timerPrototype` ，然后创建对象去继承它。

1.  `let timerPrototype = Object.freeze({`
2.  `start : function() {},`
3.  `stop : function() {}`
4.  `});`
5.  `let timer = Object.create(timerPrototype);`
6.  `timer.__proto__ === timerPrototype; //true`
7.  `复制代码`

当原型被冻结，继承它的对象不能够更改其中的属性。现在，`start()` 和 `stop()` 方法不能被重新定义。

1.  `"use strict";`
2.  `timer.start = function() { console.log("New implementation"); } //Cannot assign to read only property 'start' of object`
3.  `复制代码`

`Object.create(timerPrototype)` 可以用来使用相同的原型构建更多对象。

## 构造函数 ##

最初，JavaScript 语言提出构造函数作为这些的语法糖。[看下面的代码][Link 4]:

1.  `function Timer(callback){`
2.  `this.fn = callback;`
3.  `}`
4.  `Timer.prototype = {`
5.  `start : function() {},`
6.  `stop : function() {}`
7.  `}`
8.  `function getTodos() {}`
9.  `let timer = new Timer(getTodos);`
10. `复制代码`

所有的以 `function` 关键字定义的函数都可以作为构造函数。构造函数使用功能 `new` 调用。新对象将原型设定为 `FunctionConstructor.prototype`。

1.  `let timer = new Timer();`
2.  `timer.__proto__ === Timer.prototype;`
3.  `复制代码`

同样地，我们需要冻结原型来防止方法被重定义。

1.  `Timer.prototype = Object.freeze({`
2.  `start : function() {},`
3.  `stop : function() {}`
4.  `});`
5.  `复制代码`

### new 操作符 ###

当执行 `new Timer()` 时，它与函数 `newTimer()` 作用相同:

1.  `function newTimer(){`
2.  `let newObj = Object.create(Timer.prototype);`
3.  `let returnObj = Timer.call(newObj, arguments);`
4.  `if(returnObj) return returnObj;`
5.   
6.  `return newObj;`
7.  `}`
8.  `复制代码`

使用 `Timer.prototype` 作为原型，创造了一个新对象。然后执行 `Timer` 函数并为新对象设置属性字段。

## 类 ##

ES2015为这一切带来了更好的语法糖。[看下面的例子][Link 5]:

1.  `class Timer{`
2.  `constructor(callback){`
3.  `this.fn = callback;`
4.  `}`
5.   
6.  `start() {}`
7.  `stop() {}`
8.  `}`
9.  `Object.freeze(Timer.prototype);`
10. `复制代码`

使用 class 构建的对象将原型设置为 `ClassName.prototype` 。在使用类创建对象时，必须使用 `new` 操作符。

1.  `let timer= new Timer();`
2.  `timer.__proto__ === Timer.prototype;`
3.  `复制代码`

class 语法不会冻结原型，所以我们需要在之后进行操作。

1.  `Object.freeze(Timer.prototype);`
2.  `复制代码`

## 基于原型的继承 ##

在 JavaScript 中，对象继承自对象。

构造函数和类都是用来创建原型对象的所有方法的语法糖。然后它创建一个继承自原型对象的新对象，并为新对象设置数据字段 基于原型的继承具有保护记忆的好处。原型只创建一次并且由所有的实例使用。

### 没有封装 ###

基于原型的继承模式没有私有性。所有对象的属性都是公有的。

`Object.keys()` 返回一个包含所有属性键的数组。它可以用来迭代对象的所有属性。

1.  `function logProperty(name){`
2.  `console.log(name); //property name`
3.  `console.log(obj[name]); //property value`
4.  `}`
5.  `Object.keys(obj).forEach(logProperty);`
6.  `复制代码`

模拟的私有模式包含使用 `_` 来标记私有属性，这样其他人会避免使用他们：

1.  `class Timer{`
2.  `constructor(callback){`
3.  `this._fn = callback;`
4.  `this._timerId = 0;`
5.  `}`
6.  `}`
7.  `复制代码`

## 工厂模式 ##

JavaScript 提供一种使用工厂模式创建封装对象的新方式。

1.  `function TodoStore(callback){`
2.  `let fn = callback;`
3.   
4.  `function start() {},`
5.  `function stop() {}`
6.   
7.  `return Object.freeze({`
8.  `start,`
9.  `stop`
10. `});`
11. `}`
12. `复制代码`

`fn` 变量是私有的。只有 `start()` 和 `stop()` 方法是公有的。`start()` 和 `stop()` 方法不能被外界改变。这里没有使用 `this` ，所以没有 `this` 丢失上下文的问题。

对象字面量依然用于返回对象，但是这次它只包含函数。更重要的是，这些函数是共享相同私有状态的闭包。 `Object.freeze()` 被用来冻结公有 API。

Timer 对象的完整实现，请看[具有封装功能的实用JavaScript对象][JavaScript].

## 结论 ##

JavaScript 像对象一样处理原始值、对象和函数。

对象本质上是动态的，可以用作 Map。

对象继承自其他对象。构造函数和类是创建从其他原型对象继承的对象的语法糖。

`Object.create()` 可以用来单一继承，`Object.assign()` 用来多重继承。

工厂函数可以构建封装对象。

有关 JavaScript 功能的更多信息，请看：

[Discover the power of first class functions][]

[How point-free composition will make you a better functional programmer][]

[Here are a few function decorators you can write from scratch][]

[Why you should give the Closure function another chance][]

[Make your code easier to read with Functional Programming][]

转载：https://juejin.im/post/5b8b3f5ee51d4538a7520e05

[Link 1]: https://link.juejin.im/?target=https%3A%2F%2Fjsfiddle.net%2Fcristi_salcescu%2Fm0a65e2g%2F
[this]: https://link.juejin.im/?target=https%3A%2F%2Fmedium.freecodecamp.org%2Fwhat-to-do-when-this-loses-context-f09664af076f
[polyfill]: https://link.juejin.im/?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FJavaScript%2FReference%2FGlobal_Objects%2FObject%2Fassign%23Polyfill
[polyfill 1]: https://link.juejin.im/?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FJavaScript%2FReference%2FGlobal_Objects%2FArray%2Ffrom%23Polyfill
[polyfill 2]: https://link.juejin.im/?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FJavaScript%2FReference%2FGlobal_Objects%2FString%2FTrim%23Polyfill
[polyfill 3]: https://link.juejin.im/?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FJavaScript%2FReference%2FGlobal_Objects%2FArray%2Ffind%23Polyfill
[polyfill 4]: https://link.juejin.im/?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FJavaScript%2FReference%2FGlobal_Objects%2FTypedArray%2FfindIndex%23polyfill
[Link 2]: https://link.juejin.im/?target=https%3A%2F%2Fjsfiddle.net%2Fcristi_salcescu%2Fzu79cebu%2F
[Link 3]: https://link.juejin.im/?target=https%3A%2F%2Fjsfiddle.net%2Fcristi_salcescu%2Fghqsb9a3%2F
[Link 4]: https://link.juejin.im/?target=https%3A%2F%2Fjsfiddle.net%2Fcristi_salcescu%2Faz35x2qs%2F
[Link 5]: https://link.juejin.im/?target=https%3A%2F%2Fjsfiddle.net%2Fcristi_salcescu%2FaLg8t632%2F
[JavaScript]: https://link.juejin.im/?target=https%3A%2F%2Fmedium.freecodecamp.org%2Fhere-are-some-practical-javascript-objects-that-have-encapsulation-fc4c1a79c655
[Discover the power of first class functions]: https://link.juejin.im/?target=https%3A%2F%2Fmedium.freecodecamp.org%2Fdiscover-the-power-of-first-class-functions-fd0d7b599b69
[How point-free composition will make you a better functional programmer]: https://link.juejin.im/?target=https%3A%2F%2Fmedium.freecodecamp.org%2Fhow-point-free-composition-will-make-you-a-better-functional-programmer-33dcb910303a
[Here are a few function decorators you can write from scratch]: https://link.juejin.im/?target=https%3A%2F%2Fmedium.freecodecamp.org%2Fhere-are-a-few-function-decorators-you-can-write-from-scratch-488549fe8f86
[Why you should give the Closure function another chance]: https://link.juejin.im/?target=https%3A%2F%2Fmedium.freecodecamp.org%2Fwhy-you-should-give-the-closure-function-another-chance-31253e44cfa0
[Make your code easier to read with Functional Programming]: https://link.juejin.im/?target=https%3A%2F%2Fmedium.freecodecamp.org%2Fmake-your-code-easier-to-read-with-functional-programming-94fb8cc69f9d