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 相关文章推荐
javascript中的对象和数组的应用技巧
Jan 07 Javascript
jQuery中:checked选择器用法实例
Jan 04 Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 Javascript
JS实现DIV容器赋值的方法
Dec 14 Javascript
jQuery链式调用与show知识浅析
May 11 Javascript
AngularJS入门教程之Helloworld示例
Dec 25 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
Nov 24 Javascript
JavaScript中双符号的运算详解
Mar 12 Javascript
JavaScript 实现 Tab 点击切换实例代码
Mar 25 Javascript
简单实现js鼠标跟随效果
Aug 02 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
Oct 15 Javascript
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
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输出两个数字中间有多少个回文数的方法
2015/03/23 PHP
PHP对象克隆clone用法示例
2016/09/28 PHP
php并发加锁示例
2016/10/17 PHP
Javascript调试工具(下载)
2007/01/09 Javascript
ASP小贴士/ASP Tips javascript tips可以当桌面
2009/12/10 Javascript
jQuery实现id模糊查询的小例子
2013/03/19 Javascript
Javascript连接多个数组不用concat来解决
2014/03/24 Javascript
js判断变量初始化的三种形式及推荐用的形式
2014/07/22 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
JavaScript简单获取页面图片原始尺寸的方法
2016/06/21 Javascript
JavaScript省市区三级联动菜单效果
2016/09/21 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
2017/01/05 Javascript
微信小程序tabbar不显示解决办法
2017/06/08 Javascript
JS实现的走迷宫小游戏完整实例
2017/07/19 Javascript
js实现随机点名小功能
2017/08/17 Javascript
在vue2.0中引用element-ui组件库的方法
2018/06/21 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
jquery获取元素到屏幕四周可视距离的方法
2018/09/05 jQuery
Vue路由history模式解决404问题的几种方法
2018/09/29 Javascript
详解Vue组件之作用域插槽
2018/11/22 Javascript
微信小程序如何利用getCurrentPages进行页面传值
2019/07/01 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
2020/04/15 Javascript
微信小程序用户盒子、宫格列表的实现
2020/07/01 Javascript
Python根据区号生成手机号码的方法
2015/07/08 Python
Win7下Python与Tensorflow-CPU版开发环境的安装与配置过程
2018/01/04 Python
Python制作词云图代码实例
2019/09/09 Python
Python基本类型的连接组合和互相转换方式(13种)
2019/12/16 Python
标记环介质访问控制协议
2016/03/27 面试题
旷课检讨书3000字
2014/02/04 职场文书
防沙治沙典型材料
2014/05/07 职场文书
捐款倡议书怎么写
2014/05/13 职场文书
领导班子整改方案
2014/10/25 职场文书
幼儿园音乐教学反思
2016/02/18 职场文书
写作技巧:如何撰写商业计划书
2019/08/08 职场文书