一、构造函数继承

  该方法最简单,使用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. Java入门第39课——猜字母游戏之实现字母生成方法

    问题        实现猜字母游戏中的字母生成方法,即,随机生成5个不同的字母作为猜测的结果. 方案        实现generate方法,首先声明一个字符类型的数组,用于存储26个大写字母,然后声 ...

  2. sql中的日期时间处理

    每个数据库,不同的日期格式化: 1.mysql 2.sqlserver 使用Convert()函数: select convert(char(10),GetDate(),120) as Date 第3 ...

  3. HTML head meta标签详细

    <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> <html lang="zh-cmn-Hans"&g ...

  4. 【BIEE】新建用户,并且赋予组BIconsumer,访问BIpublisher报表报错:检索数据xml时出错

    问题描述 今天新建一个用户用户查看报表,并且赋予该用户属于BIConsumer组,但是在访问报表的时候出现以下两个错: 1.xdo格式类的报表 2.RTF模板制作的报表 解决方案: 出现这个问题的原因 ...

  5. 梦回----32位CPU和64位CPU的通用寄存器

    1 32位Intel的CPU通用寄存器 32位CPU所含有的寄存器有:4个数据寄存器(EAX.EBX.ECX和EDX):2个变址和指针寄存器(ESI和EDI):2个指针寄存器(ESP和EBP):6个段 ...

  6. [Python3网络爬虫开发实战] 1.2.2-Selenium的安装

    Selenium是一个自动化测试工具,利用它我们可以驱动浏览器执行特定的动作,如点击.下拉等操作.对于一些JavaScript渲染的页面来说,这种抓取方式非常有效.下面我们来看看Selenium的安装 ...

  7. 又是latch: cache buffers chains惹得祸

    前言 一大早,客户给我打电话说: xx,应用很慢,查询数据总是超时,让我看看... 根据多年DBA经验,首当其冲的肯定是去查询数据库在这段时间都在干嘛. 分析 导出awr报告分析 1). 数据库在此时 ...

  8. Go:冒泡排序

    package main import "fmt" func BubbleSort(arr *[5]int) { fmt.Println("排序前:", *ar ...

  9. 技能CD 效果 shader

    技能CD特效 这个效果主要是利用反正切函数完成.atan2(x,y)的返回值是[-PI,PI],这个支持4个象限的反正切函数.关于圆角计算,在上篇文章中有介绍. 现在,我们来看看反正切函数的效果: 在 ...

  10. this关键字的由来及使用

    Student.java /* * 学生类 * * 起名字我们要求做到见名知意. * * 如果有局部变量名和成员变量名相同,在局部使用的时候,采用的是就近原则. * *我们有没有办法吧局部变量的nam ...