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

一、JavaScript原型链

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

比如现在有如下的代码：

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

1 1 /*扩展Object类，添加Clone，JS实现克隆的方法*/
2 2 Object.prototype.Clone = function(){
3 3     var objClone;
4 4     if (this.constructor == Object){
5 5         objClone = new this.constructor(); 
6 6     }else{
7 7         objClone = new this.constructor(this.valueOf()); 
8 8     }
9 9     for(var key in this){
1010         if ( objClone[key] != this[key] ){ 
1111             if ( typeof(this[key]) == 'object' ){ 
1212                 objClone[key] = this[key].Clone();
1313             }else{
1414                 objClone[key] = this[key];
1515             }
1616         }
1717     }
1818     objClone.toString = this.toString;
1919     objClone.valueOf = this.valueOf;
2020     return objClone; 
2121 }
2222 
2323 /*扩展Object类，添加Extend方法来实现JS继承, 目标对象将拥有源对象的所有属性和方法*/
2424 Object.prototype.Extend = function (objDestination, objSource) {
2525     for (var key in objSource) {
2626         if (objSource.hasOwnProperty(key) && objDestination[key] === undefined) {
2727             objDestination[key] = objSource[key];
2828         }
2929     }
3030     return objDestination;
3131 }

定义Person类

11 /*定义一个Person类*/
22 function Person(_name,_age){
33     this.name = _name;
44     this.age = _age;
55 }

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

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

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

运行结果：

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

11  /*定义一个Person类*/
22  function Person(_name,_age){
33      this.name = _name;
44      this.age = _age;
55  }
66  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。

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

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

关键在于第二步，我们来证明一下：

11 var p  = new Person("孤傲苍狼",24);//创建一个人，名字是孤傲苍狼
22 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的引擎将他暴露了出来成为了一个公有的属性，我们可以对外访问和设置。

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

11 <script type="text/javascript">
22         var Person = function () { };
33         Person.prototype.Say = function () {
44             alert("Person say");
55         }
66         var p = new Person();
77         p.Say();
88 </script>

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

首先

1 var p=new Person()；

可以得出

1 p.__proto__=Person.prototype

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

11 Person.prototype.Say=function(){
22         alert("Person say");
33 };

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

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

1 1 <script type="text/javascript">
2 2         var Person = function () { };
3 3         Person.prototype.Say = function () {
4 4             alert("Person say");
5 5         }
6 6         Person.prototype.Salary = 50000;
7 7         var Programmer = function () { };
8 8         Programmer.prototype = new Person();//让程序员类从人这个类继承
9 9         Programmer.prototype.WriteCode = function () {
1010             alert("programmer writes code");
1111         };
1212         Programmer.prototype.Salary = 500;
1313         var p = new Programmer();
1414         p.Say();
1515         p.WriteCode();
1616         alert(p.Salary);
1717 </script>

　　我们来做这样的推导：

1 var p=new Programmer();

可以得出

1 p.__proto__=Programmer.prototype;

而在上面我们指定了

1 Programmer.prototype=new Person();

我们来这样拆分，

11 var p1=new Person();
22 Programmer.prototype=p1;

那么:

11 p1.__proto__=Person.prototype;
22 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引擎如何查找属性：

11 function getProperty(obj, prop) {
22     if (obj.hasOwnProperty(prop))
33         return obj[prop];
44     else if (obj.__proto__ !== null)
55         return getProperty(obj.__proto__, prop);//递归
66     else
77         return undefined;
88 }

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

1 1  <script type="text/javascript">
2 2     /*查找obj对象的prop属性*/
3 3      function getProperty(obj, prop) {
4 4         if (obj.hasOwnProperty(prop))
5 5             return obj[prop];
6 6         else if (obj.__proto__ !== null)
7 7             return getProperty(obj.__proto__, prop);//递归
8 8         else
9 9             return undefined;
1010     }
1111 
1212     var Person = function () { };//定义Person类
1313     Person.prototype.Say = function () {
1414         alert("Person say");
1515     }
1616     Person.prototype.Salary = 50000;
1717 
1818     var Programmer = function () { };//定义Programmer类
1919     //Programmer.prototype = new Person();//让程序员类从人这个类继承，写法一
2020     Programmer.prototype = Person.prototype;//让程序员类从人这个类继承，写法二
2121     Programmer.prototype.WriteCode = function () {
2222         alert("programmer writes code");
2323     };
2424     Programmer.prototype.Salary = 500;
2525     var p = new Programmer();
2626     var SayFn = getProperty(p,"Say");//查找p对象的Say方法
2727     SayFn.call(p);//调用找到的Say方法
2828 </script>

在火狐下的运行结果：

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

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

一、JavaScript原型链

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

评论区

相关推荐