关于JavaScript中原型继承中的一点思考

2019-11-20 23:19:39

字体：大中小

来源：转载

供稿：网友

我们先看一段传统的继承代码：

 
//定义超类 
function Father(){ 
this.name = "父亲"; 
} 
Father.prototype.theSuperValue = ["NO1","NO2"]; 
//定义子类 
function Child(){ 
} 
//实现继承 
Child.prototype = new Father(); 
//修改共享数组 
Child.prototype.theSuperValue.push("修改"); 
//创建子类实例 
var theChild = new Child(); 
console.log(theChild.theSuperValue); //["NO1","NO2","修改"] 
//创建父类实例 
var theFather = new Father(); 
console.log(theFather.theSuperValue); //["NO1","NO2","修改"] 

通过上面的代码，我们注意“加红”的代码，子类Child的原型对象是父类Father的一个实例（new Father()），我们在这里是调用new Father()对象中的theSuperValue属性，因为new Father()对象中没有此属性（只有name属性），因此会沿着原型链向它的原型对象（Father.prototype）中去找，找到后发现是一个数组，而且是引用类型，此时我们往此数组中添加一个字符串“修改”。

　　之后，我们新建了Child的实例对象theChild，当theChild调用theSuperValue属性时，首先它自己里面没有此属性，就会去它的原型对象(new Father)中去找，可惜这里也没有，接着会到new Father()的原型中去找，OK，在Father.prototype中找到了这个数组，发现是["NO1","NO2","修改"]。

　　再接着，我们创建了Father的实例对象theFather，同上，我们在Father.prototype中找到了这个引用类型的数组["NO1","NO2","修改"]。（当然，数组都是引用类型的！）

　　通过上面的赘述，本来已经理解原型链概念的朋友觉得是废话连篇，其实我也是呵呵，接下来我们再看一个相似的例子：

复制代码代码如下:

 
//定义超类 
function Father() { 
this.name = "父亲"; 
} 
Father.prototype.theSuperValue = ["NO1", "NO2"]; 
//定义子类 
function Child() { 
} 
//实现继承 
Child.prototype = new Father(); 
//修改共享数组 
Child.prototype.theSuperValue = ["我是覆盖代码"] 
//创建子类实例 
var theChild = new Child(); 
console.log(theChild.theSuperValue); 
//创建父类实例 
var theFather = new Father(); 
console.log(theFather.theSuperValue); 

我们看一下上面的代码，我用一种比较特别的紫色标注了此段代码与上段代码的小小区别，但结果却发生了“巨大”变化，见下面的截图：

　　为什么我说是巨大变化，是因为我们从“重用公共属性”过渡到“覆盖公共属性，建立自己特色属性”上来！我这里是用数组演示的，其实第二种情况常常用在Function中，用子类的方法来覆盖父类的方法。

在第二段代码中，我们需要关注的是紫色代码前的“=”号，它是赋值操作符。如果我们对Child.prototype及new Father()对象调用这个赋值操作符时，我们就在这个对象上“新建”了一个属性，当在下面的theChild实例上调用theSuperValue时，返回的当然是新属性值["我是覆盖代码"]。

　　但当我们新创建一个父类实例theFather对象时，调用该对象上的theSuperValue属性，我们就会发现对象上并没有啊，这是为什么呢？因为我们刚才覆盖的是Father对象new Father();而不是Father类，所以，通过Fater（）构造函数创建的新对象theFather并不包含新建的属性，当然，接下来的事情大家都明白，就是沿着原型链向上找，OK，在Father.prototype中找到了，就是我们一开始定义的那个数组。

　　通过上面两个例子，我们在JS中使用原型提供的继承功能时，尤其是利用子对象操作原型方法、对象时，切记“=”号赋值与引用调用这两种不同的操作，因为他们会带来完全不同的结果。

上一篇：JavaScript中的apply()方法和call()方法使用介绍

下一篇：原生js 秒表实现代码