在这部分内容的第一章中,我们提到了设置原型的现代方法。
__proto__
被认为是过时且不推荐使用的(deprecated),这里的不推荐使用是指 JavaScript 规范中规定,proto 必须仅在浏览器环境下才能得到支持。
现代的方法有:
- Object.create(proto[, descriptors]) —— 利用给定的
proto
作为[[Prototype]]
和可选的属性描述来创建一个空对象。 - Object.getPrototypeOf(obj) —— 返回对象
obj
的[[Prototype]]
。 - Object.setPrototypeOf(obj, proto) —— 将对象
obj
的[[Prototype]]
设置为proto
。
应该使用这些方法来代替 __proto__
。
例如:
let animal = {
eats: true
};
// 创建一个以 animal 为原型的新对象
let rabbit = Object.create(animal);
alert(rabbit.eats); // true
alert(Object.getPrototypeOf(rabbit) === animal); // true
Object.setPrototypeOf(rabbit, {}); // 将 rabbit 的原型修改为 {}
Object.create
有一个可选的第二参数:属性描述器。我们可以在此处为新对象提供额外的属性,就像这样:
let animal = {
eats: true
};
let rabbit = Object.create(animal, {
jumps: {
value: true
}
});
alert(rabbit.jumps); // true
描述器的格式与 属性标志和属性描述符 一章中所讲的一样。
我们可以使用 Object.create
来实现比复制 for..in
循环中的属性更强大的对象克隆方式:
// 完全相同的对象 obj 的浅拷贝
let clone = Object.create(Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj));
此调用可以对 obj
进行真正准确地拷贝,包括所有的属性:可枚举和不可枚举的,数据属性和 setters/getters —— 包括所有内容,并带有正确的 [[Prototype]]
。
原型简史
如果我们数一下有多少种处理 [[Prototype]]
的方式,答案是有很多!很多种方法做的都是同一件事儿!
为什么会出现这种情况?
这是历史原因。
- 构造函数的
"prototype"
属性自古以来就起作用。 - 之后,在 2012 年,
Object.create
出现在标准中。它提供了使用给定原型创建对象的能力。但没有提供 get/set 它的能力。因此,许多浏览器厂商实现了非标准的__proto__
访问器,该访问器允许用户随时 get/set 原型。 - 之后,在 2015 年,
Object.setPrototypeOf
和Object.getPrototypeOf
被加入到标准中,执行与__proto__
相同的功能。由于__proto__
实际上已经在所有地方都得到了实现,但它已过时,所以被加入到该标准的附件 B 中,即:在非浏览器环境下,它的支持是可选的。
目前为止,我们拥有了所有这些方式。
为什么将 __proto__
替换成函数 getPrototypeOf/setPrototypeOf
?这是一个有趣的问题,需要我们理解为什么 __proto__
不好。继续阅读,你就会知道答案。
如果速度很重要,就请不要修改已存在的对象的 [[Prototype]]
从技术上来讲,我们可以在任何时候 get/set [[Prototype]]
。但是通常我们只在创建对象的时候设置它一次,自那之后不再修改:rabbit
继承自 animal
,之后不再更改。
并且,JavaScript 引擎对此进行了高度优化。用 Object.setPrototypeOf
或 obj.__proto__=
“即时”更改原型是一个非常缓慢的操作,因为它破坏了对象属性访问操作的内部优化。因此,除非你知道自己在做什么,或者 JavaScript 的执行速度对你来说完全不重要,否则请避免使用它。
“Very plain” objects
我们知道,对象可以用作关联数组(associative arrays)来存储键/值对。
……但是如果我们尝试在其中存储 用户提供的 键(例如:一个用户输入的字典),我们可以发现一个有趣的小故障:所有的键都正常工作,除了 "__proto__"
。
看一下这个例子:
let obj = {};
let key = prompt("What's the key?", "__proto__");
obj[key] = "some value";
alert(obj[key]); // [object Object],并不是 "some value"!
这里如果用户输入 __proto__
,那么赋值会被忽略!
我们不应该对此感到惊讶。__proto__
属性很特别:它必须是对象或者 null
。字符串不能成为 prototype。
但是我们不是 打算 实现这种行为,对吗?我们想要存储键值对,然而键名为 "__proto__"
的键值对没有被正确存储。所以这是一个 bug。
在这里,后果并没有很严重。但是在其他情况下,我们可能会对对象进行赋值操作,然后原型可能就被更改了。结果,可能会导致完全意想不到的结果。
最可怕的是 —— 通常开发者完全不会考虑到这一点。这让此类 bug 很难被发现,甚至变成漏洞,尤其是在 JavaScript 被用在服务端的时候。
为默认情况下为函数的 toString
以及其他内建方法执行赋值操作,也会出现意想不到的结果。
我们怎么避免这样的问题呢?
首先,我们可以改用 Map
,那么一切都迎刃而解。
但是 Object
在这里同样可以运行得很好,因为 JavaScript 语言的制造者很早就注意到了这个问题。
__proto__
不是一个对象的属性,只是 Object.prototype
的访问器属性:
因此,如果 obj.__proto__
被读取或者赋值,那么对应的 getter/setter 会被从它的原型中调用,它会 set/get [[Prototype]]
。
就像在本部分教程的开头所说的那样:__proto__
是一种访问 [[Prototype]]
的方式,而不是 [[prototype]]
本身。
现在,我们想要将一个对象用作关联数组,我们可以使用一些小技巧:
let obj = Object.create(null);
let key = prompt("What's the key?", "__proto__");
obj[key] = "some value";
alert(obj[key]); // "some value"
Object.create(null)
创建了一个空对象,这个对象没有原型([[Prototype]]
是 null
):
因此,它没有继承 __proto__
的 getter/setter 方法。现在,它被作为正常的数据属性进行处理,因此上面的这个示例能够正常工作。
我们可以把这样的对象称为 “very plain” 或 “pure dictionary” 对象,因为它们甚至比通常的普通对象(plain object){...}
还要简单。
缺点是这样的对象没有任何内建的对象的方法,例如 toString
:
let obj = Object.create(null);
alert(obj); // Error (no toString)
……但是它们通常对关联数组而言还是很友好。
请注意,大多数与对象相关的方法都是 Object.something(...)
,例如 Object.keys(obj)
—— 它们不在 prototype 中,因此在 “very plain” 对象中它们还是可以继续使用:
let chineseDictionary = Object.create(null);
chineseDictionary.hello = "你好";
chineseDictionary.bye = "再见";
alert(Object.keys(chineseDictionary)); // hello,bye
总结
设置和直接访问原型的现代方法有:
- Object.create(proto[, descriptors]) —— 利用给定的
proto
作为[[Prototype]]
(可以是null
)和可选的属性描述来创建一个空对象。 - Object.getPrototypeOf(obj) —— 返回对象
obj
的[[Prototype]]
(与__proto__
的 getter 相同)。 - Object.setPrototypeOf(obj, proto) —— 将对象
obj
的[[Prototype]]
设置为proto
(与__proto__
的 setter 相同)。
如果要将一个用户生成的键放入一个对象,那么内建的 __proto__
getter/setter 是不安全的。因为用户可能会输入 "__proto__"
作为键,这会导致一个 error,虽然我们希望这个问题不会造成什么大影响,但通常会造成不可预料的后果。
因此,我们可以使用 Object.create(null)
创建一个没有 __proto__
的 “very plain” 对象,或者对此类场景坚持使用 Map
对象就可以了。
此外,Object.create
提供了一种简单的方式来浅拷贝一个对象的所有描述符:
let clone = Object.create(Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj));
此外,我们还明确了 __proto__
是 [[Prototype]]
的 getter/setter,就像其他方法一样,它位于 Object.prototype
。
我们可以通过 Object.create(null)
来创建没有原型的对象。这样的对象被用作 “pure dictionaries”,对于它们而言,使用 "__proto__"
作为键是没有问题的。
其他方法:
- Object.keys(obj) / Object.values(obj) / Object.entries(obj) —— 返回一个可枚举的由自身的字符串属性名/值/键值对组成的数组。
- Object.getOwnPropertySymbols(obj) —— 返回一个由自身所有的 symbol 类型的键组成的数组。
- Object.getOwnPropertyNames(obj) —— 返回一个由自身所有的字符串键组成的数组。
- Reflect.ownKeys(obj) —— 返回一个由自身所有键组成的数组。
- obj.hasOwnProperty(key):如果
obj
拥有名为key
的自身的属性(非继承而来的),则返回true
。
所有返回对象属性的方法(如 Object.keys
及其他)—— 都返回“自身”的属性。如果我们想继承它们,我们可以使用 for...in
。
任务
为 dictionary 添加 toString 方法
重要程度: 5
这儿有一个通过 Object.create(null)
创建的,用来存储任意 key/value
对的对象 dictionary
。
为该对象添加 dictionary.toString()
方法,该方法应该返回以逗号分隔的所有键的列表。你的 toString
方法不应该在使用 for...in
循环遍历数组的时候显现出来。
它的工作方式如下:
let dictionary = Object.create(null);
// 你的添加 dictionary.toString 方法的代码
// 添加一些数据
dictionary.apple = "Apple";
dictionary.__proto__ = "test"; // 这里 __proto__ 是一个常规的属性键
// 在循环中只有 apple 和 __proto__
for(let key in dictionary) {
alert(key); // "apple", then "__proto__"
}
// 你的 toString 方法在发挥作用
alert(dictionary); // "apple,__proto__"
解决方案
可以使用 Object.keys
获取所有可枚举的键,并输出其列表。
为了使 toString
不可枚举,我们使用一个属性描述器来定义它。Object.create
语法允许我们为一个对象提供属性描述器作为第二参数。
let dictionary = Object.create(null, {
toString: { // 定义 toString 属性
value() { // value 是一个 function
return Object.keys(this).join();
}
}
});
dictionary.apple = "Apple";
dictionary.__proto__ = "test";
// apple 和 __proto__ 在循环中
for(let key in dictionary) {
alert(key); // "apple",然后是 "__proto__"
}
// 通过 toString 处理获得的以逗号分隔的属性列表
alert(dictionary); // "apple,__proto__"
当我们使用描述器创建一个属性,它的标识默认是 false
。因此在上面这段代码中,dictonary.toString
是不可枚举的。
请阅读 属性标志和属性描述符 一章进行回顾。
调用方式的差异
重要程度: 5
让我们创建一个新的 rabbit
对象:
function Rabbit(name) {
this.name = name;
}
Rabbit.prototype.sayHi = function() {
alert(this.name);
};
let rabbit = new Rabbit("Rabbit");
以下调用做的是相同的事儿还是不同的?
rabbit.sayHi();
Rabbit.prototype.sayHi();
Object.getPrototypeOf(rabbit).sayHi();
rabbit.__proto__.sayHi();
解决方案
第一个调用中 this == rabbit
,其他的 this
等同于 Rabbit.prototype
,因为 this
就点符号前面的对象。
所以,只有第一个调用显示 Rabbit
,其他的都显示的是 undefined
:
function Rabbit(name) {
this.name = name;
}
Rabbit.prototype.sayHi = function() {
alert( this.name );
}
let rabbit = new Rabbit("Rabbit");
rabbit.sayHi(); // Rabbit
Rabbit.prototype.sayHi(); // undefined
Object.getPrototypeOf(rabbit).sayHi(); // undefined
rabbit.__proto__.sayHi(); // undefined