JavaScript的继承实现小结


Posted in Javascript onMay 07, 2017

最近在忙前端的工作,因为之前做.net和php的开发比较多,前端开发喜欢把库拿来就用,几次事实证明,不懂原理,连改代码也改不好,所以还是下定决心研究下JavaScript的几个技术难点。

0x1.JavaScript的对象和构造函数

定义一个JavaScript对象可以这么定义

var a = {
	x : 1,
	y : 2,
	add : function () {
		return this.x + this.y;
	},
	mul : function () {
		return this.x * this.y;
	}
}

这样,你就定义了一个变量a,这个变量除了有x和y两个公有成员外,还有两个add和mul两个函数(公有方法)。但是这样的定义方法的缺点有2条:

1.批量生成对象很不方便,如果你var b=a;那么你每次修改b的成员,都会同时改掉a的成员,因为JavaScript的引用机制

2.如果每次生成对象需要自定义一些成员,都要写出相应的赋值操作,增加代码行数。

所以,在定义一个JavaScript对象之前,我们可以先定义一个构造函数。

function A(x, y) {
	this.x = x;
	this.y = y;
	this.add = function () {
		return this.x + this.y;
	}
	this.mul = function () {
		return this.x * this.y;
	}
}

然后,定义一个对象

a = new A(1, 2);

上面这句代码看起来简单,但是要和C++等面向对象的语言做个区分,A并不是严格意义上“类”的概念,因为JavaScript是没有类的,只是调用了构造函数而已。

现在问题来了,我们怎么实现继承?C++把封装,继承,多态这三个面向对象的特征实现得清清楚楚。但是对于JavaScript这样一个比较浪的语言,没有一个很严格的继承机制,而是采用以下几种方式来模拟。

0x2.JavaScript的prototype

为了能够讲清后面的apply或call函数,这里先引入prototype。prototype是只有Function才有的。

要用好继承,首先要明白为什么要设计继承这个东西?无非就是“把公共的部分”提取出来,实现代码复用。

所以在JavaScript里,也是把公共部分放在Function的prototype里。

我们来比较两个用prototype来实现继承的例子

function A(x, y) {
	this.x = x;
	this.y = y;
	this.add = function () {
		return this.x + this.y;
	}
	this.mul = function () {
		return this.x * this.y;
	}
}

function B(x,y){
	
}

B.prototype=new A(1,2);

console.log(new B(3,4).add());//3

这个例子中,子类的prototype指向一个A类对象

我们再实现一个B继承A的例子:

function A() {
	
}

A.prototype = {
	x : 1,
	y : 2,
	add : function () {
		return this.x + this.y;
	},
	mul : function () {
		return this.x * this.y;
	}
}
A.prototype.constructor=A;

function B(){
	
}

B.prototype=A.prototype;
B.prototype.constructor=B;

B的prototype对象引用了A的prototype对象,因为是引用,所以如果修改了B的prototype对象,A的prototype对象也随之修改,因为本质上他们都指向一块内存。所以每次改动B类型的prototype都要手动将constructor改回,防止错乱。相比两个例子,上一个例子因为没有引用,所以不会发生这个问题。

创建一个B类型的对象

b=new B();

b对象具有A类型的一切成员

console.log(b.add());  //3

因为每个prototype对象都有两个重要成员:constructor和_proto_,constructor本质上是一个函数指针,所以B.prototype=A.prototype执行后,覆盖掉了constructor,所以后面要让constructor重新指向B类型的构造函数。

0x3.JavaScript的构造函数绑定

在定义完一个A类型的构造函数后,再定义一个B类型,然后在B类型构造函数内部,“嵌入执行”A类型的构造函数。

function A(x, y) {
	this.x = x;
	this.y = y;
	this.add = function () {
		return this.x + this.y;
	}
	this.mul = function () {
		return this.x * this.y;
	}
}

function B(x, y, z) {
	A.apply(this, arguments);
	this.z = z;
}

console.log(new B(1,2,3));

apply函数和call函数基本一样,可以在B类型构造函数内部执行A类型构造函数。同时也可以继承A的所有成员。

显示结果:

JavaScript的继承实现小结

这里给个公式:在B构造函数里写A.apply(this),可以让B构造出来的对象可以拥有A构造函数里的所有成员。

谈到apply和call,还可以实现多重继承

function IA(){
	this.walk=function(){
		console.log("walk");
	}
}

function IB(){
	this.run=function(){
		console.log("run");
	}
}

function Person(){
	IA.apply(this);
	IB.apply(this);
}

var p=new Person();
p.walk();//walk    
p.run();
//run

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

Javascript 相关文章推荐
JavaScript 不只是脚本
May 30 Javascript
解析jquery中的ajax缓存问题
Dec 19 Javascript
微信小程序 for 循环详解
Oct 09 Javascript
详解JS-- 浮点数运算处理
Nov 28 Javascript
无法获取隐藏元素宽度和高度的解决方案
Mar 07 Javascript
vue登录路由验证的实现
Dec 13 Javascript
微信小程序实现横向增长表格的方法
Jul 24 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
Sep 12 Javascript
详解vue几种主动刷新的方法总结
Feb 19 Javascript
js实现省级联动(数据结构优化)
Jul 17 Javascript
前端性能优化建议
Sep 17 Javascript
vue实现同时设置多个倒计时
May 20 Vue.js
vue2.0多条件搜索组件使用详解
Mar 26 #Javascript
Vue 进阶教程之v-model详解
May 06 #Javascript
jQuery动态追加页面数据以及事件委托详解
May 06 #jQuery
AngularJS封装$http.post()实例详解
May 06 #Javascript
JavaScript瀑布流布局实现代码
May 06 #Javascript
jquery点赞功能实现代码 点个赞吧!
May 29 #jQuery
jQuery extend()详解及简单实例
May 06 #jQuery
You might like
php pack与unpack 摸板字符字符含义
2009/10/29 PHP
PHP程序员必须清楚的问题汇总
2014/12/18 PHP
php实现的IMEI限制的短信验证码发送类
2015/05/05 PHP
twig里使用js变量的方法
2016/02/05 PHP
用cookies实现的可记忆的样式切换效果代码下载
2007/12/24 Javascript
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
js实现的切换面板实例代码
2013/06/17 Javascript
JS检测输入字符是否包含非法字符的示例代码
2014/02/11 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
2014/02/12 Javascript
javascript 实现 原路返回
2015/01/21 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
2015/03/03 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
javascript绘制漂亮的心型线效果完整实例
2016/02/02 Javascript
微信小程序 页面跳转传参详解
2016/10/28 Javascript
解析jQueryEasyUI的使用
2016/11/22 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
2016/12/18 Javascript
NodeJS实现图片上传代码(Express)
2017/06/30 NodeJs
基于vue循环列表时点击跳转页面的方法
2018/08/31 Javascript
js实现简单放大镜效果
2020/03/07 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
2020/07/28 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
2020/08/12 Javascript
python config文件的读写操作示例
2019/09/27 Python
python通过SSH登陆linux并操作的实现
2019/10/10 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
python openCV实现摄像头获取人脸图片
2020/08/20 Python
Python-split()函数实例用法讲解
2020/12/18 Python
学生自我鉴定范文
2013/10/04 职场文书
毕业生自我鉴定
2013/12/04 职场文书
工程专业应届生求职信
2014/02/19 职场文书
行为习惯主题班会
2015/08/14 职场文书
诚信高考倡议书
2019/06/24 职场文书
网络安全倡议书(3篇)
2019/09/18 职场文书
浅谈vue2的$refs在vue3组合式API中的替代方法
2021/04/18 Vue.js
Z-Order加速Hudi大规模数据集方案分析
2022/03/31 Servers
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js
win10如何快速切换窗口 win10切换窗口快捷键分享
2022/07/23 数码科技