JavaScript的继承实现小结

 更新时间:2017年05月07日 10:35:25   作者:编程老头  
JavaScript作为面向对象的弱类型语言,继承也是其非常强大的特性之一。那么如何在JS中实现继承呢?本文将给大家揭开神秘面纱

最近在忙前端的工作,因为之前做.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的所有成员。

显示结果:

这里给个公式:在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

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

相关文章

  • 基于dom编程中 动态创建与删除元素的使用

    基于dom编程中 动态创建与删除元素的使用

    本篇文章小编将为大家介绍,基于dom编程中动态创建与删除元素的使用,有需要的朋友可以参考一下
    2013-04-04
  • php图像生成函数之间的区别分析

    php图像生成函数之间的区别分析

    对于一些新手朋友可能对php图像生成函数imagecreatetruecolor()和imagecreate()之间有什么区别不是很了解,本文将详细介绍,需要的朋友可以参考下
    2012-12-12
  • 有关javascript的性能优化 (repaint和reflow)

    有关javascript的性能优化 (repaint和reflow)

    本篇文章,小编将为大家介绍,有关javascript的性能优化(repaint和reflow),有需要的朋友可以参考一下
    2013-04-04
  • Web开发之JavaScript

    Web开发之JavaScript

    笔者认为web开发包括设计html,javascript,css,以及一种高级语言,比如c#,java等等
    2012-03-03
  • JavaScript基础之Array forEach使用示例

    JavaScript基础之Array forEach使用示例

    这篇文章主要为大家介绍了JavaScript基础之Array forEach使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • JavaScript中的fontsize()方法使用详解

    JavaScript中的fontsize()方法使用详解

    这篇文章主要介绍了JavaScript中的fontsize()方法使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下
    2015-06-06
  • 在javaScript中关于submit和button的区别介绍

    在javaScript中关于submit和button的区别介绍

    submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了,submit和button,二者都以按钮的形式展现,看起来都是按钮,所不同的是type属性和处发响应的事件上
    2013-10-10
  • JavaScript基础之对象

    JavaScript基础之对象

    这篇文章主要介绍了如何理解JavaScript中的对象,帮助大家更好的学习JavaScript,感兴趣的朋友可以了解下
    2021-11-11
  • 关于JSON的定义以及如何使用

    关于JSON的定义以及如何使用

    这篇文章主要介绍了关于JSON的定义以及如何使用,JSON 的名称中虽然带有JavaScript,但这是指其语法规则是参考JavaScript对象的,而不是指只能用于JavaScript语言,需要的朋友可以参考下
    2023-07-07
  • JS获取表单中的元素和取值方法

    JS获取表单中的元素和取值方法

    这篇文章介绍了JS获取表单中的元素和取值方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-04-04

最新评论