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指向新对象