JS面试知识点6-原型链

参考文档
是的，面不面试，都需要知道的原型链。理解的记忆

前言：

JS本身就是一个基于原型链继承的语言。
class 的 extends 本质也是原型链继承

怎么理解原型？

总结内容：

• 引用数据类型都具有对象的特征
• 对象都有自由扩展属性的特征
• 对象都有__proto__属性，值为一个普通对象，指向其构造函数的prototype属性值
• 查找对象的属性时，先在自身查找，找不到则到它的隐式原型__proto__上查找（也就是它的构造函数的prototype上查找）

原型链
原型链就在查找属性时，不停向上查找对象的__proto__隐式原型而形成的，这样普通对象可以使用valueOf函数，因为Object上有ValueOf，Object的prototype在普通对象的__proto上。

继承

• 原型实现继承，在子类的构造函数中调用父类，并使用Parent.call(this,value)，在父类的原型上绑定属性和方法，既可以指定参数，也可以让子类继承到父类的属性和方法。

• ES6的class继承，使用extends继承父类的属性和方法。实际上也是原型的继承方法。

class也是原型的继承

定义class
// 父类
class People {
    constructor (old) {
        this.old = old
    }
    eat () {
        consoloe.log('eating')
    }
}
// 继承
class Student extends People {
    constructor(name, number，old) {
        super(old) // 变量传递给父类执行
        this.name = name
        this.number = number
    }
    sayHi () {
        console.log(this.name, this.number)
    }
}
const me = new Student('小明', 10, 20)  // 新建对象
console.log(me.name)   // => 小明
me.sayHi()             // => 小明 10

// class 实际上是函数，可见是语法糖
typeof People => 'function'
typeof Student => 'function'

// 隐式原型和显式原型
me.__proto__ // 隐式原型           => People
Student.prototype // 显式原型      => People
me.__proto === Student.prototype   => true 全等通过的话，就说明引用的是同一个地址

每个实例都有隐式原型__proto__
每个 class 都有显式原型 prototype
实例的隐式原型指向对应class的显式原型

相关知识点

instanceof

工作原理是：顺着__proto__隐式原型向上找；
语法：obj instanceof constructor；construction的prototype属性是否在实例对象的原型链上。

[] instanceof Array   // true
[] instanceof Object  // true`

{} instanceof Object  // true`

new一个函数会发生什么?

1. 创建一个空对象
2. 执行构造函数，并将构造函数的属性和方法给对象
3. 将构造函数的prototype属性值给空对象的__proto__属性
4. 构造函数中的this指向新对象

继承

    /* 创建对象 */
    function createCar(color, passengers, brand) {
      var car = new Object();
      car.color = color;
      car.passengers = color;
      car.brand = brand;
      car.outBrand = function () {
        console.log(this.brand)
      }
      return car;
    }

    /* 方法1: 构造函数和原型的：组合继承 
      优点是：构造函数可以传参；缺点：继承的时候调用了父类构造函数，并且子类原型上多了父类的属性*/
    // function Parent(value) {
    //   this.val = value;
    // }
    // Parent.prototype.getValue = function () {
    //   console.log(this.value);
    // }
    // function Child(value) {
    //   Parent.call(this, value); // 继承父类的属性
    // }
    // Child.prototype = new Parent();
    // const child = new Child(1);
    // console.log(child, child instanceof Child, child instanceof Parent);

    /* 方法2:寄生组合继承：优化掉调用了父类构造函数的缺点，使用Object.create重写子类构造函数 */
    function Parent(value) {
      this.val = value;
    };
    Parent.prototype.getValue = function () {
      console.log(this.val);
    };
    function Child(value) {
      Parent.call(this, value)
    };
    Child.prototype = Object.create(Parent.prototype, {
      constructor: {
        value: Child,
        enumerable: false,
        writeable: true,
        configurable: true,
      }
    });
    const child = new Child(1);
    child.getValue();
    console.log(child, child instanceof Parent);
    /* 方法3： class类extends继承 */
    // class Parent {
    //   constructor() {
    //     this.val = 1;
    //   }
    //   getValue() {
    //     console.log(this.val);
    //   }
    // }

    // class Child extends Parent {
    //   constructor(value) {
    //     super(value);
    //     this.val = value;
    //   };
    // };
    // let child = new Child(1);
    // console.log(child);
    // child.getValue();