javascript的继承方法
一、构造函数继承
该方法最简单,使用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的继承方法的更多相关文章
- javaScript面向对象继承方法经典实现
转自原文javaScript面向对象继承方法经典实现 JavaScript的出现已经将近20多年了,但是对这个预言的褒贬还是众说纷纭.很多人都说JavaScript不能算是面向对象的变成语言.但是Ja ...
- JavaScript面向对象继承方法
JavaScript的出现已经将近20多年了,但是对这个预言的褒贬还是众说纷纭.很多人都说JavaScript不能算是面向对象的变成语言.但是JavaScript的类型非常松散,也没有编译器.这样一来 ...
- javascript实现继承3种方式: 原型继承、借用构造函数继承、组合继承,模拟extends方法继承
javascript中实现继承的三种方式:原型继承.借用构造函数继承.混合继承: /* js当中的继承 js中 构造函数 原型对象 实力对象的关系: 1 构造函数.prototype = 原型对象 2 ...
- JavaScript类继承, 用什么方法好
JavaScript类继承, 用什么方法好 一个实例: 基类Car: function Car(color, year) { this.name = "car"; this.col ...
- JavaScript 继承——三种继承方法及其优劣
原文地址 本文内容 目的 继承的第一步--最简单的继承 私有变量/成员和原型 三种继承方式及其优劣 基本的原型继承 Yahoo JavaScript 模块模式 创建闭包的构造函数 三种方法的代码执 ...
- Javascript模拟继承(赠送.net吐槽一段)
首先吐槽一句,今年的就业形势很不乐观啊,特别是搞.net的(相对java),特特别是还没出校门没有正式工作经验的,找个实习很难,前些天接了个面试电话,上来就质疑我“你一个在校大学生怎么可能做了那么多项 ...
- 详解Javascript的继承实现(二)
上文<详解Javascript的继承实现>介绍了一个通用的继承库,基于该库,可以快速构建带继承关系和静态成员的javascript类,好使用也好理解,额外的好处是,如果所有类都用这种库来构 ...
- javascript 中继承实现方式归纳
转载自:http://sentsin.com/web/1109.html 不同于基于类的编程语言,如 C++ 和 Java,javascript 中的继承方式是基于原型的.同时由于 javascrip ...
- JavaScript之继承(原型链)
JavaScript之继承(原型链) 我们知道继承是oo语言中不可缺少的一部分,对于JavaScript也是如此.一般的继承有两种方式:其一,接口继承,只继承方法的签名:其二,实现继承,继承实际的方法 ...
随机推荐
- cmanformat - 不是命令啦,是个演示文件
描述 DESCRIPTION cmanformat 是 man pages 格式的演示文件. 由于系统不同会有差异.在 XWindow 下会好些. __________________________ ...
- vs code 格式化 美化 html js css 插件 Beautify
安装 Beautify 插件 然后 F1 输入 Beautify file 回车即可
- 谈谈JVM内存区域的划分
我们知道,计算机CPU和内存的交互是最频繁的,内存是我们的高速缓存区,用户磁盘和CPU的交互,而CPU运转速度越来越快,磁盘远远跟不上CPU的读写速度,才设计了内存,用户缓冲用户IO等待导致CPU的等 ...
- R-FCN:Object Detection via Region-based Fully Convolutional Networks
fast.faster这些网络都可以被roi-pooling层分成两个子网络:1.a shared,'fully convolutional' subnetwork 2.an roi-wise sub ...
- WebDriver的多浏览器测试的浏览器驱动程序
1.在使用IE浏览器进行WebDriver自动化测试之前,需要从http://docs.seleniumhq.org/download/网站上下载一个WebDriver链接IE浏览器的驱动程序,文件名 ...
- Python的前世今生
放弃 拾起 放弃 拾起 最终决定好好的编写一次Python的学习笔记 人生苦短,我用Python --------------Life is short, you need Python 再不抓紧,就 ...
- Elasticsearch分布式机制和document分析
1. Elasticsearch对复杂分布式机制的透明隐藏特性 1.1)分片机制 1.2)集群发现机制 1.3)shard负载均衡 1.4)shard副本,请求路由,集群扩容,shard重分配 2. ...
- css一个div设置多个背景图片
html:定义一个div <div class="item__content"></div> css:样式 .item__content { positio ...
- vue 画二维码
首先安装一下相关的插件 qrcode2 npm install --save qrcode2 然后在需要画二维码的页面引入一下 import QRCode from 'qrcode2' 最后在meth ...
- Go:二分查找
package main import "fmt" func BinarySearch(arr *[5]int, leftIndex int, rightIndex int, fi ...