526互联

通俗易懂的js原型链

发布时间 2023-11-27 11:52:10作者: 叶静逍

原型链是js基础比较重要的一个环节；

  1. 提到原型链有三个比较重要的概念： 实例 构造函数 以及 原型对象，其中三者的关系：
    image
    构造函数 new =》 创建一个实例；
    构造函数 prototype =》原型对象；
    同时 原型对象 constructor =》 构造函数；
    实例 __proto__ => 原型对象；

  2. new 运算符是如何工作的

    1. 先创建一个空对象；
    2. 将构造函数内部的this指向这个新建的空对象，让其继承构造函数内部属性和方法
    3. 将构造函数原型对象指向这个空对象的，继而实现其继承构造函数原型上的属性和方法

  3. instanceof 原理和 js手写一个instanceof的方法
    instanceof原理：判断一个构造函数的实例的__proto__ 方法 和 构造函数的prototype 是不是指向相同的原型对象
    image
    这也就暴露了instanceof 一个缺点 因为原型链顶层是Object 直到 null
    所以image

    js如何实现类似于instanceof的方法？

    function _instanceof(_instance, _func) {
	let left = _instance.__proto__
	let right =  _func.prototype
	while (true) {
		if (left === null) return false
		if (left === right) return true
		left = left.__proto__
	}
}