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

江拥羡橙

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

4770

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

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

介绍

本期介绍原型、原型链和 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'))

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

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

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2022-11-21，如有侵权请联系 cloudcommunity@tencent.com 删除

面向对象编程