JavaScript学习总结(十七)——Javascript原型链的原理

Stella981
• 阅读 777

一、JavaScript原型链

ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。在JavaScript中,用 __proto__ 属性来表示一个对象的原型链。当查找一个对象的属性时,JavaScript 会向上遍历原型链,直到找到给定名称的属性为止!

比如现在有如下的代码:

扩展Object类,添加Clone和Extend方法

 1 /*扩展Object类,添加Clone,JS实现克隆的方法*/
 2 Object.prototype.Clone = function(){
 3     var objClone;
 4     if (this.constructor == Object){
 5         objClone = new this.constructor(); 
 6     }else{
 7         objClone = new this.constructor(this.valueOf()); 
 8     }
 9     for(var key in this){
10         if ( objClone[key] != this[key] ){ 
11             if ( typeof(this[key]) == 'object' ){ 
12                 objClone[key] = this[key].Clone();
13             }else{
14                 objClone[key] = this[key];
15             }
16         }
17     }
18     objClone.toString = this.toString;
19     objClone.valueOf = this.valueOf;
20     return objClone; 
21 }
22 
23 /*扩展Object类,添加Extend方法来实现JS继承, 目标对象将拥有源对象的所有属性和方法*/
24 Object.prototype.Extend = function (objDestination, objSource) {
25     for (var key in objSource) {
26         if (objSource.hasOwnProperty(key) && objDestination[key] === undefined) {
27             objDestination[key] = objSource[key];
28         }
29     }
30     return objDestination;
31 }

定义Person类

1 /*定义一个Person类*/
2 function Person(_name,_age){
3     this.name = _name;
4     this.age = _age;
5 }

在JavaScript中,Object类是所有类的父类,所以Person类从Object类继承,继承了Object类的所有public属性和public方法,包括Object类新添加的Clone和Extend方法****

可以用如下的代码证明,Person类确实是继承了Object类

 1 document.write("<pre>");
 2 
 3 var p  = new Person("孤傲苍狼",24);//创建一个人,名字是孤傲苍狼
 4 var cloneP = p.Clone();//p调用在Object类中定义的Clone方法来克隆自己,如果能得到一个cloneP,那就证明了Person类确实是继承了Object类,所以就拥有了Clone
 5 document.writeln("p是使用Person类以构造函数的方式创建出来的对象,p.name = "+p.name+",p.age = "+p.age);
 6 document.writeln("cloneP是p调用Clone方法克隆出来的对象,cloneP.name = "+cloneP.name+",cloneP.age = "+cloneP.age);
 7 document.writeln("cloneP对象和p对象是两个相互独立的对象,这两个对象的内存地址肯定是不相等,p == cloneP的结果是:"+(p == cloneP));
 8 cloneP.name="白虎神皇";//修改cloneP的名字
 9 document.writeln("cloneP的name被修改了,cloneP.name = "+cloneP.name);
10 document.writeln("cloneP的name修改了,但是不影响到p,p.name = "+p.name);
11 
12 document.write("</pre>");

运行结果:

  那么Person类通过神马方式来继承Object类的呢,是使用原型(prototye)的方式继承的:

1  /*定义一个Person类*/
2  function Person(_name,_age){
3      this.name = _name;
4      this.age = _age;
5  }
6  Person.prototype = new Object();//让Person类继承Object类

  由于JavaScript规定,任何类都继承自Object类,所以"Person.prototype = new Object();//让Person类继承Object类"即使我们不写,我猜想JavaScript引擎也会自动帮我们加上这句话,或者是使用"Person.prototype = Object.prototype**;**"这种方式,让Person类去继承Object类。"Person.prototype = new Object();",其实这样就相当于Object对象是Person的一个原型,这样就相当于了把Object对象的属性和方法复制到了Person上了。

二、new运算符是如何工作的

我们先看看这样一段代码:

1 var p  = new Person("孤傲苍狼",24);//创建一个人,名字是孤傲苍狼

很简单的一段代码,我们来看看这个new究竟做了什么?我们可以把new的过程拆分成以下三步:

1.var p={}; 初始化一个对象p。

  1. p.__proto__=Person.prototype;,将对象p的 __proto__ 属性设置为 Person.prototype

3.Person.call(p,"孤傲苍狼",24);调用构造函数Person来初始化p。

关键在于第二步,我们来证明一下:

1 var p  = new Person("孤傲苍狼",24);//创建一个人,名字是孤傲苍狼
2 alert("p.__proto__ === Person.prototype的结果是:"+(p.__proto__ === Person.prototype));

 在火狐下的运行结果是:

这段代码会返回true。说明我们步骤2的正确。

注意:__proto__这个属性只有在firefox或者chrome浏览器中才是公开允许访问的,因此,其他基于IE内核的浏览器是不会返回true的。

那么__proto__是什么?在这里简单地说下。每个对象都会在其内部初始化一个属性,就是 __proto__,当我们访问一个对象的属性时,如果这个对象内部不存在这个属性,那么他就会去__proto__里找这个属性,这个 __proto__又会有自己的__proto__,于是就这样一直找下去,也就是我们平时所说的原型链的概念。

按照标准,__proto__是不对外公开的,也就是说是个私有属性,在IE下是无法访问__proto__属性的,但是Firefox的引擎将他暴露了出来成为了一个公有的属性,我们可以对外访问和设置。

好,概念说清了,让我们看一下下面这些代码:

1 <script type="text/javascript">
2         var Person = function () { };
3         Person.prototype.Say = function () {
4             alert("Person say");
5         }
6         var p = new Person();
7         p.Say();
8 </script>

这段代码很简单,我们看下为什么p可以访问Person的Say。

首先

1 var p=new Person();

可以得出

1 p.__proto__=Person.prototype

那么当我们调用p.Say()时,首先p中没有Say这个属性, 于是,他就需要到他的__proto__中去找,也就是Person.prototype,而我们在上面定义了

1 Person.prototype.Say=function(){
2         alert("Person say");
3 };

于是,就找到了这个方法。

接下来,让我们看个更复杂的。

 1 <script type="text/javascript">
 2         var Person = function () { };
 3         Person.prototype.Say = function () {
 4             alert("Person say");
 5         }
 6         Person.prototype.Salary = 50000;
 7         var Programmer = function () { };
 8         Programmer.prototype = new Person();//让程序员类从人这个类继承
 9         Programmer.prototype.WriteCode = function () {
10             alert("programmer writes code");
11         };
12         Programmer.prototype.Salary = 500;
13         var p = new Programmer();
14         p.Say();
15         p.WriteCode();
16         alert(p.Salary);
17 </script>

   我们来做这样的推导:

1 var p=new Programmer();

可以得出

1 p.__proto__=Programmer.prototype;

而在上面我们指定了

1 Programmer.prototype=new Person();

我们来这样拆分,

1 var p1=new Person();
2 Programmer.prototype=p1;

那么:

1 p1.__proto__=Person.prototype;
2 Programmer.prototype.__proto__=Person.prototype;

由根据上面得到

1 p.__proto__=Programmer.prototype

可以得到:

1 p.__proto__.__proto__=Person.prototype

好,算清楚了之后我们来看上面的结果,p.Say()。由于p没有Say这个属性,于是去 p.__proto__,也就是Programmer.prototype,也就是p1中去找,由于p1中也没有Say,那就去 p.__proto__.__proto__,也就是Person.prototype中去找,于是就找到了Say方法。这也就是原型链的实现原理。

以下代码展示了JS引擎如何查找属性:

1 function getProperty(obj, prop) {
2     if (obj.hasOwnProperty(prop))
3         return obj[prop];
4     else if (obj.__proto__ !== null)
5         return getProperty(obj.__proto__, prop);//递归
6     else
7         return undefined;
8 }

   范例:查找p对象的Say方法

 1  <script type="text/javascript">
 2     /*查找obj对象的prop属性*/
 3      function getProperty(obj, prop) {
 4         if (obj.hasOwnProperty(prop))
 5             return obj[prop];
 6         else if (obj.__proto__ !== null)
 7             return getProperty(obj.__proto__, prop);//递归
 8         else
 9             return undefined;
10     }
11 
12     var Person = function () { };//定义Person类
13     Person.prototype.Say = function () {
14         alert("Person say");
15     }
16     Person.prototype.Salary = 50000;
17 
18     var Programmer = function () { };//定义Programmer类
19     //Programmer.prototype = new Person();//让程序员类从人这个类继承,写法一
20     Programmer.prototype = Person.prototype;//让程序员类从人这个类继承,写法二
21     Programmer.prototype.WriteCode = function () {
22         alert("programmer writes code");
23     };
24     Programmer.prototype.Salary = 500;
25     var p = new Programmer();
26     var SayFn = getProperty(p,"Say");//查找p对象的Say方法
27     SayFn.call(p);//调用找到的Say方法
28 </script>

在火狐下的运行结果:

其实prototype只是一个假象,他在实现原型链中只是起到了一个辅助作用,换句话说,他只是在new的时候有着一定的价值,而原型链的本质,其实在于__proto__。

点赞
收藏
评论区
推荐文章
ZY ZY
3年前
js继承的几种方式
1.原型链继承原型链继承:想要继承,就必须要提供父类(继承谁,提供继承的属性)//父级functionPerson(name)//给构造函数添加参数this.namename;this.age10;this.sumfunction()console.log(this.name)//原
Souleigh ✨ Souleigh ✨
4年前
Js中 constructor, prototype, __proto__ 详解
本文为了解决以下问题:__proto__(实际原型)和prototype(原型属性)不一样!!!constructor属性(原型对象中包含这个属性,实例当中也同样会继承这个属性)prototype属性(constructor.prototype原型对象)__proto__属性(实例指向原型对象的指针)<br/首先弄清楚几个概念:<br/
Stella981 Stella981
3年前
JavaScript prototype原型用法
JavaScript对象原型所有JavaScript对象都从原型继承属性和方法。<!DOCTYPEhtml<html<metacharset"utf8"<titlejs</title<body<h2JavaScript对象</h2
Stella981 Stella981
3年前
Javascript 是如何体现继承的 ?
js继承的概念js里常用的如下两种继承方式:原型链继承(对象间的继承)类式继承(构造函数间的继承) 由于js不像java那样是真正面向对象的语言,js是基于对象的,它没有类的概念。所以,要想实现继承,可以用js的原型prototype机制或者用apply和call方法去实现在面向对象的语言中,我们使用类来创建一个自定义对象
Wesley13 Wesley13
3年前
JS函数高级
原型与原型链所有函数都有一个特别的属性:prototype:显式原型属性所有实例对象都有一个特别的属性:__proto__:隐式原型属性显式原型与隐式原型的关系函数的prototype:定义函数时被自动赋值,值默认为{},即用为原型对象
Wesley13 Wesley13
3年前
JS原型、原型链深入理解
原型是JavaScript中一个比较难理解的概念,原型相关的属性也比较多,对象有”prototype”属性,函数对象有”prototype”属性,原型对象有”constructor”属性。原型是JavaScript中一个比较难理解的概念,原型相关的属性也比较多,对象有”prototype”属性,函数对象有”prototype”属性,原型对
Stella981 Stella981
3年前
JavaScript 原型和原型链的定义和使用
目录JavaScript原型和原型链的定义和使用01原型原型定义原型实例理解书写方法1:属性单个定义书写方法2:属性多个定义02原型链原型链定义原型链实例理解最终原型问题03原型和原型链的使用应用举例Ja
Stella981 Stella981
3年前
JavaScript 基于原型链的继承
JavaScript对象是动态的属性“包”(指其自己的属性)。JavaScript对象有一个指向一个原型对象的链。当试图访问一个对象的属性时,它不仅仅在该对象上搜寻,还会搜寻该对象的原型,以及该对象的原型的原型,依次层层向上搜索,直到找到一个名字匹配的属性或到达原型链的末尾。遵循ECMAScript标准,someObject.Prototype
Stella981 Stella981
3年前
Javascript中,实现类与继承的方法和优缺点分析
Javascript是一种弱类型语言,不存在类的概念,但在js中可以模仿类似于JAVA中的类,实现类与继承第一种方法:利用Javascript中的原型链1//首先定义一个父类23functionAnimal(name,age){4//定义父类的属性5thi
Stella981 Stella981
3年前
Javascript 构造函数和类
1.构造函数构造函数的名称一般都是首字母大写挂载在this上面的属性为实例属性,实例属性再每个实例间都是独立的原型链属性通过prototype添加,他是所有实例共享的类方法/静态属性只能由构造函数本身访问当实例属性和原型链上的属性重名时,优先访问实例属性,没有实例属性再访问原型属性大多数浏览器的ES5实现之中,每一个对象都有\_\_pr