搞清楚 prototype __proto__ new的关系-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43956427/article/details/123203200

本文详细解析了JavaScript中的new操作符的工作原理，包括如何创建对象、设置原型链以及构造函数的执行过程。通过示例展示了prototype属性如何用于实现对象间的属性和方法共享。同时，解释了__proto__属性在实例对象与构造函数原型之间的关系，并探讨了如何实现instanceof方法来检测对象的原型链。通过对这些概念的深入理解，读者可以更好地掌握JavaScript中的继承机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先看下new操作的步骤

1.生成一个对象
2.将构造函数的this执行新的对象
3.执行构造函数的代码
4.返回新对象

代码过程如下：

var obj = {}
obj.__proto__ = P.prototype
P.call(obj)

可见 new 操作和 __proto__ 及 prototype 产生了关系

prototype是什么？ 它是一个属性 它的值为一个对象 它用于存储对象的公共属性和方法
示例如下：
function P() { this.name = 'hello' }
var p1 = new P()
var p2 = new P()
p1.name = 'hi'
console.log(p2.name) // hello
上面实例化的对象p1 和 p2 是不相关的，它们处于不同的内存中 自然更改p1.name 影响不了 p2.name

但我们知道，在其他面向对象的语言中是有继承这个说法的，它可以用来共享一些属性和方法

那么JS为了共享一些属性和方法，就在构造函数里面引入了prototype属性，它的值是一个对象，保存着一些共享的属性和方法
示例如下：
P.prototype.sex = "man"
console.log(p1.sex) // man
console.log(p2.sex) // man
p1.sex = "woman"
console.log(p2.sex) // woman

上面的代码中，p1 是怎样拿到sex的呢？ 通过__proto__属性
当实例对象创建的时候，也就是new的时候，实例对象就会自动引用构造函数的prototype属性 即是 p1.__proto__ = P.prototype

console.log(p1.__proto__) // {sex: 'woman'}


搞清楚上面的关系，那么就可以尝试实现instanceof方法了
该方法用于检测构造函数的原型对象（prototype的值）是否在某个实例对象的原型链上（人话就是看下这个实例对象是不是构造函数new 出来的）

function my_instanceof(instance_obj, constructor) {
	var _prototype = constructor.prototype 
	var _proto = instance_obj,__proto__ 
	while(true) {
		if(_proto == null) return false
		if(_proto == _prototype) return true
		_proto = _proto.__proto__	
	}
}
console.log(my_instanceof(p1, P)) // true