浅谈Javascript实现继承的方法


Posted in Javascript onJuly 06, 2015

S1:js中一切皆对象,想想如果要实现对父对象属性和方法的继承,最初我们会怎样子来实现呢,考虑到原型的概念,最初我是这样来实现继承的

function Parent(){
   this.name='123';
}
Parent.prototype.getName=function(){
   return this.name;
}
function Son(){
   this.age=20;
}
Son.prototype=new Parent();
Son.prototype.getAge=function(){
   return this.age;
}
var son=new Son();
console.log('Name :'+son.getName()+';Age: '+son.getAge());
 
 
VM1777:16 Name :123;Age: 20

从上面可以看到实现对Parent的继承主要是覆写了Son的prototype,这样便把Parent的属性和方法过给了Son的原型,这样子在通过new Son()构造出来的对象均会继承来自原型【即父对象Parent】的属性和方法,这样就达到了继承效果;但这样会带来一个副作用,就是当父对象中包含引用类型的属性时,子对象对引用类型数据的修改,会影响到所有的子对象,显然这不是我们需要的效果:

function Parent(){
   this.name='123';
   this.fruits=['apple'];
}
Parent.prototype.getName=function(){
   return this.name;
}
function Son(){
   this.age=20;
}
Son.prototype=new Parent();
Son.prototype.getAge=function(){
   return this.age;
}
var son=new Son();
var son1=new Son();
console.log(son.fruits);//["apple"]
console.log(son1.fruits);//["apple"]
son.fruits.push('pear');
console.log(son.fruits);//["apple", "pear"]
console.log(son1.fruits);//["apple", "pear"]

S2:目前想到要解决这个问题就是使每个子对象都拥有一份父对象属性的复制品,这样修改属性时只是修改了子对象下的属性,而不会影响到其他的子对象属性。这一目标的实现参照前人的对象冒充的方式来实现

function Parent(){
   this.name='123';
   this.fruits=['apple'];
}
Parent.prototype.getName=function(){
   return this.name;
}
function Son(){
   Parent.call(this);
   this.age=20;
}
Son.prototype=new Parent();
Son.prototype.getAge=function(){
   return this.age;
}
var son=new Son();
var son1=new Son();
console.log(son.fruits);//["apple"]
console.log(son1.fruits);//["apple"]
son.fruits.push('pear');
console.log(son.fruits);//["apple", "pear"]
console.log(son1.fruits);//["apple"]

上面我在Son函数里加了Parent.call(this)实现在new Son()的时候将this[即new 出来的Son对象]冒充成Parent函数里的上下文this来调用Parent()函数,从而拿到了父对象的属性和方法副本,所以在接下来修改父对象的属性和方法时其实是修改的副本,故达到了不会影响全部子对象的效果。但是由于Son.prototype=new Parent()的使用,我们得到了两份实例的属性和方法,而再我们拿到了副本以后,只是需要父对象的原型就行了,从下面可以看出我们只需要原型中的getname();

浅谈Javascript实现继承的方法

S3:接下来就是要去掉一份实例的属性和方法,这时候是constructor发挥作用的时候了,看下边代码,将Parent.prototype重新构建成一个原生对象,来作为子对象的原型,再把constructor指向子构造器

function Parent(){
   this.name='123';
   this.fruits=['apple'];
}
Parent.prototype.getName=function(){
   return this.name;
}
function Son(){
   Parent.call(this);
   this.age=20;
}
function Extend(Parent,Son){
   var proto = new Object(Parent.prototype);
   proto.constructor = Son;
   Son.prototype=proto;
}
Extend(Parent,Son);
Son.prototype.getAge=function(){
   return this.age;
}

浅谈Javascript实现继承的方法

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
用Javascript 获取页面元素的位置的代码
Sep 25 Javascript
vs2003 js文件编码问题的解决方法
Mar 20 Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
May 28 Javascript
利用了jquery的ajax实现二级联互动菜单
Dec 02 Javascript
JS设置获取cookies的方法
Jan 26 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
Mar 02 Javascript
JavaScript实现给按钮加上双重动作的方法
Aug 14 Javascript
原生js的数组除重复简单实例
May 24 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
Jul 09 Javascript
Angular之指令Directive用法详解
Mar 01 Javascript
详解vue.js之props传递参数
Dec 12 Javascript
微信小程序实现自动定位功能
Oct 31 Javascript
JavaScript保存并运算页面中数字类型变量的写法
Jul 06 #Javascript
angularjs客户端实现压缩图片文件并上传实例
Jul 06 #Javascript
jQuery 遍历函数详解
Jul 05 #Javascript
php结合imgareaselect实现图片裁剪
Jul 05 #Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
Jul 05 #Javascript
jQuery插件pagewalkthrough实现引导页效果
Jul 05 #Javascript
IE浏览器下PNG相关功能
Jul 05 #Javascript
You might like
PHP的博客ping服务代码
2012/02/04 PHP
php 伪静态之IIS篇
2014/06/02 PHP
php创建session的方法实例详解
2015/01/27 PHP
js网页右下角提示框实例
2014/10/14 Javascript
JavaScript学习笔记之Function对象
2015/01/22 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
bootstrap multiselect 多选功能实现方法
2017/06/05 Javascript
微信小程序 检查接口状态实例详解
2017/06/23 Javascript
JavaScript创建对象的七种方式(推荐)
2017/06/26 Javascript
全面介绍vue 全家桶和项目实例
2017/12/27 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
2018/05/23 jQuery
详解vue添加删除元素的方法
2018/06/30 Javascript
使用RxJS更优雅地进行定时请求详析
2019/06/02 Javascript
微信小程序错误this.setData报错及解决过程
2019/09/18 Javascript
JS+JQuery实现无缝连接轮播图
2020/12/30 jQuery
从源码角度来回答keep-alive组件的缓存原理
2021/01/18 Javascript
[33:23]Secret vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python中将字典转换成其json字符串
2014/07/16 Python
python文件特定行插入和替换实例详解
2017/07/12 Python
python中利用Future对象回调别的函数示例代码
2017/09/07 Python
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
详解Django 中是否使用时区的区别
2018/06/14 Python
python中的常量和变量代码详解
2018/07/25 Python
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
Python在图片中插入大量文字并且自动换行
2019/01/02 Python
Python3爬虫之自动查询天气并实现语音播报
2019/02/21 Python
mac系统下Redis安装和使用步骤详解
2019/07/09 Python
Python利用FFT进行简单滤波的实现
2020/02/26 Python
python 还原梯度下降算法实现一维线性回归
2020/10/22 Python
浅析Python的命名空间与作用域
2020/11/25 Python
python程序实现BTC(比特币)挖矿的完整代码
2021/01/20 Python
狼和鹿教学反思
2014/02/05 职场文书
《雕塑之美》教学反思
2014/04/24 职场文书
施工安全汇报材料
2014/08/17 职场文书
2014年专项整治工作总结
2014/11/17 职场文书