陈公子的话 发表于 2021-2-25 18:54:44

JS原型链

本帖最后由 小陈 于 2021-2-25 18:56 编辑

# js原型链

首先我们要知道任何对象都有一个__proto__属性
任何的方法都有prototype属性，prototype也是一个对象，也是有__proto__属性的


!(data/attachment/forum/202102/25/182004fgszwxglrlw9niyi.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300 "image.png")

定义一个函数fn，调试出它的prototype属性，可以看到结果中有constructor和__proto__。

constructor指向函数自己。同时可以看见prototype中也有__proto__。

# JS创建对象


第一种是通过构造函数创建对象

var obj=new Object();


第二种是object.create创建对象

```
var obj1={};
var obj2= Object.create(obj1);

```


第三种花括号创建

var obj={};


所有的对象中都有__proto__属性，这个属性就是一个指针，指向构造函数中的prototype属性。

!(data/attachment/forum/202102/25/183008yn3xx3mxnh3bmrmb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300 "image.png")


所有对象的__proto__指向创建它们的构造函数的prototype


!(data/attachment/forum/202102/25/184526di4wz7mwjbpwhz7w.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300 "image.png")



我们验证一下。


!(data/attachment/forum/202102/25/184637zhfhdzf1p8cx2hcp.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300 "image.png")



!(data/attachment/forum/202102/25/185157ftz5moutrm87opzq.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300 "image.png")


# 总结

1函数对象有__proto__和prototype属性
2非函数对象只有__proto__属性
3prototype中有__proto__属性。且是Object构造函数创建的
4函数对象__proto__指向它的创建者及Function构造函数
5Function构造函数__proto__指向它自己
6Object对象的prototype中的__proto__是null

陈公子的话 发表于 2021-2-25 19:55:34

首先知道javascript所有对象都是object实例，并且继承Object.prototype的属性和方法

当我们定义函数a的时候，会自动生成一个prototype对象，那prototype对象，它是对象他就有__proto__属性，那函数a.prototype.__proto__其实就是Object.prototype

当我们定义一个对象b的时候，会自动生成__proto__属性，那么b.__proto__其实就是构造函数B.prototype   再延伸一下B.prototype.__proto__又回到我们说的Object.prototype

原型链是什么呢   

对象都有toString这个方法，就像上面说的实例化对象b，b本身没有tostring这个方法，然后通过__proto__方法向上延伸，b.__proto__其实就是B.prototype，构造函数B也没tostring这个方法，继续通过__proto__向上找，B.prototype.__proto__也就是Object.prototype有tostring这个方法 ，实例化对象b才继承了这个方法

这个过程中Object.prototype = b.__proto__.__proto__

李恒道 发表于 2021-2-26 00:24:28

考试题:
function CreateObj(){
this.a=888;
}
var a=new CreateObj
a.__proto__===?
CreateObj.prototype.__proto__===?
CreateObj.__proto__===?
Function.__proto__===?

陈公子的话 发表于 2021-2-26 15:20:18

a.__proto__ ===CreatObj.prototype
CreateObj.prototype.__proto__=== Object.prototype
CreateObj.__proto__=== CreateObj.constructor.prototype
Function.__proto__===Function.prototype

陈公子的话 发表于 2021-2-26 15:28:20

CreateObj.__proto__=== CreateObj.constructor.prototype===Function.__proto__===Function.prototype

陈公子的话 发表于 2021-2-26 15:33:59

a.__proto__ ===a.constructor.prototype===CreatObj.prototype

李恒道 发表于 2021-2-26 18:44:15

小陈 发表于 2021-2-26 15:33
a.__proto__ ===a.constructor.prototype===CreatObj.prototype

ggnb！
页: [1]
查看完整版本: JS原型链