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 相关文章推荐
JScript内置对象Array中元素的删除方法
Mar 08 Javascript
javascript 有用的脚本函数
May 07 Javascript
转换字符串为json对象的方法详解
Nov 29 Javascript
jquery获取radio值(单选组radio)
Oct 16 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
Dec 12 Javascript
JavaScript、jQuery与Ajax的关系
Jan 24 Javascript
EditPlus中的正则表达式 实战(2)
Dec 15 Javascript
详解angular 中的自定义指令之详解API
Jun 20 Javascript
JS基于正则表达式实现的密码强度验证功能示例
Sep 21 Javascript
JavaScript定义函数的三种实现方法
Sep 23 Javascript
Vue-axios-post数据后端接不到问题解决
Jan 09 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
Aug 13 Javascript
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+mysql留言本源码
2009/11/11 PHP
php 冒泡排序 交换排序法
2011/05/10 PHP
linux命令之调试工具strace的深入分析
2013/06/03 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
PHP中快速生成随机密码的几种方式
2017/04/17 PHP
greybox——不开新窗口看新的网页
2007/02/20 Javascript
JS下高效拼装字符串的几种方法比较与测试代码
2010/04/15 Javascript
jquery的选择器的使用技巧之如何选择input框
2013/09/22 Javascript
javascript表单验证大全
2015/08/12 Javascript
跟我学习JScript的Bug与内存管理
2015/11/18 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
2015/11/30 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
用node和express连接mysql实现登录注册的实现代码
2017/07/05 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
2018/05/25 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
2018/06/05 Javascript
详解Vue中的基本语法和常用指令
2019/07/23 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
Python while 循环使用的简单实例
2016/06/08 Python
Python使用base64模块进行二进制数据编码详解
2018/01/11 Python
pycharm远程linux开发和调试代码的方法
2018/07/17 Python
python 将字符串完成特定的向右移动方法
2019/06/11 Python
python创建ArcGIS shape文件的实现
2019/12/06 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
通过实例学习Python Excel操作
2020/01/06 Python
Keras设置以及获取权重的实现
2020/06/19 Python
Python实现上下文管理器的方法
2020/08/07 Python
python自动生成sql语句的脚本
2021/02/24 Python
用CSS3来实现社交分享按钮
2014/11/11 HTML / CSS
保安自我鉴定范文
2013/12/08 职场文书
三月法制宣传月活动总结
2014/07/03 职场文书
专题组织生活会发言材料
2014/10/17 职场文书
2014年体育部工作总结
2014/11/13 职场文书
鼋头渚导游词
2015/02/05 职场文书
2016优秀青年志愿者事迹材料
2016/02/25 职场文书
python删除csv文件的行列
2021/04/06 Python
vue实现可以快进后退的跑马灯组件
2022/04/08 Vue.js