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 相关文章推荐
ext 同步和异步示例代码
Sep 18 Javascript
js 三级关联菜单效果实例
Aug 13 Javascript
与Math.pow 相反的函数使用介绍
Aug 04 Javascript
基于jQuery实现网页进度显示插件
Mar 04 Javascript
Vue.js bootstrap前端实现分页和排序
Mar 10 Javascript
Js实现京东无延迟菜单效果实例(demo)
Jun 02 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
Aug 08 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
Oct 23 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
Element Cascader 级联选择器的使用示例
Jul 27 Javascript
基于vue 动态菜单 刷新空白问题的解决
Aug 06 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实现mysql同步的实现方法
2009/10/21 PHP
php实现RSA加密类实例
2015/03/26 PHP
php筛选不存在的图片资源
2015/04/28 PHP
THINKPHP5.1 Config的配置与获取详解
2020/06/08 PHP
JavaScript中的对象和原型(一)
2016/08/12 Javascript
vue制作加载更多功能的正确打开方式
2016/10/12 Javascript
VUE开发一个图片轮播的组件示例代码
2017/03/06 Javascript
简单谈谈关于 npm 5.0 的新坑
2017/06/08 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
2019/06/24 Javascript
Postman内建变量常用方法实例解析
2020/07/28 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
Vue中inheritAttrs的使用实例详解
2020/12/31 Vue.js
Python(Tornado)模拟登录小米抢手机
2013/11/12 Python
Python标准库之随机数 (math包、random包)介绍
2014/11/25 Python
python使用自定义user-agent抓取网页的方法
2015/04/15 Python
Python实现列表删除重复元素的三种常用方法分析
2017/11/24 Python
python中matplotlib的颜色及线条控制的示例
2018/03/16 Python
Python入门学习指南分享
2018/04/11 Python
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
Ubuntu下Anaconda和Pycharm配置方法详解
2019/06/14 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
pycharm无法导入本地模块的解决方式
2020/02/12 Python
Python requests获取网页常用方法解析
2020/02/20 Python
Django Model层F,Q对象和聚合函数原理解析
2020/11/12 Python
美国著名珠宝品牌之一:Jared The Galleria Of Jewelry
2016/10/01 全球购物
Algenist奥杰尼官网:微藻抗衰老护肤品牌
2017/07/15 全球购物
Java工程师面试集锦之Spring框架
2013/06/16 面试题
JavaScript实现页面动态验证码的实现示例
2021/03/23 Javascript
杠杆的科学教学反思
2014/01/10 职场文书
小学生环保标语
2014/06/13 职场文书
医院护士见习期自我鉴定
2014/09/15 职场文书
关于运动会广播稿50字
2014/10/18 职场文书
七年级生物教学反思
2016/02/20 职场文书
Java框架入门之简单介绍SpringBoot框架
2021/06/18 Java/Android
一篇文章带你了解Python和Java的正则表达式对比
2021/09/15 Python
剧场版《转生恶役只好拔除破灭旗标》公开最新视觉图 2023年上映
2022/04/02 日漫