首页 > 代码库 > 小谈js原型链和继承

小谈js原型链和继承

2024-08-01 19:57:03   228人阅读

原型(prototype)在js中可是担当着举足轻重的作用，原型的实现则是在原型链的基础上，理解原型链的原理后，对原型的使用会更加自如，也能体会到js语言的魅力。

 

本文章会涉及的内容

  • 原型及原型对象
  • 原型链（JavaScript核心部分）
  • 类的继承
  • instanceof
  • constructor

 

我们先用一个构造器来实现一个构造函数：

function A(){    this.mark = "A";    this.changeMark = function(){        this.mark += "_changed";    }}A.prototype.mark2 = "A2";A.prototype.changeMark2 = function(){    this.mark2 += "_changed";}var a = new A();var a2 = new A();//下面则说明构造函数实例化后，分配着不同的实例对象，互不相关console.log(a.mark);  //"A"console.log(a2.mark); //"A"    a.changeMark();   //使用实例对象中的方法console.log(a.mark);  //"A_changed"console.log(a2.mark); //"A"//下面则说明了new操作符的一项作用，即将原型中的this指向当前对象，//在a.changeMark2执行时，changMark2中的方法先找 this.mark2 的值，//但是实例对象this中没有mark2值，则在原型链(后面会介绍)向上寻找，得到A原型对象中的mark2值，//在赋值时，将修改后的值添加在了a实例中。//总：虽然调用的是prototype方法，但是不会对prototype属性做修改，只会说是在实例中新增属性，但是在使用时，会最使用最近得到的属性（在后面原型链中可以加以理解）console.log(a.mark2);  //"A2"console.log(a2.mark2); //"A2"    a.changeMark2();   //使用原型链中的方法console.log(a.mark2);  //"A2_changed"console.log(a2.mark2); //"A2"

 

 

为什么a可以使原型中的changeMark2方法？这就和js巧妙的原型链相关，在Firefox中我们可以打印出对象并可查看到对象下面的__proto__。

我们把上面的过程用流程图来表示：

 

 

只有构造函数才会有prototype属性，而实例化出来的对象会拥有__proto__，而不会有prototype。

 

就像上图画的那样，两个实例化的对象都通过__proto__属性指向了A.prototype（即构造函数的原型对象）

而原型对象的__proto__指向Object对象，就像a.toString()的toString方法就是存在于Object原型对象(Object.prototype)中。

 

so：当使用对象的方法或属性时，对象会在一步一步通过__proto__向上寻找，找到最近的则是最终的获取到的方法或属性。

　　————这就是js中的原型链。

 

就像图上看到的一样，所有对象的原型链最终都指向了Object对象，而Object的原型对象（Object.prototype）是为数不多的不继承自任何属性的对象，即Object.prototype没有__proto__，是原型链的顶峰。

 

通过上面我们可以了解到，当我们对A.prototype或Object.prototype添加属性或方法时，在a和a2实例中都会查看到该属性或方法，因为这两个实例都通过原型链与A和Object的原型对象相连。

 

 再来看看原型对象和原型链在继承方面的实现：

再构造一个函数A和一个函数B，并让B继承A，如下：

function A(mark){    this.mark = mark;}A.prototype.getMark = function(){    return this.mark;}function B(mark){　　this.mark = mark}//var temp = new A("A");//B.prototype = temp;//上面语句和下语句作用相同B.prototype = new A("A"); //实例化一个A，其赋值于B.prototype
　　　　　　　　　　　　　　　 //我们知道了原型链，这样做就是将B的原型对象与A的原型对象通过原型链(__proto__)连接起来
　　　　　　　　　　　　　　　 //以实现继承
var b = new B("B");console.log(b.mark); //B， 结果如上面原型链分析的那样，向上找到最近的属性，则为b实例中的mark："B"

 

 

 

其中的结构示意大概如下图：

 

 

这时我们可以看到，在B.prototype中是没有constructor的，因为B.prototype只是简单的new A("A")对象赋值的结果。

在js中的constructor有什么作用呢？如：

var arr = new Array();arr instanceof Array;      //truearr.constructor === Array; //truefunction TEMP(){}var temp = new TEMP();temp instanceof TEMP;      //truetemp.constructor === TEMP; //true

 

 

 引用《JavaScript权威指南》中的对于constructor的解释为：对象通常继承的constructor均指代它们的构造函数，而构造函数是类的“公共标识”。即constructor可用来判断对象所属的类。

　

在上面的小例子中，用instanceof也可判断对象的类，但是有自身的缺陷，instanceof的实现方法为：

instanceof不会去检查temp是不是由TEMP()构造函数初始化的，面是判断temp是否继承自TEMP.prototype，这样，范围就宽了很多。

如在上面的大例中，使用

b instaceof B //true 因为在b的原型链中可以找到B.prototype对象b instaceof A //true 在b的原型链中也可以找到A.prototype对象

 

可以说instanceof是用来检测继承关系的。

而当

console.log(b.constructor) //function A()//因为在b的原型链中，最近的constructor就是A.prototype中有constructor指向了构造函数A();

 

但我们知道的b是属于B类的，那最后所以要做的就是：

B.prototype.constructor = B; //将constructor指向自身的构造函数var new_b = new B("B");console.log(new_b.constructor) //function B() 

 这样，一个完整的类继承才完成了。

 

 

最后附上一个完整继承后的结果图： 

 

 

第一次写长文，如有问题，还请大家指出。

转载请注明出处，谢谢。

 

Finish.

 

小谈js原型链和继承


联系
我们