理解JavaScript原型继承

March 31, 2022

参见：https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

原型

JavaScript 原型的实质就是将一个新对象的 [[prototype]] 指向为另一个已知对象
获取一个对象的属性时，先在对象自身上查找，再逐级向其 [[prototype]] （原型链）上查找，
直至找到或者未找到（抵达原型链的根：null）而返回 undefined

每个 JavaScript 对象都有一个特殊的属性（属性： a.k.a property，该属性在 Javascript 引擎内部表示为 [[Prototype]]），这个属性指向该对象的原型对象
可以通过这个对象（原型上的）的 __proto__ 属性获取（非标准）获得该原型对象
获取原型的标准方法为 Object.getPrototypeOf()（该函数传入一个对象，返回这个对象的原型对象）

注意：__proto__ 是从 Object.prototype 上继承的属性（实际上是一个 getter 和 setter）。所以该属性可以被覆写（a.k.a. override）
而 Object.getPrototypeOf() 必然能获取到一个对象的 [[Prototype]]

// 例如：
Object.getPrototypeOf(Object.create(null)); // => null （[[Prototype]] 为 null）
Object.create(null).__proto__; // => undefined （不存在 __proto__ 这个属性）

const obj = {};
console.log(obj.__proto__);
console.assert(Object.getPrototypeOf(obj) === obj.__proto__);

直接（手动）设置原型

创建对象后再设置原型

const obj = {}; // 这里假设obj是任意对象
const proto = { fallback: "fallback" }; // 这里假设proto是要设置的原型对象

// 1.非标准
obj.__proto__ = proto;
// 2.标准
Object.setPrototypeOf(obj, proto);

// 测试
console.log(obj.fallback); // => "fallback"

在创建对象的同时设置原型

// 1.不应该这样（**注意**：这种方法也是可以正确建立原型链的，即有：`Object.getPrototypeOf(obj) === proto`）
const obj = { __proto__: proto };
// 2.应该
const obj = Object.create(proto);

虽然 js 引擎支持从对象的 __proto__ 属性访问其原型，但该 __proto__ 属性默认情况下是在 Object.prototype 对象上，
不应在对象自身上设置 __proto__ 属性

通过构造函数自动设置原型（通过 new 操作符）

下面通过两种方式声明一个构造函数
注意：这两种方式几乎是等效的（只不过类是 ES6 引入的，因此会更加严格），下面不加以区分

换句话说：构造函数就是类

// 1.ES5
function Cls(a) {
    this.a = a;
}
Cls.prototype.fallback = "fallback";

// 2.ES6
class Cls {
    constructor(a) {
        this.a = a;
    }
    fallback = "fallback";
}

// 测试
const instance = new Cls("a");
console.log(instance.a); // => "a"
console.log(instance.fallback); // => "fallback"
// 函数的 prototype 属性指向一个特殊的对象
console.assert(Cls.prototype.constructor === Cls);

通过构造函数创建的对象，其原型对象就是构造函数的 prototype 属性所指向的那个对象

console.assert(instance.__proto__ === Cls.prototype);

通过构造函数创建的对象，它的原型对象上存在 constructor 属性，指向其构造函数
这就与手动创建对象再设置其原型不同，因为其原型对象上存在指向构造函数的 constructor 属性

console.assert(instance.constructor === Cls);
console.assert(instance.__proto__.constructor === instance.constructor);

普通函数

Javascript 函数继承自 Function，函数是对象，自身具有 prototype 属性（自动生成），指向一个特殊的对象（自动生成）
（上面提到，如果函数被用作构造函数，那么该构造函数的 prototype 属性就是其实例的原型）

const func = function () {}; // func 是 Function 的实例对象
console.assert(func.constructor === Function);
console.assert(func.__proto__ === Function.prototype);
Object.getOwnPropertyNames(func); // => ['length', 'name', 'arguments', 'caller', 'prototype']
func.prototype; // => {constructor: ƒ}  函数的 prototype 属性是 Object 实例，由 JavaScript 引擎自动生成
console.assert(func.prototype.constructor === func); // 函数的 prototype 属性指向的对象，具有 constructor 属性，指向函数自身

注意：箭头函数也继承自 Function，但其自身只存在 length 和 name 属性
（没有 prototype 属性，因此不能作构造函数使用）

const af = () => {};
console.assert(af.constructor === Function);
console.assert(af.__proto__ === Function.prototype);
Object.getOwnPropertyNames(af); // => [ 'length', 'name' ]

new 操作符做了什么

new 操作符要求其后面是一个构造函数，否则抛出 TypeError 异常（任何一个函数都可以是构造函数，只不过一般命名时首字母大写）
参见：https://tc39.es/ecma262/#sec-evaluatenew

function Cls(a) {
    this.a = a;
}
Cls.prototype.fallback = "fallback";

const instance = {};
Cls.call(instance, a); // a 是构造函数的参数
Object.setPrototypeOf(instance, Cls.prototype); // 设置原型对象

构造函数（任意函数）具有 [[Construct]] 内部方法，构造函数实例化对象就是调用了此方法
参见： https://tc39.es/ecma262/#sec-ecmascript-function-objects-construct-argumentslist-newtarget

继承

继承的实质就是将 子构造函数的 prototype 属性 的原型设置为 父构造函数的 prototype 属性

Object.setPrototypeOf(SubClass.prototype, ParentClass.prototype);

继承是发生在构造函数之间，而不是实例对象之间。因此我们只会说子类继承父类，而不是实例对象去继承别的实例对象。
注意这之间的区别：因为构造函数也是对象，但在这里不将其称为实例对象，而称为类。

extends
(本图来自https://zh.javascript.info/class-inheritance)

有关原型的重要函数

这里不讨论 Symbol

Object.getPrototypeOf(obj)

返回指定对象的原型（内部 [[Prototype]] 属性的值）。如果没有继承属性，则返回 null

Object.getOwnPropertyNames(obj)

返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括 Symbol 值作为名称的属性）组成的数组。

const func = function () {};
console.log(Object.getOwnPropertyNames(func)); // => ['length', 'name', 'arguments', 'caller', 'prototype']

Object.prototype.hasOwnProperty(prop)

这是一个原型方法，在对象自身上调用时，指示对象自身属性中是否具有指定的属性

const obj = {};
obj.hasOwnProperty("toString"); // => false

顺便提一句，in 操作符会在原型链上检查

Object.hasOwn(instance, prop)

这是一个较新的函数，目前 chrome>=93 才支持
hasOwnProperty 方法是一个原型方法，只有继承了 Object 的对象才有此原型方法，而且这个方法可以被覆盖
但 Object.hasOwn() 是一个静态方法，适用于任何对象

const obj = {};
Object.hasOwn(obj, "toString"); // => false

const alone = Object.create(null);
alone.hasOwnProperty("toString"); // => Uncaught TypeError: alone.hasOwnProperty is not a function
Object.hasOwn(alone, "toString"); // => false

// polyfill
const hasOwn = (instance, prop) => Object.prototype.hasOwnProperty.call(instance, prop);

instanceof

lhs instanceof rhs
检查 lhs 是否继承 rhs
即：lhs 的原型链上是否有等于 rhs.prototype 的对象
换言之，lhs 的原型链上是否有构造函数是 rhs 的对象

模拟一个 instanceof

// 递归
const instanceOf1 = (obj, func) => {
    if (!(obj && ["object", "function"].includes(typeof obj))) return false;
    let proto = Object.getPrototypeOf(obj);
    if (proto === func.prototype) return true;
    if (proto === null) return false;
    return instanceOf1(proto, func);
};
// 迭代
const instanceOf2 = (obj, func) => {
    if (!(obj && ["object", "function"].includes(typeof obj))) return false;
    let proto = obj;
    while ((proto = Object.getPrototypeOf(proto))) {
        // if (proto === null) return false;
        if (proto === func.prototype) return true;
    }
    return false;
};

悖论

// Object 是一个构造函数，所以继承 Function
console.assert(Object instanceof Function);
// Function 是一个对象，继承 Object
console.assert(Function instanceof Object);

实际上 Function.__proto__ 指向 Function.prototype，而不是 Object.prototype
并且有 Function.__proto__ === Function.prototype === Object.__proto__

console.assert(Function.prototype === Function.__proto__);
console.assert(Function.prototype === Object.__proto__);

Object.prototype.__proto__ 为 null

下面制作的图片为了准确，使用 [[prototype]] 而不是 __proto__

关于 Object.create()

Object.create() 方法创建的对象，将给定对象作为新创建对象的 [[Prototype]]

const provider = { a: 123 };
const created = Object.create(provider);
console.log(created.a); // => 123
console.assert(created.__proto__ === provider);
console.assert(created.constructor === Object);

const provider2 = Object.create(null);
provider2.a = 456;
const created2 = Object.create(provider2);
console.log(created.a); // => 456
console.log(created2.__proto__); // => undefined
console.assert(Object.getPrototypeOf(created2) === provider2);
console.log(created2.constructor); // => undefined

结合上面的图片发现，对象字面量 {} 等效于 new Object() 构造，因此其 __proto__ 属性指向 Object.prototype
get __proto__: ƒ __proto__()和 set __proto__: ƒ __proto__() 正是通过继承 Object.prototype 得到的
Object.create(null) 当然没有继承 Object.prototype，所以也就没有 __proto__ 属性

额外提一句，Object.create(o: any, properties?: PropertyDescriptorMap) 的第二个参数相当于 Object.defineProperties<T>(o: T, properties: PropertyDescriptorMap): T

总结

一般来说，一个对象

原型链上具有 __proto__ 属性，指向其构造函数的 prototype 属性
原型链上具有 constructor 属性，指向其构造函数
obj.__proto__ === obj.constructor.prototype

函数作为特殊的对象

自身具有 prototype 属性，new 操作符会将被创建的对象的 [[Prototype]] 指向函数的 prototype 属性
func.prototype.constructor === func

←Back to home