L - JavaScript继承
类式继承(原型链继承)
实现
function A(){this.a='a';this.arr=[1,2];
}
A.prototype.funA=function(){console.log("我是A的方法");}
function B(){this.b='b';
}
B.prototype.funB=function(){console.log("我是B的方法");
}
B.prototype=new A();var b1=new B();
由于A的实例能够访问A.prototype
,所以我们可以设置B.prototype
指向A的实例。所以B的实例可以访问A的实例以及A.prototype
,实现继承
缺点:
1.由于对象类型的赋值是引用赋值,如果父类A实例化过程中有引用类型,那么子类B的实例的这个属性都指向同一内存空间。
function A(){this.a='a';this.arr=[1,2];
}
A.prototype.funA=function(){console.log("我是A的方法");}
function B(){this.b='b';
}
B.prototype.funB=function(){console.log("我是B的方法");
}
B.prototype=new A();var b1=new B();
var b2=new B();b1.arr.push(3);
console.log(b1.arr); // [1, 2, 3]
console.log(b2.arr); // [1, 2, 3]
2.如果父类的实例需要传入一些参数,那么两个子类实例初始化时某一属性值相同
function A(year){this.year=year;
}
function B(){this.b='b';
}
B.prototype=new A(18);var b1=new B();
var b2=new B();
console.log(b1.color); // 18
console.log(b2.color); // 18
3.B.prototype
中constructor指向不正确,因为B.prototype
指向了一个A的实例,所以本应指向B的constructor指向了A
function A(year){this.year=year;
}
function B(){this.b='b';
}
B.prototype=new A(18);var b1=new B();b1.constructor===A // true
构造函数继承(借用构造函数继承)
实现
function A(color){this.a='a';this.arr=[1,2];this.color=color;
}
A.prototype.funA=function(){console.log("我是A的方法");}
function B(color){A.call(this,color);
}
B.prototype.funB=function(){console.log("我是B的方法");
}var b1=new B("red");console.log(b1) // {a: "a", arr: Array(2), color: "red"}
优点
解决了引用赋值问题,也可以自定义一些属性了,constructor也指向B了,即解决了类式继承的第一个、第二个问题以及第三个问题
缺点
很明显,B除了调用了A这个函数外并没有和A扯上什么关系,原型链是不通的(无法访问到应该作为父类的A的prototype属性),我甚至并不觉得这是一种继承方式,但它为下面两种方法奠定了基础
b1.__proto__===B.prototype // true
b1.__proto__.__proto__===Object.prototype // true
组合继承
说白了,就是将上述两种方法的长处组合到一起,利用原型链实现原型属性和方法的继承,通过借用构造函数实现对实例属性的继承
实现
function A(color){this.a='a';this.arr=[1,2];this.color=color;
}
A.prototype.funA=function(){console.log("我是A的方法");}
function B(color,age){// 通过借用构造函数实现对实例属性的继承A.apply(this,[color]);this.age=age;
}// 利用原型链实现原型属性和方法的继承
B.prototype=new A();
B.prototype.constructor=B;var b1=new B('red',18);
优点
既通过在原型上定义方法实现了函数复用,又能够保证每个实例都有它自己的属性
缺点
调用了两次父类的构造函数
寄生组合式继承(此方法最好)
实现
function A(color){this.a='a';this.arr=[1,2];this.color=color;
}
A.prototype.funA=function(){console.log("我是A的方法");}
function B(color,age){A.apply(this,[color]);this.age=age;
}B.prototype=Object.create(A.prototype);
B.prototype.constructor=B;var b1=new B('red',18);
优点
只需访问一次父类的构造函数,避免了在子类的prototype上创建不必要、多余的属性
L - JavaScript继承相关推荐
- JavaScript继承详解(四)
文章截图 - 更好的排版 在本章中,我们将分析Douglas Crockford关于JavaScript继承的一个实现 - Classical Inheritance in JavaScript. C ...
- JavaScript继承详解(四) 转
在本章中,我们将分析Douglas Crockford关于JavaScript继承的一个实现 - Classical Inheritance in JavaScript. Crockford是Java ...
- Javascript继承机制的设计思想
我一直很难理解Javascript语言的继承机制. 它没有"子类"和"父类"的概念,也没有"类"(class)和"实例" ...
- 浅谈JavaScript继承
前言 关于JavaScript继承相关的定义和方法网上已经有很多解释啦,本菜鸟就不抄抄写写惹人嫌了,本文主要探讨三种基本的继承方式并且给出优化方案. 正文 借助构造函数实现继承 function Pa ...
- 浅谈javascript继承【读javascript设计模式第四章节继承有感】
javascript继承,无任是类式继承,原型式继承还是渗元式继承都是通过不同方法去围绕着prototype转,简单分析下三种不同继承方法是如何围绕prototype转的 一:类似继承,先上关键代码 ...
- 理解JavaScript继承(二)
理解JavaScript继承(二) 5.寄生式继承 function object(o) {function F() {} F.prototype = o; return new F(); }func ...
- 探寻完美 之 JavaScript继承
本文并不想探讨JavaScript的面向对象特性(如果有兴趣,可参看我的<领悟面向对象JavaScript>),也不会涉及全部的面向对象概念,只是试图寻找一个还未被任何人发现的" ...
- 【JavaScript】重温Javascript继承机制
上段时间,团队内部有过好几次给力的分享,这里对西风师傅分享的继承机制稍作整理一下,适当加了些口语化的描述,留作备案. 一.讲个故事吧 澄清在先,Java和Javascript是雷锋和雷峰塔的关系.Ja ...
- [转]JavaScript继承详解
原文地址:http://www.cnblogs.com/sanshi/archive/2009/07/08/1519036.html 面向对象与基于对象 几乎每个开发人员都有面向对象语言(比如C++. ...
最新文章
- 数字化时代,如何解决企业协同办公的问题?
- SQL Server中通过设置SET NOCOUNT来优化存储过程
- 生活很急躁,史前也一样
- 【数据挖掘】数据挖掘简介 ( 数据挖掘引入 | KDD 流程 | 数据源要求 | 技术特点 )
- mac 下 使用 brew 配置 环境
- Python中的 optparse模块
- Web页面适配移动端方案研究
- 三菱plc选型手册_模拟量是什么?PLC和模拟量是如何转换的?
- linux打开pythonshall,linux系统shell脚本后台运行python程序
- python 金字塔的程序_python生成金字塔
- 力扣-1022. 从根到叶的二进制数之和
- 【高斯消元】BZOJ3503 [Cqoi2014]和谐矩阵
- clickhouse 同步mysql_ClickHouse 常用管理命令
- Linux下Docker命令自动补全
- php数字验证码代码,php中文字母数字验证码实现代码
- java excel 冻结_如何实现表格的首行冻结2
- 彻底禁止电脑弹出广告的方法(以2345好压为例)
- 组队学习-NLP实践-中文预训练模型泛化能力挑战赛(文本分类,bert)
- android Codec-specific data
- hdu 2121 最小树形图 +虚根