JavaScript是如何实现继承的(六种方式)


Posted in Javascript onMarch 31, 2016

前言:大多OO语言都支持两种继承方式: 接口继承和实现继承 ,而ECMAScript中无法实现接口继承,ECMAScript只支持实现继承,而且其实现继承主要是依靠 原型链 来实现。

1.原型链

基本思想:利用原型让一个引用类型继承另外一个引用类型的属性和方法。

构造函数,原型,实例之间的关系:每个构造函数都有一个原型对象,原型对象包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。

原型链实现继承例子:

function SuperType() {
this.property = true;
}
SuperType.prototype.getSuperValue = function() {
return this.property;
}
function subType() {
this.property = false;
}
//继承了SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function (){
return this.property;
}
var instance = new SubType();
console.log(instance.getSuperValue());//true

2.借用构造函数

基本思想:在子类型构造函数的内部调用超类构造函数,通过使用call()和apply()方法可以在新创建的对象上执行构造函数。

例子:

function SuperType() {
this.colors = ["red","blue","green"];
}
function SubType() {
SuperType.call(this);//继承了SuperType
}
var instance1 = new SubType();
instance1.colors.push("black");
console.log(instance1.colors);//"red","blue","green","black"
var instance2 = new SubType();
console.log(instance2.colors);//"red","blue","green"

3.组合继承

基本思想:将原型链和借用构造函数的技术组合在一块,从而发挥两者之长的一种继承模式。

例子:

function SuperType(name) {
this.name = name;
this.colors = ["red","blue","green"];
}
SuperType.prototype.sayName = function() {
console.log(this.name);
}
function SubType(name, age) {
SuperType.call(this,name);//继承属性
this.age = age;
}
//继承方法
SubType.prototype = new SuperType();
Subtype.prototype.constructor = Subtype;
Subtype.prototype.sayAge = function() {
console.log(this.age);
}
var instance1 = new SubType("EvanChen",18);
instance1.colors.push("black");
consol.log(instance1.colors);//"red","blue","green","black"
instance1.sayName();//"EvanChen"
instance1.sayAge();//18
var instance2 = new SubType("EvanChen666",20);
console.log(instance2.colors);//"red","blue","green"
instance2.sayName();//"EvanChen666"
instance2.sayAge();//20

4.原型式继承

基本想法:借助原型可以基于已有的对象创建新对象,同时还不必须因此创建自定义的类型。

原型式继承的思想可用以下函数来说明:

function object(o) {
function F(){}
F.prototype = o;
return new F();
}

例子:

var person = {
name:"EvanChen",
friends:["Shelby","Court","Van"];
};
var anotherPerson = object(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");
var yetAnotherPerson = object(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
console.log(person.friends);//"Shelby","Court","Van","Rob","Barbie"

ECMAScript5通过新增Object.create()方法规范化了原型式继承,这个方法接收两个参数:一个用作新对象原型的对象和一个作为新对象定义额外属性的对象。

var person = {
name:"EvanChen",
friends:["Shelby","Court","Van"];
};
var anotherPerson = Object.create(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");
var yetAnotherPerson = Object.create(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
console.log(person.friends);//"Shelby","Court","Van","Rob","Barbie"

5.寄生式继承

基本思想:创建一个仅用于封装继承过程的函数,该函数在内部以某种方式来增强对象,最后再像真正是它做了所有工作一样返回对象。

例子:

function createAnother(original) {
var clone = object(original);
clone.sayHi = function () {
alert("hi");
};
return clone;
}
var person = {
name:"EvanChen",
friends:["Shelby","Court","Van"];
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi();///"hi"

6.寄生组合式继承

基本思想:通过借用函数来继承属性,通过原型链的混成形式来继承方法

其基本模型如下所示:

function inheritProperty(subType, superType) {
var prototype = object(superType.prototype);//创建对象
prototype.constructor = subType;//增强对象
subType.prototype = prototype;//指定对象
}

例子:

function SuperType(name){
this.name = name;
this.colors = ["red","blue","green"];
}
SuperType.prototype.sayName = function (){
alert(this.name);
};
function SubType(name,age){
SuperType.call(this,name);
this.age = age;
}
inheritProperty(SubType,SuperType);
SubType.prototype.sayAge = function() {
alert(this.age);
}

以上内容给大家介绍了javascript实现继承的六种方式,希望对大家有所帮助!

Javascript 相关文章推荐
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
Apr 20 Javascript
[原创]推荐10款最热门jQuery UI框架
Aug 19 Javascript
JavaScript中的toLocaleDateString()方法使用简介
Jun 12 Javascript
js实现加载更多功能实例
Oct 27 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
Mar 13 Javascript
js原生日历的实例(推荐)
Oct 31 Javascript
vue项目中使用axios上传图片等文件操作
Nov 02 Javascript
vue router使用query和params传参的使用和区别
Nov 13 Javascript
通过js动态创建标签,并设置属性方法
Feb 24 Javascript
Node.js 使用jade模板引擎的示例
May 11 Javascript
JavaScript设计模式之命令模式实例分析
Jan 16 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
Apr 24 Javascript
JS判断元素是否在数组内的实现代码
Mar 30 #Javascript
javascript检查某个元素在数组中的索引值
Mar 30 #Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
Mar 30 #Javascript
谈一谈js中的执行环境及作用域
Mar 30 #Javascript
js实现(全选)多选按钮的方法【附实例】
Mar 30 #Javascript
用JS生成UUID的方法实例
Mar 30 #Javascript
如何通过js实现图片预览功能【附实例代码】
Mar 30 #Javascript
You might like
php旋转图片90度的方法
2013/11/07 PHP
thinkphp实现163、QQ邮箱收发邮件的方法
2015/12/18 PHP
php实用代码片段整理
2016/11/12 PHP
PHP实现图片压缩
2020/09/09 PHP
ajax 同步请求和异步请求的差异分析
2011/07/04 Javascript
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
js操作iframe的一些方法介绍
2013/06/25 Javascript
window.open 以post方式传递参数示例代码
2014/02/27 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
2014/03/03 Javascript
jQuery中Ajax的get、post等方法详解
2015/01/20 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
2015/12/03 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
2020/04/16 Javascript
js 声明数组和向数组中添加对象变量的简单实例
2016/07/28 Javascript
原生js编写焦点图效果
2016/12/08 Javascript
JS验证全角与半角及相互转化的介绍
2017/05/18 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
2018/07/05 Javascript
vue自定义指令用法经典实例小结
2019/03/16 Javascript
[01:32]2016国际邀请赛中国区预选赛IG战队首日赛后采访
2016/06/27 DOTA
python getopt 参数处理小示例
2009/06/09 Python
[原创]Python入门教程4. 元组基本操作
2018/10/31 Python
Python 装饰器@,对函数进行功能扩展操作示例【开闭原则】
2019/10/17 Python
python找出列表中大于某个阈值的数据段示例
2019/11/24 Python
python3安装OCR识别库tesserocr过程图解
2020/04/02 Python
python爬虫基础知识点整理
2020/06/02 Python
Python SMTP发送电子邮件的示例
2020/09/23 Python
CSS3实现银灰色动画效果的导航菜单代码
2015/09/01 HTML / CSS
LORAC官网:美国彩妆品牌
2019/08/27 全球购物
美国家庭鞋店:Shoe Sensation
2019/09/27 全球购物
Levi’s西班牙官方网站:李维斯,著名的牛仔裤品牌
2020/08/20 全球购物
枚举与#define宏的区别
2014/04/30 面试题
违反学校规定检讨书
2014/01/18 职场文书
搞笑获奖感言
2014/01/30 职场文书
人事专员岗位职责范本
2014/03/04 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
五年级语文教学反思
2016/03/03 职场文书