浅谈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 相关文章推荐
多广告投放代码 推荐
Nov 13 Javascript
基于JQuery.timer插件实现一个计时器
Apr 25 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
Jul 16 Javascript
jQuery判断复选框是否勾选的原理及示例
May 21 Javascript
node.js中的fs.readFileSync方法使用说明
Dec 15 Javascript
jquery.cookie实现的客户端购物车操作实例
Dec 24 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
Jan 26 Javascript
js css+html实现简单的日历
Jul 14 Javascript
微信小程序 页面跳转和数据传递实例详解
Jan 19 Javascript
Bootstrap警告(Alerts)的实现方法
Mar 22 Javascript
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 05 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 CURL模拟GET及POST函数代码
2010/04/25 PHP
最新用php获取谷歌PR值算法,附上php查询PR值代码示例
2011/12/25 PHP
php中get_headers函数的作用及用法的详细介绍
2013/04/27 PHP
ThinkPHP模板中判断volist循环的最后一条记录的验证方法
2014/07/01 PHP
Cookie跨域问题解决方案代码示例
2020/11/24 PHP
PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
2020/12/01 PHP
js同时按下两个方向键
2007/12/01 Javascript
jQuery TextBox自动完成条
2009/07/22 Javascript
Javascript脚本实现静态网页加密实例代码
2013/11/05 Javascript
使用JS CSS去除IE链接虚线框的三种方法
2013/11/14 Javascript
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
2015/10/29 Javascript
Javascript实现Array和String互转换的方法
2015/12/21 Javascript
js实现页面a向页面b传参的方法
2016/05/29 Javascript
JS文件中加载jquery.js的实例代码
2018/05/05 jQuery
[01:09:50]VP vs Pain 2018国际邀请赛小组赛BO2 第二场
2018/08/20 DOTA
Python中使用第三方库xlutils来追加写入Excel文件示例
2015/04/05 Python
通过实例浅析Python对比C语言的编程思想差异
2015/08/30 Python
深入理解NumPy简明教程---数组3(组合)
2016/12/17 Python
使用Python对Access读写操作
2017/03/30 Python
python实现浪漫的烟花秀
2019/01/30 Python
pygame实现贪吃蛇游戏(上)
2019/10/29 Python
Python标准库json模块和pickle模块使用详解
2020/03/10 Python
Too Faced官网:美国知名彩妆品牌
2017/03/07 全球购物
介绍一下linux的文件系统
2012/03/20 面试题
涉外经济法专业毕业生推荐信
2013/11/24 职场文书
创业计划书的主要内容有哪些
2014/01/29 职场文书
会计师职业生涯规划范文
2014/02/18 职场文书
企业安全生产目标责任书
2014/07/23 职场文书
2014银行领导班子群众路线对照检查材料思想汇报
2014/09/17 职场文书
2015年社区平安建设工作总结
2015/05/13 职场文书
《云雀的心愿》教学反思
2016/02/23 职场文书
Python使用OpenCV实现虚拟缩放效果
2022/02/28 Python
VUE解决跨域问题Access to XMLHttpRequest at
2022/05/06 Vue.js
Oracle中日期的使用方法实例
2022/07/07 Oracle