前端面试题-js部分-原型链

此文关于js原型和原型链的

参考资料：

https://juejin.im/post/5e6e000fe51d4526f071efea

原型链意义

// 首先先看完上面的参考资料，我们了解到
Object.__proto__ === Function.prototype // true
Function.prototype.__proto__ === Object.prototype // true
Object.prototype.__proto__ === null // true

// 类似于
// 构造函数
var a = function () {};
// new 一个构造函数
var A = new a();
/* a.prototype 是原型，A.__proto__ 是原型链，指向a.prototype原型，继续深究，a.prototype.__proto__指向
Object.prototype，再继续深究，Object.prototype.__proto__指向null，ok，底层了。差不多可以理解为构造
函数的原型链指向方法的原型，方法（此处的方法是基础类型之一的方法）的原型的原型链指向对象（此处
的对象是基础类型之一的对象）原型上的原型链，对象原型的原型链最终指向null。*/

以上是es5的原型以及原型链理解，其用处一般用于继承（通过构造函数+原型对象实现继承），到了es6，出现了class类，继承就简单了，直接通过class+extends即可。
类的本质其实是函数，是构造函数的另外一种写法：

class Person {
    // constructor 译为构造器，class中比如会有这个函数，所有属性都可定义在其中，方法定义同级
    constructor(name, sex) {
        this.name = name;
        this.type = 'human'
    }
    printName() {
        console.log(this.name)
    }
}

class Student extends Person {
    // extends 译为继承，此处继承了Person的方法和属性
    constructor(name, score, sex) {
        super(name); // 此处super代表Student继承Person的name属性
        this.score = score; // score是Student私有，Person不会拥有
        this.sex = sex;
    }
    printScore() {
        console.log(this.score)
    }
}

let stu = new Student('xiaohong', 100, 'nv');
let per = new Person('xiaozi', 'nan');
console.log(stu.printName === per.printName); // true， Student会继承父级的方法和属性，Student内的方法却是Student私有的
console.log(stu.sex === per.sex); // false，因为Student没有通过super继承父级的sex，所以两者的内存地址指向不一样
per.printScore(); // 报错，per.printScore不是一个函数
per.printScore; // undefined，未定义
console.log(stu.printScore === per.printScore);  // false
stu.type; // human

    // 这是原型链实现的继承
    // 子类的原型指向父类的实例，这样就可以顺着原型链共享父类的方法了。并且为子类添加原型方法的时候，不会影响父类。
    function Father(name) {
        this.name = name;
    }
    Father.prototype.dance = function () {
        console.log('I am dancing');
    };
    function Son(name, age) {
        Father.call(this, name);
        this.age = age;
    }
    Son.prototype = new Father();
    Son.prototype.sing = function () {
        console.log('I am singing');
    };
    let son = new Son('小红', 100);
    console.log(Father.prototype) //{dance: ƒ, constructor: ƒ}

综上，我们可以得到结论：
原型以及原型链主要用于函数的继承，为避免子级的方法污染到父级，需要通过new父级构造单独建立一个内存，后面出了class，原型链用的少了，而class+extends实现继承也确实简单明了。通过super继承的属性指向地址都一致，父级的方法都会被子级继承，子级的私有化属性和方法不会污染到父级。

扩展下class的规则

class A {
    constructor(){
        this.x = 1
    }
    send() {
        return console.log(this.x)
    }
}
class B extends A {
    constructor() {
        super();
        this.x = 2;
    }
    send2() {
        this.send()
    }
}
let b = new B();
b.send2(); // 2，因为this.send()走的父级的send方法，但是this.x以子级内容优先。
b.x = 3;
b.send2(); // 3

// class类添加方法：
Object.assign(A.prototype, {
    say() {console.log('hello')},
    y: 4
})
b.y; // 4
b.say(); // hello