javascript你必须要知道的—原型和原型链

江拥羡橙

修改于 2023-06-09 03:31:44

51700

代码可运行

文章被收录于专栏：前端二次元前端二次元

运行总次数：0

代码可运行

介绍

本期介绍原型、原型链和 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 原型（隐式原型和显示原型）

JS原型每个class都有显式原型 prototype 每个class实例化后都有隐式原型 proto 实例的隐式原型指向对应class的显式原型
instanceof可以判断引用类型比如Object是People的父类，People是Student的父类
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 原型相关的面试题

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

使用instanceof/Array.isArray方法

手写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'))