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也是如此.一般的继承有两种方式:其一,接口继承,只继承方法的签名:其二,实现继承,继承实际的方法 ...
随机推荐
- Asp.Net MVC中Controller、Action、View是如何激活调用的
上篇我们介绍了MVC的路由,知道在注册路由的时候会创建一个MvcHandler将其和Url规则一起放入到了RouteCollection中,之后请求通过UrlRoutingModule,根据当前的UR ...
- BZOJ4318: OSU! (概率DP)
题意:一个串 给出每个字符为1的可能性 否则为0 一段连续的1能获得长度的立方的收益 问总收益的期望 题解:设x_i为到第i位时连续的1的期望长度 由i-1递推来的贡献 如果这一位是0没有贡献 如果是 ...
- No-3.算数运算符
01. 算数运算符 算数运算符是 运算符的一种 是完成基本的算术运算使用的符号,用来处理四则运算 运算符 描述 实例 + 加 10 + 20 = 30 - 减 10 - 20 = -10 * 乘 1 ...
- css hack解决方案
现在大家做项目的时候估计很多都已经不怎么考虑兼容问题,大多数的公司都已经舍弃ie7.8了,都是从ie9+开始,所以说不会有那么多的兼容问题需要去解决了,但是由于本人力求完美的工作习惯,做项目的时候还是 ...
- [Python3网络爬虫开发实战] 4-解析库的使用
上一章中,我们实现了一个最基本的爬虫,但提取页面信息时使用的是正则表达式,这还是比较烦琐,而且万一有地方写错了,可能导致匹配失败,所以使用正则表达式提取页面信息多多少少还是有些不方便. 对于网页的节点 ...
- [Python3网络爬虫开发实战] 1.4.1-MySQL的安装
MySQL是一个轻量级的关系型数据库,本节中我们来了解下它的安装方式. 1. 相关链接 官方网站:https://www.mysql.com/cn 下载地址:https://www.mysql.com ...
- Python之面向对象元类
Python之面向对象元类 call方法: class People: def __init__(self,name): self.name=name # def __call__(self, *ar ...
- element-UI 多表单重置的时候的坑
问题细化一下是这样的:比如我有一个用来修改数据的表单,第一条数据是{name: 'Xixi', age: 12},打开表单后就有两个输入框分别填的是Xixi和12,此时我修改Xixi为Haha,调用t ...
- span-wise drag/lift forces of cylinder
span-wise drag/lift forces of cylinder SR Description: Dear Sir/Madam, I am trying to simulate a 3 ...
- fielddata breaker与cache size
breaker的估算,是根据语句以及上层的结果数,加上固定的值,不准确. cache.size是cache到结果的size,准确. 所以,配置breaker不能拦截占用内存的聚合查询,而配置cache ...