介绍

本期介绍原型、原型链和 class。包括 class ，继承，原型，原型链，instanceof。原型是 “JS 三座大山” 之一，原型和原型链也是必考知识点。

主要内容

• 如何用 class 实现继承
• 如何理解 JS 原型（隐式原型和显示原型）
• instanceof 是基于原型链实现的
• JS 原型相关的面试题

关键字

• 原型
• 原型链
• instanceof
• class
• 继承

如何用 class 实现继承

//语法结构
class 首字母大写 {
 //构建
  constructor（参数1，参数2）{

  }
}

class

class的本质仍然是函数（其实是ES6的语法糖）

• constructor
• 属性
• 方法

继承

es6的继承本质上是原型链 + 盗用构造函数

• extends（继承）
• super（执行父类构造函数）
• 扩展或重写方法

• class是面向对象的一个语法的实现
• class相当于一个模板，可以通过这个模板去构建一些东西，用constructor构建器构建
• 可以用constructor去复制他的属性和方法

如何理解 JS 原型（隐式原型和显示原型）

1. JS原型

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

1. instanceof可以判断引用类型

比如Object是People的父类，People是Student的父类

1. class类具有定义的属性和方法，也有显示原型prototype，而将这个class类实例化就有了隐式原型_proto_，也就是 Shilihua._proto_ === Student.prototype

此原型图解可对照上面class 实现继承定义的类理解

instanceof 是基于原型链实现的

原型链:

• 每个构造函数都有 prototype（显式原型）
• 每个实例对象都有 proto / [[prototype]]（隐式原型）
• 实例对象的__proto__ (隐式原型) 指向构造函数的 prototype（显式原型）

执行规则：

• 获取实例对象的属性或方法时
• 先在自身属性和方法寻找
• 若找不到则自动通过原型链一层一层向上查找

此原型链图解可对照上面class 实现继承定义的类理解

class People {
    eat() {}
}
class Student extends People {
    sayHi() {}
}
const xialuo = new Student(name, number);

// 实例对象隐式原型指向构造函数显式原型
xiaoluo.__proto__ === Student.prototype // true 
Student.prototype.__proto__ === People.prototype // true
People.prototype.__proto__ === Object.prototype // true

// Object原型对象的隐式原型为null 所以null即原型链的顶端
Object.prototype.__proto__ === null // true

// 原型链
xiaoluo.__proto__ -> 
Student.prototype.__proto__ -> 
People.prototype.__proto__ -> 
Object_prototype.__proto__ ->
null

instanceof：

• 是基于原型链实现的
• 用于检测构造函数的显式原型是否出现在某个实例对象的原型链上

JS 原型相关的面试题

1. 如何判断一个变量是不是数组？

使用instanceof/Array.isArray方法

1. 手写jquery

class jQuery {
    constructor(selector) {
        const result = document.querySelectorAll(selector)
        const length = result.length
        for (let i = 0; i < length; i++) {
            this[i] = result[i]
        }
        this.length = length
        this.selector = selector
    }
    get(index) {
        return this[index]
    }
    each(fn) {
        for (let i = 0; i < this.length; i++) {
            const elem = this[i]
            fn(elem)
        }
    }
    on(type, fn) {
        return this.each(elem => {
            elem.addEventListener(type, fn, false)
        })
    }
    // 扩展很多 DOM API
}

// 插件
jQuery.prototype.dialog = function (info) {
    alert(info)
}

// “造轮子”
class myJQuery extends jQuery {
    constructor(selector) {
        super(selector)
    }
    // 扩展自己的方法
    addClass(className) {

    }
    style(data) {

    }
}

// const $p = new jQuery('p')
// $p.get(1)
// $p.each((elem) => console.log(elem.nodeName))
// $p.on('click', () => alert('clicked'))

插件机制就是用 prototype 来对原型进行补充加强

造轮子就是用 extends 继承，然后新建自己的新方法

下期介绍JS三座大山之2—作用域和闭包