当前位置:首页 > 日记 > 正文

JavaScript的继承实现小结

JavaScript的继承实现小结

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

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

相关文章

如何正确理解javascript的模块化

如何正确理解javascript的模块化

模块化,如何正确,电脑软件,javascript,模块化在项目中十分的重要,一个复杂的项目肯定有很多相似的功能模块,如果每次都需要重新编写模块肯定既费时又耗力。但是引用别人编写模块的前提是要有统一的“打开姿势”,如果每个人有各自的写法,那么肯…

javaScript和jQuery自动加载简单代

javaScript和jQuery自动加载简单代

代码实现,方法,自动加载,简单,电脑软件,在此之前我们给大家整理过用javaScript和jQuery自动加载的几种方法,大家可以参考一下:javaScript 页面自动加载事件详解一、JavaScript自动加载①在文本中用onload: 当页面中所有内容(包括图片)加载完后再…

wps怎么进行文字识别wps进行文字识

wps怎么进行文字识别wps进行文字识

方法,文字识别,文字,图片,输入文字,  wps文字有一个能对图片文字进行识别的功能,你知道这个功能吗?下面小编来告诉你wps进行图片文字识的方法,希望对你有帮助!wps进行图片文字识别的方法wps进行图片文字识别的方法步骤图1wps进行图片文字识…

ppt中怎么插入时间并同步更新ppt中

ppt中怎么插入时间并同步更新ppt中

方法,步骤,同步更新,时间,电脑软件,  ppt中怎么插入时间并同步更新?在制作Powerpoint幻灯片时,需要插入当前时间日期,如果手动输入,那只是一串数字而已,并不能实现同步更新。那么下面小编就教你ppt中插入时间并同步更新的方法。ppt中插入时间…

ppt2010怎么设置单击就实现放大缩

ppt2010怎么设置单击就实现放大缩

单击,放大缩小,设置,方法,图片,  PPT是用于设计制作专家报告、教师授课、产品演示、广告宣传的电子版幻灯片。下面小编教你通过插入对象法实现单击图片放大缩小效果。例如,当鼠标点击图片的时候,图片就放大,当鼠标再次点击图片的时候,图片就…

excel中两列求和的方法教程

excel中两列求和的方法教程

教程,方法,公式,电脑软件,excel,    在excel 中的AB两列各有数据,求两列分别相加的和要怎么求呢?下面小编给你分享了excel中两列求和的教程,以供大家阅读和学习。excel中两列求和的教程两列求和步骤1:例如:要求【A】列和【C】列的和,结果方…

excel2010 模拟分析的教程excel201

excel2010 模拟分析的教程excel201

模拟,教程,电脑软件,strong,  在Excel中录入好数据以后都需要对数据进行分析统计,分析的时候通常需要的是公式的运用。下面是由小编分享的excel2010 模拟分析的教程,希望对你有用。excel2010 模拟分析的教程模拟分析步骤1:设置公式。在b5中…

Word文档中smartart图形功能介绍是

Word文档中smartart图形功能介绍是

图形,文档,详细介绍,功能,电脑软件,  在Word文档中smartart图形的功能非常强大,什么是smartart图形呢?接下来帮助用户认识了解word smartart图形功能。以下是小编为您带来的关于smartart图形功能详细介绍,希望对您有所帮助。smartart图形功…

Excel将当前数据添加到筛选器筛选

Excel将当前数据添加到筛选器筛选

筛选,数据,筛选器,技巧,电脑软件,  有这样一份数据,现在想用Excel的筛选功能,将10多岁和20多岁的人筛选出来。那么应该怎么做呢?以下是小编为您带来的关于Excel将当前数据添加到筛选器筛选技巧,希望对您有所帮助。Excel将当前数据添加到筛选…

excel2007怎样筛选并删除

excel2007怎样筛选并删除

筛选,删除,方法,内容,图片,  在Excel中,有时候输入的数据会非常之多,有些情况需要对条件满足的内容进行删除,这时我们需要用到Excel中的筛选及删除功能,下面给大家分享,希望小编整理的资料对大家有用。excel2007筛选图片内容并删除的方法1:选中…

怎么将ppt2013里面的文字转到Word

怎么将ppt2013里面的文字转到Word

文字,方法,转到,电脑软件,strong,  PPT演讲的成功,不单单是取决于PPT使用和制作技术方面的技巧,还有制作思路方面的学问、演讲方法与技巧等诸多方面。现在很多大型公司,进行PPT幻灯片演讲是一种主流了。演讲结束,将演示文稿发给观众查看,一…

WPS表格如何给某列的所有数值批量

WPS表格如何给某列的所有数值批量

增减,数值,批量,表格,电脑软件,  给某一个列的所有数值增加一个相同的固定值,在某些情况下还是比较实用的。以下是小编为您带来的关于WPS表格给某列的所有数值批量增减相同的固定值,希望对您有所帮助。WPS表格给某列的所有数值批量增减相同…