看了10篇文章，我写下了这篇有关原型和原型链的笔记

坚信我们的确见过上面这两个单字,但有时又是心急分不清,不晓得这两个单字究竟是做啥的,又G540差别.那时他们就来回去的死翘翘,探究探究它.它依次是 prototyoe, __proto__, constructor.

prototype

在JavaScript中,每三个第一类(除null)在创建的这时候单厢与之关连另三个第一类,这另三个第一类是他们所言的蓝本,每三个第一类单厢从蓝本”承继”特性.这儿的承继并并非真承继.即使承继意味著拷贝操作形式,不过JavaScript预设并不能拷贝第一类的特性.这儿而已在三个第一类间创建三个关连.这种,三个第一类就能透过委派出访另三个第一类的形式或特性.大部份表达式都有prototype特性,称作蓝本特性(也叫隐式蓝本),而一般第一类是没prototype的. 尽管表达式也是第一类,但他们这儿的一般第一类或许是不包涵表达式的.

console.log(({}).prototype)// undefined console.log((function(){}).prototype) // {constructor: ƒ}

只不过,那个prototype特性对准三个第一类,那个第一类是初始化该内部结构表达式而创建的示例的蓝本,当中包涵了许多特性和形式,而那些特性和形式能让大部份的示例共享资源出访.

function Person(name){ this.name = name } Person.prototype.say =function(){ console.log(Hello World) } let p = new Person(zhangsan) let p2 = newPerson(lisi) console.log(p.say === p2.say) // true

Person是个表达式,透过内部结构初始化的形式聚合了p和p2三个第一类.而Person的蓝本第一类上又表述了三个say形式,从运转结论看,p和p2三个示例第一类都能初始化say形式输入Hello World,因此p.say === p2.say的结论为true也证明了它是共享资源出访. 上面他们来看关系图:

proto

在JavaScript中,大部份第一类(除null)单厢有三个内部特性__proto__(也叫隐式蓝本),该特性对准被内部结构初始化表达式的蓝本第一类

function Person(){} let p = new Person() console.log(p.__proto__ === Person.prototype)

由此,他们又能在关系图上面再添加点东西:从示例对准蓝本第一类

上面也说到了,大部份第一类(除null)都有__proto__,那么Person.__proto__又对准什么呢?他们在上面的代码后面添加如下

console.log(Person.__proto__ === Function.prototype) // true

这是即使表达式也是一种第一类,能认为Person表达式是初始化了内置内部结构表达式Function后聚合的示例,所以上面的结论为true 他们再来看上面代码

let num = new Number(1) console.log(num.__proto__ === Number.prototype) // true let str = new String(Hello) console.log(str.__proto__ ===String.prototype) // true let bool = new Boolean(true) console.log(bool.__proto__ === Boolean.prototype) // true let f = new Function() console.log(f.__proto__ === Function.prototype) // true console.log(Function.__proto__ ===Function.prototype) // true 那个我目前还不太清楚是为什么 QAQ

能得出三个结论:

let o = newF() o.__proto__ === F.prototype

或者:

o.__proto__ === o.constructor.prototype // 那个原因在后面的constructor中会提到

注意:

使用__proto__是有争议的,因此不鼓励使用它,现在更推荐使用

Object.getPrototypeOf/Reflect.getPrototypeOf.参考地址:MDN

constructor

预设情况下,每个蓝本第一类单厢自动获得三个constructor特性,对准其关连的内部结构表达式.

function Person(){} console.log(Person.prototype.constructor === Person) let p = new Person() console.log(Object.getPrototypeOf(p) === Person.prototype) // true

他们再来看上面代码

function Person(){} let p = new Person() console.log(p.constructor === Person) // true

示例p并没constructor特性,但它从蓝本Person.prototype中去读取,因此上面的输入结论为true.此时再回过头去看o.__proto__ === o.constructor.prototype是并非就明白为什么了.

由此,他们又能在关系图上面再添加点东西:从蓝本第一类指回被内部结构初始化的表达式

蓝本链

当出访三个第一类的形式或特性时,若找不到则会查找与该第一类关连的蓝本中的形式(特性),若还是找不到,则继续向上去蓝本的蓝本中查找,直到找到为止,就这种一直到最顶层.能理解__proto__一层一层的对准是蓝本链了.

function Person(){} Person.prototype.say =function(){ console.log(Hello World) } let p = new Person() console.log(p.__proto__ === Person.prototype)// true console.log(Person.prototype.__proto__ === Object.prototype) // true 即使大部份的第一类都是直接或间接承继自Object console.log(Object.prototype.__proto__) // null 即使Object作为最顶层第一类,是蓝本链的最后一环.所以这儿的null表示了Object.prototype没蓝本

他们在上面的代码后面继续添加如下代码:

Object.prototype.say = function(){ console.log(Hi Universe) } Object.prototype.shout =function(){ console.log(Hello Universe) } p.say() // Hello World p.shout() // Hello Universe

示例第一类p自身没say和shout形式,向蓝本查找,在Person蓝本第一类中找到了say,就不再继续向上查找,而shout形式不在Person蓝本第一类中,因此继续向上查找.最终在Object蓝本第一类中找到了shout,发出了Hello Universe的呐喊此时他们的关系图变成了如下: