谈JavaScript的继承

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

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

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


1

2

3

4

5

6

7

8

9

10


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对象之前，我们可以先定义一个构造函数。


1

2

3

4

5

6

7

8

9

10


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;

    }

}

然后，定义一个对象

1 a = new A(1, 2);

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

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

0x2.JavaScript的prototype

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

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

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

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


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18


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的例子：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22


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类型的对象

1 b=new B();

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

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

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

0x3.JavaScript的构造函数绑定

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


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17


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，还可以实现多重继承


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20


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

时间： 2024-07-30 20:29:04

谈JavaScript的继承的相关文章

浅谈JavaScript中继承的实现

  谈到js中的面向对象编程,都有一个共同点,选择原型属性还是构造函数,两者各有利弊,而就片面的从js的对象创建以及继承的实现两个方面来说,官方所推荐的是两个相结合,各尽其责,各取其长,在前面的例子中,我已就在JavaScript中对象创建的方法做了一些总结,下面就其继承来道说一二:   1:原型链继承: 每一个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象内部的指针(默认的原型,所有默认类型都继承了Object,而这个继承也是用过原型链实现) fu

浅谈JavaScript的继承

我想我的JavaScript的基本语法基础掌握的差不多了,现在没时间,毕竟那么多考试等着我.等到寒假我就把犀牛书过一遍. 本来就有那么多考试,但是我还是忍不住写点JavaScript的代码.我认为我的基础差不多了,我就把那本<JavaScript设计模式>拿出来看,我之前是看不懂的. 然后我想我现在应该看得懂了吧.就特意找了继承这一章看一看. ——————————————————————我是厉害的分割线———————————————————————————————————————— 只能说勉强

浅谈javascript继承【读javascript设计模式第四章节继承有感】

javascript继承,无任是类式继承,原型式继承还是渗元式继承都是通过不同方法去围绕着prototype转,简单分析下三种不同继承方法是如何围绕prototype转的 一:类似继承,先上关键代码 function extend(subClass,supClass){ var fn = function(){}; fn.prototype = supClass.prototype; subClass.prototype = new fn(); subClass.prototype.constr

再谈javascript面向对象编程

前言:虽有陈皓<Javascript 面向对象编程>珠玉在前,但是我还是忍不住再画蛇添足的补上一篇文章,主要是因为javascript这门语言魅力.另外这篇文章是一篇入门文章,我也是才开始学习Javascript,有一点心得,才想写一篇这样文章,文章中难免有错误的地方,还请各位不吝吐槽指正 吐槽Javascript 初次接触Javascript,这门语言的确会让很多正规军感到诸多的不适,这种不适来自于Javascript的语法的简练和不严谨,这种不适也 来自Javascript这个悲催的名称,

《浅谈JavaScript系列》系列技术文章整理收藏

<浅谈JavaScript系列>系列技术文章整理收藏 1浅谈JavaScript中面向对象技术的模拟 2浅谈javascript函数劫持[转自xfocus]第1/3页 3浅谈javascript 面向对象编程 4老鱼 浅谈javascript面向对象编程 5浅谈javascript的数据类型检测 6浅谈Javascript嵌套函数及闭包 7根据一段代码浅谈Javascript闭包 8浅谈JavaScript编程语言的编码规范 9浅谈Javascript面向对象编程 10浅谈JavaScript

浅谈javascript的原型及原型链

浅谈javascript的原型及原型链 这里,我们列出原型的几个概念,如下: prototype属性 [[prototype]] __proto__ prototype属性 只要创建了一个函数,就会为该函数创建一个prototype属性,指向该函数的原型对象.实例对象是不会拥有该属性的.默认情况下,该原型对象也会获得一个constructor属性,该属性包含一个指针,指向prototype属性所在的函数. Person.prototype.constructor===Person [[proto

javascript类继承

function extend(subClass, superClass) { var f = function() {}; f.prototype = superClass.prototype; subClass.prototype = new f(); subClass.superClass = superClass.prototype; } var parent = function (name, age) { this._name = name; this._age = age; };

javascript深度克隆与javascript的继承实现

1.javascript深度克隆: //注意这里的对象包括object和array function cloneObject(obj){ var o = obj.constructor === Array ? [] : {}; for(var key in obj){ if(obj.hasOwnProperty(key)){ o[key] = typeof obj[key] === "object" ? cloneObject(obj[key]) : obj[key]; } } ret

JavaScript原型继承的陷阱

JavaScript原型继承的陷阱 JavaScript默认采用原型继承.虽然没有类(class)的概念,它的函数(function)可以充当构造器(constructor).构造器结合this,new可以构建出类似Java的类.因此,JavaScript通过扩展自身能模拟类式(class-based)继承. JavaScript和其它面向对象语言一样,对象类型采用引用方式.持有对象的变量只是一个地址,而基本类型数据是值.当原型上存储对象时,就可能有一些陷阱. 先看第一个例子 var creat