原型继承
[[Prototype]]
在 JavaScript 中,对象有一个特殊的隐藏属性 [[Prototype]]
(如规范中所命名的),它要么为 null
,要么就是对另一个对象的引用。该对象被称为“原型”:
![image-20210924231642709](https://i.loli.net/2021/09/24/E5tKDcA1fbIgHFz.png)
当我们从 object
中读取一个缺失的属性时,JavaScript 会自动从原型中获取该属性。在编程中,这种行为被称为“原型继承”。
属性 [[Prototype]]
是内部的而且是隐藏的,但是这儿有很多设置它的方式。其中之一就是使用特殊的名字 __proto__
,就像这样:
let animal = {
eats: true
};
let rabbit = {
jumps: true
};
rabbit.__proto__ = animal; //(*) 设置 rabbit.[[Prototype]] = animal
// 现在这两个属性我们都能在 rabbit 中找到:
alert( rabbit.eats ); // true (**)
alert( rabbit.jumps ); // true
这里的 (*)
行将 animal
设置为 rabbit
的原型。
当 alert
试图读取 rabbit.eats
(**)
时,因为它不存在于 rabbit
中,所以 JavaScript 会顺着 [[Prototype]]
引用,在 animal
中查找(自下而上):
![image-20210924231723084](https://gitee.com/zyxbj/image-warehouse/raw/master/pics/202109242317126.png)
这里只有两个限制:
- 引用不能形成闭环。如果我们试图在一个闭环中分配
__proto__
,JavaScript 会抛出错误。 __proto__
的值可以是对象,也可以是null
。而其他的类型都会被忽略。
初学者常犯一个普遍的错误,就是不知道
__proto__
和[[Prototype]]
的区别。请注意,
__proto__
与内部的[[Prototype]]
不一样。__proto__
是[[Prototype]]
的 getter/setter。稍后,我们将看到在什么情况下理解它们很重要,在建立对 JavaScript 语言的理解时,让我们牢记这一点。
__proto__
属性有点过时了。它的存在是出于历史的原因,现代编程语言建议我们应该使用函数Object.getPrototypeOf/Object.setPrototypeOf
来取代__proto__
去 get/set 原型。稍后我们将介绍这些函数。根据规范,
__proto__
必须仅受浏览器环境的支持。但实际上,包括服务端在内的所有环境都支持它,因此我们使用它是非常安全的。由于
__proto__
标记在观感上更加明显,所以我们在后面的示例中将使用它。
写入不使用原型
原型仅用于读取属性。
对于写入/删除操作可以直接在对象上进行。
在下面的示例中,我们将为 rabbit
分配自己的 walk
:
let animal = {
eats: true,
walk() {
/* rabbit 不会使用此方法 */
}
};
let rabbit = {
__proto__: animal
};
rabbit.walk = function() {
alert("Rabbit! Bounce-bounce!");
};
rabbit.walk(); // Rabbit! Bounce-bounce!
从现在开始,rabbit.walk()
将立即在对象中找到该方法并执行,而无需使用原型:
![image-20210924231744575](https://gitee.com/zyxbj/image-warehouse/raw/master/pics/202109242317609.png)
访问器(accessor)属性是一个例外,因为分配(assignment)操作是由 setter 函数处理的。因此,写入此类属性实际上与调用函数相同。
也就是这个原因,所以下面这段代码中的 admin.fullName
能够正常运行:
let user = {
name: "John",
surname: "Smith",
set fullName(value) {
[this.name, this.surname] = value.split(" ");
},
get fullName() {
return `${this.name} ${this.surname}`;
}
};
let admin = {
__proto__: user,
isAdmin: true
};
alert(admin.fullName); // John Smith (*)
// setter triggers!
admin.fullName = "Alice Cooper"; // (**)
alert(admin.fullName); // Alice Cooper,admin 的内容被修改了
alert(user.fullName); // John Smith,user 的内容被保护了
在 (*)
行中,属性 admin.fullName
在原型 user
中有一个 getter,因此它会被调用。在 (**)
行中,属性在原型中有一个 setter,因此它会被调用。
this的值
在上面的例子中可能会出现一个有趣的问题:在 set fullName(value)
中 this
的值是什么?属性 this.name
和 this.surname
被写在哪里:在 user
还是 admin
?
答案很简单:this
根本不受原型的影响。
无论在哪里找到方法:在一个对象还是在原型中。在一个方法调用中,this
始终是点符号 .
前面的对象。
因此,setter 调用 admin.fullName=
使用 admin
作为 this
,而不是 user
。
for…in 循环
for..in
循环也会迭代继承的属性。
let animal = {
eats: true
};
let rabbit = {
jumps: true,
__proto__: animal
};
// Object.keys 只返回自己的 key
alert(Object.keys(rabbit)); // jumps
// for..in 会遍历自己以及继承的键
for(let prop in rabbit) alert(prop); // jumps,然后是 eats
如果这不是我们想要的,并且我们想排除继承的属性,那么这儿有一个内建方法 obj.hasOwnProperty(key):如果 obj
具有自己的(非继承的)名为 key
的属性,则返回 true
。
因此,我们可以过滤掉继承的属性(或对它们进行其他操作):
let animal = {
eats: true
};
let rabbit = {
jumps: true,
__proto__: animal
};
for(let prop in rabbit) {
let isOwn = rabbit.hasOwnProperty(prop);
if (isOwn) {
alert(`Our: ${prop}`); // Our: jumps
} else {
alert(`Inherited: ${prop}`); // Inherited: eats
}
这里我们有以下继承链:rabbit
从 animal
中继承,animal
从 Object.prototype
中继承(因为 animal
是对象字面量 {...}
,所以这是默认的继承),然后再向上是 null
:
![image-20210924231800425](https://gitee.com/zyxbj/image-warehouse/raw/master/pics/202109242318478.png)
注意,这有一件很有趣的事儿。方法 rabbit.hasOwnProperty
来自哪儿?我们并没有定义它。从上图中的原型链我们可以看到,该方法是 Object.prototype.hasOwnProperty
提供的。换句话说,它是继承的。
……如果 for..in
循环会列出继承的属性,那为什么 hasOwnProperty
没有像 eats
和 jumps
那样出现在 for..in
循环中?
答案很简单:它是不可枚举的。就像 Object.prototype
的其他属性,hasOwnProperty
有 enumerable:false
标志。并且 for..in
只会列出可枚举的属性。这就是为什么它和其余的 Object.prototype
属性都未被列出。
总结
- 在 JavaScript 中,所有的对象都有一个隐藏的
[[Prototype]]
属性,它要么是另一个对象,要么就是null
。 - 我们可以使用
obj.__proto__
访问它(历史遗留下来的 getter/setter,这儿还有其他方法,很快我们就会讲到)。 - 通过
[[Prototype]]
引用的对象被称为“原型”。 - 如果我们想要读取
obj
的一个属性或者调用一个方法,并且它不存在,那么 JavaScript 就会尝试在原型中查找它。 - 写/删除操作直接在对象上进行,它们不使用原型(假设它是数据属性,不是 setter)。
- 如果我们调用
obj.method()
,而且method
是从原型中获取的,this
仍然会引用obj
。因此,方法始终与当前对象一起使用,即使方法是继承的。 for..in
循环在其自身和继承的属性上进行迭代。所有其他的键/值获取方法仅对对象本身起作用。
F.prototype
我们还记得,可以使用诸如 new F()
这样的构造函数来创建一个新对象。
如果 F.prototype
是一个对象,那么 new
操作符会使用它为新对象设置 [[Prototype]]
。
请注意,这里的 F.prototype
指的是 F
的一个名为 "prototype"
的常规属性。这听起来与“原型”这个术语很类似,但这里我们实际上指的是具有该名字的常规属性。
let animal = {
eats: true
};
function Rabbit(name) {
this.name = name;
}
Rabbit.prototype = animal;
let rabbit = new Rabbit("White Rabbit"); // rabbit.__proto__ == animal
alert( rabbit.eats ); // true
设置 Rabbit.prototype = animal
的字面意思是:“当创建了一个 new Rabbit
时,把它的 [[Prototype]]
赋值为 animal
”。
![image-20210924231816754](https://gitee.com/zyxbj/image-warehouse/raw/master/pics/202109242318791.png)
在上图中,"prototype"
是一个水平箭头,表示一个常规属性,[[Prototype]]
是垂直的,表示 rabbit
继承自 animal
。
F.prototype
仅用在new F
时
F.prototype
属性仅在new F
被调用时使用,它为新对象的[[Prototype]]
赋值。如果在创建之后,
F.prototype
属性有了变化(F.prototype = <another object>
),那么通过new F
创建的新对象也将随之拥有新的对象作为[[Prototype]]
,但已经存在的对象将保持旧有的值。
默认的 F.prototype,构造器属性
每个函数都有 "prototype"
属性,即使我们没有提供它。
默认的 "prototype"
是一个只有属性 constructor
的对象,属性 constructor
指向函数自身。
function Rabbit() {}
/* default prototype
Rabbit.prototype = { constructor: Rabbit };
*/
function Rabbit() {}
// by default:
// Rabbit.prototype = { constructor: Rabbit }
alert( Rabbit.prototype.constructor == Rabbit ); // true
通常,如果我们什么都不做,constructor
属性可以通过 [[Prototype]]
给所有 rabbits 使用:
function Rabbit() {}
// by default:
// Rabbit.prototype = { constructor: Rabbit }
console.log(Rabbit.prototype.constructor=== Rabbit); //true
let rabbit = new Rabbit(); // inherits from {constructor: Rabbit}
console.log(rabbit.__proto__.constructor === Rabbit); //true
console.log(rabbit.constructor === Rabbit); // true
我们可以使用 constructor
属性来创建一个新对象,该对象使用与现有对象相同的构造器。
function Rabbit(name) {
this.name = name;
alert(name);
}
let rabbit = new Rabbit("White Rabbit");
let rabbit2 = new rabbit.constructor("Black Rabbit");
当我们有一个对象,但不知道它使用了哪个构造器(例如它来自第三方库),并且我们需要创建另一个类似的对象时,用这种方法就很方便。
……JavaScript 自身并不能确保正确的 "constructor"
函数值。
是的,它存在于函数的默认 "prototype"
中,但仅此而已。之后会发生什么 —— 完全取决于我们。
特别是,如果我们将整个默认 prototype 替换掉,"constructor"
就不会是原来的了。
function Rabbit() {}
Rabbit.prototype = {
jumps: true
};
let rabbit = new Rabbit();
alert(rabbit.constructor === Rabbit); // false
因此,为了确保正确的 "constructor"
,我们可以选择添加/删除属性到默认 "prototype"
,而不是将其整个覆盖:
function Rabbit() {}
// 不要将 Rabbit.prototype 整个覆盖
// 可以向其中添加内容
Rabbit.prototype.jumps = true
// 默认的 Rabbit.prototype.constructor 被保留了下来
或者,也可以手动重新创建 constructor
属性:
Rabbit.prototype = {
jumps: true,
constructor: Rabbit
};
// 这样的 constructor 也是正确的,因为我们手动添加了它
总结
一切都很简单,只需要记住几条重点就可以清晰地掌握了:
F.prototype
属性(不要把它与[[Prototype]]
弄混了)在new F
被调用时为新对象的[[Prototype]]
赋值。F.prototype
的值要么是一个对象,要么就是null
:其他值都不起作用。"prototype"
属性仅在设置了一个构造函数(constructor function),并通过new
调用时,才具有这种特殊的影响。
在常规对象上,prototype
没什么特别的:
let user = {
name: "John",
prototype: "Bla-bla" // 这里只是普通的属性
};
默认情况下,所有函数都有 F.prototype = {constructor:F}
,所以我们可以通过访问它的 "constructor"
属性来获取一个对象的构造器。
原生的原型
"prototype"
属性在 JavaScript 自身的核心部分中被广泛地应用。所有的内置构造函数都用到了它。
Object.prototype
假如我们输出一个空对象:
let obj = {};
alert( obj ); // "[object Object]" ?
生成字符串 "[object Object]"
的代码在哪里?那就是一个内建的 toString
方法,但是它在哪里呢?obj
是空的!
……然而简短的表达式 obj = {}
和 obj = new Object()
是一个意思,其中 Object
就是一个内建的对象构造函数,其自身的 prototype
指向一个带有 toString
和其他方法的一个巨大的对象。
当 new Object()
被调用(或一个字面量对象 {...}
被创建),按照前面章节中我们学习过的规则,这个对象的 [[Prototype]]
属性被设置为 Object.prototype
:
所以,之后当 obj.toString()
被调用时,这个方法是从 Object.prototype
中获取的。
let obj = {};
alert(obj.__proto__ === Object.prototype); // true
alert(obj.toString === obj.__proto__.toString); //true
alert(obj.toString === Object.prototype.toString); //true
请注意在 Object.prototype
上方的链中没有更多的 [[Prototype]]
:
alert(Object.prototype.__proto__); // null
其他内建原型
其他内建对象,像 Array
、Date
、Function
及其他,都在 prototype 上挂载了方法。
例如,当我们创建一个数组 [1, 2, 3]
,在内部会默认使用 new Array()
构造器。因此 Array.prototype
变成了这个数组的 prototype,并为这个数组提供数组的操作方法。这样内存的存储效率是很高的。
按照规范,所有的内建原型顶端都是 Object.prototype
。这就是为什么有人说“一切都从对象继承而来”。
let arr = [1,2,3]; // 在内部会默认使用 new Array() 构造器
// 它继承自 Array.prototype?
console.log(arr.__proto__ === Array.prototype); //true
// new Array() 新建一个数组对象时,该对象自动就有了[[prototype]]内置属性 可以用.__proto__ 来访问[[prototype]]
// 与此同时 Array()就想所有函数一样都有 `"prototype"` 属性,即使我们没有提供它。
// 接下来继承自 Object.prototype?
console.log(arr.__proto__.__proto__ === Object.prototype); //true
// or
console.log(arr.__proto__.__proto__ === Array.prototype.__proto__); //true
// 原型链的顶端为 null。
console.log(arr.__proto__.__proto__.__proto__); //null
一些方法在原型上可能会发生重叠,例如,Array.prototype
有自己的 toString
方法来列举出来数组的所有元素并用逗号分隔每一个元素。
let arr = [1, 2, 3]
alert(arr); // 1,2,3 <-- Array.prototype.toString 的结果
正如我们之前看到的那样,Object.prototype
也有 toString
方法,但是 Array.prototype
在原型链上更近,所以数组对象原型上的方法会被使用。
![image-20210924231920218](https://gitee.com/zyxbj/image-warehouse/raw/master/pics/202109242319258.png)
基本数据类型
最复杂的事情发生在字符串、数字和布尔值上。
正如我们记忆中的那样,它们并不是对象。但是如果我们试图访问它们的属性,那么临时包装器对象将会通过内建的构造器 String
、Number
和 Boolean
被创建。它们提供给我们操作字符串、数字和布尔值的方法然后消失。
这些对象对我们来说是无形地创建出来的。大多数引擎都会对其进行优化,但是规范中描述的就是通过这种方式。这些对象的方法也驻留在它们的 prototype 中,可以通过 String.prototype
、Number.prototype
和 Boolean.prototype
进行获取。
特殊值
null
和undefined
比较特殊。它们没有对象包装器,所以它们没有方法和属性。并且它们也没有相应的原型。
更改原生原型
原生的原型是可以被修改的。例如,我们向 String.prototype
中添加一个方法,这个方法将对所有的字符串都是可用的:
String.prototype.show = function() {
alert(this);
};
"BOOM!".show(); // BOOM!
在开发的过程中,我们可能会想要一些新的内建方法,并且想把它们添加到原生原型中。但这通常是一个很不好的想法。
原型是全局的,所以很容易造成冲突。如果有两个库都添加了
String.prototype.show
方法,那么其中的一个方法将被另一个覆盖。所以,通常来说,修改原生原型被认为是一个很不好的想法。
在现代编程中,只有一种情况下允许修改原生原型。那就是 polyfilling。
Polyfilling 是一个术语,表示某个方法在 JavaScript 规范中已存在,但是特定的 JavaScript 引擎尚不支持该方法,那么我们可以通过手动实现它,并用以填充内建原型。
从原型中借用
那是指我们从一个对象获取一个方法,并将其复制到另一个对象。
一些原生原型的方法通常会被借用。
例如,如果我们要创建类数组对象,则可能需要向其中复制一些 Array
方法。
let obj = {
0: "Hello",
1: "world!",
length: 2,
};
obj.join = Array.prototype.join;
alert( obj.join(',') ); // Hello,world!
上面这段代码有效,是因为内建的方法 join
的内部算法只关心正确的索引和 length
属性。它不会检查这个对象是否是真正的数组。许多内建方法就是这样。
另一种方式是通过将 obj.__proto__
设置为 Array.prototype
,这样 Array
中的所有方法都自动地可以在 obj
中使用了
总结
- 所有的内建对象都遵循相同的模式(pattern):
- 方法都存储在 prototype 中(
Array.prototype
、Object.prototype
、Date.prototype
等)。 - 对象本身只存储数据(数组元素、对象属性、日期)。
- 方法都存储在 prototype 中(
- 原始数据类型也将方法存储在包装器对象的 prototype 中:
Number.prototype
、String.prototype
和Boolean.prototype
。只有undefined
和null
没有包装器对象。 - 内建原型可以被修改或被用新的方法填充。但是不建议更改它们。唯一允许的情况可能是,当我们添加一个还没有被 JavaScript 引擎支持,但已经被加入 JavaScript 规范的新标准时,才可能允许这样做。
原型方法
__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); //let rabbit ={}; rabbit.__proto__ = 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
循环中的属性更强大的对象克隆方式:
let clone = Object.create(Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj
此调用可以对 obj
进行真正准确地拷贝,包括所有的属性:可枚举和不可枚举的,数据属性和 setters/getters —— 包括所有内容,并带有正确的 [[Prototype]]
。
总结
设置和直接访问原型的现代方法有:
- [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
。
键组成的数组。
- Object.getOwnPropertyNames(obj) —— 返回一个由自身所有的字符串键组成的数组。
- Reflect.ownKeys(obj) —— 返回一个由自身所有键组成的数组。
- obj.hasOwnProperty(key):如果
obj
拥有名为key
的自身的属性(非继承而来的),则返回true
。
所有返回对象属性的方法(如 Object.keys
及其他)—— 都返回“自身”的属性。如果我们想继承它们,我们可以使用 for...in
。