关于JavaScript中原型继承中的一点思考
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了关于JavaScript中原型继承中的一点思考，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2865字，纯文字阅读大概需要5分钟。
内容图文
我们先看一段传统的继承代码： 代码如下:
//定义超类
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中原型继承中的一点思考全部内容，希望文章能够帮你解决关于JavaScript中原型继承中的一点思考所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。