JavaScript原型与原型链学习笔记

一.什么是原型?
原型是一个对象,其他对象足以由此她实现属性持续。
简的说哪怕是任何一个对象还好变成原型

prototype属性:
我们创建的每个函数都发一个prototype属性,这个特性是一个指南针,指向一个对象,而之目标涵盖可以出特定类型的兼具实例共享的性与章程。这个目标就是是原型对象(也就是是某对象的原型所引用的靶子)。
1.总归的若创造了函数,该函数都发一个prototype属性,指于函数的原型对象。

图片 1

如齐图,Person是一个函数,右侧的方就是她的原型。

 

2.默伏情况下拥有原型对象还见面自动获得一个constructor(构造函数)属性,这个特性包含一个对prototype属性所在函数的指针。

简言之的话prototype的属性值是一个靶(属性的集合,我们好吃他设置各种值),默认的独发生一个叫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.原型对象的内还连一个指南针__proto__对构造函数的原型对象。每个对象都有一个__proto__属性。
专注:Object.prototype是一个特例——它的__proto__对的是null

这个__proto__是一个潜藏的属性,在FF,Safari和Ghrome支持。

设上面的事例,Person是一个函数,p1对象是由Person函数new出来的,这样p1对象就是好调用Person.prototype中之属性。因为每个对象还出一个藏的性能——“__proto__”,这个特性引用了创造是目标的函数的prototype。即:p1.__proto__
=== Person.prototype
下在方的事例中补充加下面代码来验证一下:

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

图片 3

结果也true证明他们是等的

简言之解析一下:构造函数Person有一个prototype的特性对象(即:Person.prototype),其中prototype属性对象吃见面席卷__proto__,constructor(构造函数)指向构造函数,还有部分增长的性质。创建构造函数的实例对象p1,p1会起__proto__特性,指为那个原型Person.prototype。

探下面的图捋一捋

图片 4

那问题来了,之前我们说每个对象还发生一个__proto__属性,函数也是一致栽对象,那么函数自然吧发出__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));

如上代码中,第一种艺术是于传统的函数创建方式,第二种植是因此new Functoin创建。注意:不引进用第二种办法

 

综上所述:第一个例中之构造函数Person也是一个目标,所以它吧设有__proto__属性,指为其的原型Function.prototype。

图片 5

(根据是图用下面的法门可自动验证)

Function.prototype指向的目标为是一个便的被Object创建的靶子,所以Function.prototype指向的对象,它的__proto__也指向Object.prototype

 

      验证一下:    

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

      判断原型的艺术发生下三种植:

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的实例对象p2,在调用函数showName()时见面于实例本身进行查找,若没有找到,再顺着__proto__随即漫长链查找上一级原型对象,一层一层发展找(原型链顶端Object.prototype),直到找到了。

设若当找到__proto__特性也null时,返回 undefined,证明不存在这措施还是性质。这样平等叠一叠查找实例上的原型上的性质就结一漫长原型链。

图片 7

 

好了即交此了,有邪的地方要指正~~~~