一、构造函数继承

  该方法最简单,使用call或者apply方法,将父对象的构造函数绑定到子对象上。

function Parent(name){
this.name = name;
this.color = ['red','green'];
this.getInfo = function(){
alert(this.name + '喜欢的颜色:'+ this.color)
}
} function Child(name){
Parent.call(this,name);
} var child1 = new Child('张三');
child1.color.push('black');
child1.getInfo();// 张三喜欢的颜色: red,green,black
var child2 = new Child('李四');
child2.getInfo(); // 李四喜欢的颜色: red,green

这样实现有一个弊端,就是每new一次,实例对象的属性和方法都会开辟内存空间,比较浪费内存,缺乏效率。

为了解决内存消耗问题,下面介绍一下原型链继承

二、原型链继承

  我们知道每一个构造函数都有一个prototype属性,指向另一个对象。这个对象的所有方法和属性都会被构造函数的实例继承。所以我们可以把不变的属性和方法定义在prototype对象上。

  

function Parent(name){
this.name = name;
this.color = ['red','green'];
}
//不变的属性或方法定义在prototype上,prototype对象上的方法是共享的, 每次new Parent()时不需要重新开辟内存空间
Parent.prototype.getInfo = function(){
alert(this.name + '喜欢的颜色:'+ this.color)
}
function Child(name){
}
Child.prototype = new Parent(); var child1 = new Child('张三'); child1.color.push('black'); //此操作会改变Parent构造函数的color属性 color值变成[red,green,black] child1.getInfo(); //undefined喜欢的颜色 : red,green,black var child2 = new Child('李四'); child2.getInfo();//undefined喜欢的颜色 : red,green,black ,

  

原型链继承存虽然解决了构造函数消耗内存的问题,但是这种继承方式存在两个问题:

  问题1: 创建子类型的实例时,无法向父类构造函数传递参数(例子中:Childh的name参数无法传给Parent中)。

  问题2:如果构造行数的属性是引用类型,并且集成后改变了其值,则父构造函数中得值会被更改(例子中的color属性被更改了)

三、混合继承(构造函数和原型结合方式)

  借鉴以上两种方式的优缺点,采用构造函数和原型结合方式

function Parent(name){
this.name = name;
this.color = ['red','green'];
}
//不变的属性或方法定义在prototype上,prototype对象上的方法是共享的, 每次new Parent()时不需要重新开辟内存空间
Parent.prototype.getInfo = function(){
alert(this.name + '喜欢的颜色:'+ this.color)
}
function Child(name){
//通过call或者apply实现继承Parent,相当于重新创建了Parent属性的副本
//Parent中的属性会copy出一份,重新开辟内存空间
Parent.call(this,name);
//Parent.apply(this,[name]);
}
Child.prototype = new Parent(); var child1 = new Child('张三');
child1.color.push('black');
child1.getInfo(); //张三喜欢的颜色 : red,green,black
var child2 = new Child('李四');
child2.getInfo();//李四喜欢的颜色 : red,green

  

javascript的继承方法的更多相关文章

  1. javaScript面向对象继承方法经典实现

    转自原文javaScript面向对象继承方法经典实现 JavaScript的出现已经将近20多年了,但是对这个预言的褒贬还是众说纷纭.很多人都说JavaScript不能算是面向对象的变成语言.但是Ja ...

  2. JavaScript面向对象继承方法

    JavaScript的出现已经将近20多年了,但是对这个预言的褒贬还是众说纷纭.很多人都说JavaScript不能算是面向对象的变成语言.但是JavaScript的类型非常松散,也没有编译器.这样一来 ...

  3. javascript实现继承3种方式: 原型继承、借用构造函数继承、组合继承,模拟extends方法继承

    javascript中实现继承的三种方式:原型继承.借用构造函数继承.混合继承: /* js当中的继承 js中 构造函数 原型对象 实力对象的关系: 1 构造函数.prototype = 原型对象 2 ...

  4. JavaScript类继承, 用什么方法好

    JavaScript类继承, 用什么方法好 一个实例: 基类Car: function Car(color, year) { this.name = "car"; this.col ...

  5. JavaScript 继承——三种继承方法及其优劣

    原文地址   本文内容 目的 继承的第一步--最简单的继承 私有变量/成员和原型 三种继承方式及其优劣 基本的原型继承 Yahoo JavaScript 模块模式 创建闭包的构造函数 三种方法的代码执 ...

  6. Javascript模拟继承(赠送.net吐槽一段)

    首先吐槽一句,今年的就业形势很不乐观啊,特别是搞.net的(相对java),特特别是还没出校门没有正式工作经验的,找个实习很难,前些天接了个面试电话,上来就质疑我“你一个在校大学生怎么可能做了那么多项 ...

  7. 详解Javascript的继承实现(二)

    上文<详解Javascript的继承实现>介绍了一个通用的继承库,基于该库,可以快速构建带继承关系和静态成员的javascript类,好使用也好理解,额外的好处是,如果所有类都用这种库来构 ...

  8. javascript 中继承实现方式归纳

    转载自:http://sentsin.com/web/1109.html 不同于基于类的编程语言,如 C++ 和 Java,javascript 中的继承方式是基于原型的.同时由于 javascrip ...

  9. JavaScript之继承(原型链)

    JavaScript之继承(原型链) 我们知道继承是oo语言中不可缺少的一部分,对于JavaScript也是如此.一般的继承有两种方式:其一,接口继承,只继承方法的签名:其二,实现继承,继承实际的方法 ...

随机推荐

  1. H5 canvas 之乱画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. wifi钓鱼之--Pumpkin

    无线钓鱼   前言:请准备一块rt3070的外接网卡 Pumpkin是一款无线安全检测工具WiFi-Pumpkin的使用,利用该工具可以伪造接入点完成中间人攻击,同时也支持一些其它的无线渗透功能.旨在 ...

  3. bat运行当前路径下程序

    批处理中获取当前路径的方法可能有好几种,具体有几种我没有研究过,本文只是对其中的两种之间的差别进行简单说明 本文涉及的两个当前路径标示为:%cd%.%~dp0 注:我的系统是win7旗舰版,其它系统没 ...

  4. 双引号" "和单引号' '区别

    双引号是字符串,单引号是字符 “\n”与'\n': 相同点: 都能起到换行作用     不同点: "\n" <=> {'\n', '\0'} '\n' <=> ...

  5. 「 HDU 1978 」 How many ways

    # 解题思路 记忆化搜索 一个点可以跳到的点,取决于它现在的能量.而且有一个显而易见的性质就是一条可行路径的终点和起点的横坐标之差加上纵坐标之差肯定小于等于起点的能量. 因为跳到一个点之后,能量和之前 ...

  6. double salary = wage = 9999.99错误

    在看书时,有这么一句表达式 double salary = wage = 9999.99; 在Linux中编译时,不能通过,提示是 error: 'wage' was not declared in ...

  7. Linux命令学习(4):gzip压缩与解压

    版权声明:本文为博主原创文章,未经允许不得转载 引子 gzip是Linux系统中最常用也是高效的压缩压缩命令.早期Linux系统中主要使用compress命令压缩,得到后缀为“.Z”的压缩文件,但是后 ...

  8. Angular网络请求的封装

    很多时候,我很喜欢angular的编码风格,特别是angular支持typescript之后,完整的生命周期,完美的钩子函数,都是别的语言所无法替代的.这里我来说说我自己的网络请求封装,某种意义上来说 ...

  9. Python之turtle库-小猪佩奇

    Python之turtle库-小猪佩奇 #!/usr/bin/env python # coding: utf-8 # Python turtle库官方文档:https://docs.python.o ...

  10. 零基础入门Python数据分析,只需要看懂这一张图,附下载链接!

    摘要 在做数据分析的过程中,经常会想数据分析到底是什么?为什么要做数据数据分析?数据分析到底该怎么做?等这些问题.对于这些问题,一开始也只是有个很笼统的认识. 最近这两天,读了一下早就被很多人推荐的& ...