js-proto

前言

记一下JS原型的知识

原型

假如有下面的代码

function Person(name = "sena", age = 16) {
    this.name = name;
    this.age = age;
}

let person = new Person();

原型的关系是这样的

原型链

通过 __proto__ 作为桥梁连接起来的一系列原型就是原型链

function Person(name = "sena", age = 16) {
    this.name = name;
    this.age = age;
}

let person = new Person();

console.log("person的原型", Reflect.getPrototypeOf(person));
console.log("object的原型", Reflect.getPrototypeOf({}))
console.log("object原型的原型",Reflect.getPrototypeOf(Reflect.getPrototypeOf({})));

输出结果是

继承

es6为我们提供了非常好的继承模式

class Person {
    constructor(name = "sena", age = 16) {
        this.name = name;
        this.age = age;
    }
}

class Worker extends Person {
    constructor(name = "sena", age = 16) {
        super(name, age);
    }
}
Worker.prototype.company = "Google"

let worker = new Worker();
let person = new Person();

console.log("worker的原型", Reflect.getPrototypeOf(worker));
console.log("worker原型的原型", Reflect.getPrototypeOf(Reflect.getPrototypeOf(worker)))
console.log("worker原型的原型和person的原型比较", Reflect.getPrototypeOf(Reflect.getPrototypeOf(worker)) === Reflect.getPrototypeOf(person));
console.log("person的原型", Reflect.getPrototypeOf(person));
console.log("object的原型", Reflect.getPrototypeOf({}))
console.log("object原型的原型",Reflect.getPrototypeOf(Reflect.getPrototypeOf({})));

我们可以从babel转化后的代码中看出这种继承是怎么实现的

"use strict";

function _inheritsLoose(subClass, superClass) {
    subClass.prototype = Object.create(superClass.prototype);
    subClass.prototype.constructor = subClass;
    _setPrototypeOf(subClass, superClass);
}

function _setPrototypeOf(o, p) {
    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
        o.__proto__ = p;
        return o;
    };
    return _setPrototypeOf(o, p);
}

var Person = function Person(name, age) {
    if (name === void 0) {
        name = "sena";
    }

    if (age === void 0) {
        age = 16;
    }

    this.name = name;
    this.age = age;
};

var Worker = function (_Person) {
    _inheritsLoose(Worker, _Person);

    function Worker(name, age) {
        if (name === void 0) {
            name = "sena";
        }

        if (age === void 0) {
            age = 16;
        }

        return _Person.call(this, name, age) || this;
    }

    return Worker;
}(Person);

Worker.prototype.company = "Google";
var worker = new Worker();
var person = new Person();

概括一下就是

创建一个父类型的对象temp，并且把对象的constructor属性设置成子类型的构造函数
把创建的父类型对象temp设置成子类型构造函数的prototype
把子类型构造函数的__proto__指向父类型

自己写一个inherit函数可以写成这样

function inherit(sub, sup) {
    sub.prototype = Object.create(sup.prototype);
    sub.prototype.constructor = sub;
    Object.setPrototypeOf(sub, sup);
}