JavaScript原型与原型链学习笔记

1.什么是原型?
原型是1个目标,别的对象能够通过它完结属性持续。
简言之的说便是任何二个目的都得以变成原型

prototype属性:
大家创立的每种函数都有1个prototype属性,那些天性是二个指针,指向2个目的,而以此目的涵盖能够有特定类型的具有实例共享的品质和办法。这么些目的便是原型对象(也正是有些对象的原型所引述的对象)。
一.同理可得只要创立了函数,该函数都有3个prototype属性,指向函数的原型对象。

图片 1

如上海教室,Person是2个函数,左侧的肆方正是它的原型。

 

2.私下认可情状下具有原型对象都会自行获取一个constructor(构造函数)属性,那一个本性包罗三个针对prototype属性所在函数的指针。

简短来说prototype的属性值是3个对象(属性的晤面,我们得以给他设置各个值),默许的唯有3个称为constructor的性质,指向这么些函数本人。

上边正是贰个原型对象的例子:

 1 function Person() {   
 2             
 3         }
 4         Person.prototype.name="花花";
 5         Person.prototype.sex="女";
 6         Person.prototype.showName=function(){
 7                 console.log('我的名字叫:'+this.name+'我是:'+this.sex+'的');
 8             }
 9      
10         var p1=new Person(); 
11          
12         p1.showName();

      图片 2

      

所以在这么些例子里:原型对象Person.prototype的constructor属性指向Person。

3.原型对象的在那之中还包涵2个指南针__proto__指向构造函数的原型对象。每种对象都有一个__proto__属性。
小心:Object.prototype是一个特例——它的__proto__针对的是null

这个__proto__是三个隐身的质量,在FF,Safari和Ghrome支持。

如上边的例证,Person是2个函数,p1对象是从Person函数new出来的,那样p一对象就足以调用Person.prototype中的属性。因为种种对象都有1个藏身的个性——“__proto__”,那么些特性引用了创办这一个目的的函数的prototype。即:p一.__proto__
=== Person.prototype
下边在上边的事例中增加下边代码来证澳优下:

1 console.log(p1.__proto__ === Person.prototype);//ture

图片 3

结果为true评释他们是格外的

归纳分析一下:构造函数Person有3个prototype的性质对象(即:Person.prototype),在那之中prototype属性对象中会包蕴__proto__,constructor(构造函数)指向构造函数,还有局部丰裕的习性。成立构造函数的实例对象p一,p壹会有__proto__性情,指向其原型Person.prototype。

探望下边包车型大巴图捋壹捋

图片 4

那正是说难题来了,以前大家说每种对象都有三个__proto__天性,函数也是1种对象,那么函数自然也有__proto__了,函数也是被创设出来的。哪个人创设了函数呢?那就是——Function——注意那几个大写的“F”。

以身作则代码如下:

1 function fn1(a,b) {   
2             return a+b;
3     }
4     console.log(fn1(2,6));
5 
6     var fn2=new Function("a","b","return a+b")
7     console.log(fn2(6,6));

如上代码中,第2种方法是比较古板的函数成立格局,第3种是用new Functoin成立。注意:不引进用第二种办法

 

概括:第一个例子中的构造函数Person也是一个目的,所以它也设有__proto__品质,指向它的原型Function.prototype。

图片 5

(依照那些图用上面包车型大巴形式可机关验证)

Function.prototype指向的靶子也是2个普普通通的被Object成立的对象,所以Function.prototype指向的目的,它的__proto__也指向Object.prototype

 

      验证一下:    

1 console.log(Function.prototype.__proto__);//结果是Object {}

      判定原型的不2诀窍有下边三种:

1         console.log(Object.getPrototypeOf(Person));
2         console.log(Object.__proto__);//函数原型对象
3         console.log(Person.constructor.prototype);

Object.getPrototypeOf()方法是ECMAScript5新加的,主流浏览才能够用。

小结一下:每一种函数都有三个prototype,即原型(指向函数的原型对象)。每一个对象都有三个__proto__品质(指向构造函数的原型对象),可成为隐式原型。
那么原型便是构造函数的实例对象的__proto__质量指向的构造函数的原型对象。

 

二.原型链

原型链:访问三个目标的特性时,先在宗旨特性中找找,假若没有,再顺着__proto__这条链向上找,这正是原型链

上边是一个原型链的例子:

 1 function Person(name,sex) {   
 2             this.name=name;
 3             this.sex=sex;
 4         }
 5         
 6         Person.prototype.show=function(){
 7                 console.log('我的名字叫:'+this.name+'我是:'+this.sex+'的');
 8             }
 9         Person.prototype.showName=function(){
10                 console.log('名字:'+this.name);
11             }
12               
13         function Worker(name,sex,job){
14             Person.call(this,name,sex);//继承Person属性
15             this.job=job;
16         }

17         Worker.prototype=Person.prototype;//这是原型链(通往父级的一条链上传递)
18         Worker.prototype.showJob=function(){//子级添加新方法
19             console.log(this.job);
20         }

21         Worker.prototype.show=function(){
22                 console.log('名字:'+this.name+'性别:'+this.sex+'工作:'+this.job);
23             }

24         var p2=new Worker('mumu','女','student'); 
25         p2.showName();
26         p2.show();

图片 6

分析下例子:创制Person函数,并在Person的原型对象上创办show和showName函数

开创Worker函数,Worker原型对象承继Person的原型对象 Worker.prototype =
Person.prototype;并在Worker原型对象上覆盖Person的原型对象上的show

函数。

那正是说,创立Worker的实例对象p二,在调用函数showName()时会在实例本人举行搜寻,若未有找到,再顺着__proto__那条链查找上超级原型对象,1层1层提升找(原型链顶端Object.prototype),直到找到甘休。

一旦当找到__proto__质量为null时,重临 undefined,评释不存在此形式或质量。那样1层一层查找实例上的原型上的属性就重组一条原型链。

图片 7

 

好了就到那里了,有不规则的地点请指正~~~~