原文

  简书原文:https://www.jianshu.com/p/78ce11762f39

大纲

  前言
  1、原型链继承
  2、借用构造函数实现继承
  3、组合模式继承
  4、原型式继承
  5、寄生式继承
  6、寄生组合式继承
  7、代码资源

前言

  继承是OO语言中的一个最为人津津乐道的概念。许多OO语言都支持两种继承方式:接口继承和实现继承。接口继承只继承方法签名,而实现继承则继承实际的方法。如前所述,由于函数没有签名,在ECMAScript中无法实现接口继承。ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现的。

1、原型链继承

  原型链是实现继承的主要方法。
  利用原型链实现继承的基本思路是:利用原型让一个引用类型继承另一个引用类型的属性和方法。

function SuperType(name){
this.name = name;
}
SuperType.prototype.sayName = function(){
return this.name;
};
function SubType(age){
this.age = age;
}
//主要代码
SubType.prototype = new SuperType('kk'); SubType.prototype.sayAge = function(){
return this.age;
};
var instance = new SubType(12);
console.log(instance);

2、借用构造函数实现继承

  借用构造函数实现继承的实现思路:在子类型构造函数的内部调用超类构造函数。

function SuperType(name){
this.name = name;
this.sayName = function() {
return this.name;
}
}
function SubType(name,age){
this.age = age;
this.sayAge = function() {
return this.age;
}
SuperType.call(this,name);
}
var instance = new SubType('kk',2);
console.log(instance);

3、组合模式继承

  组合继承,也叫作伪经典继承,指的是将原型链和借用构造函数的技术组合到一块。
  思路:使用原型链实现对原型属性和方法的继承,通过借用构造函数来实现对实例属性的继承。

function SuperType(name){
this.name = name;
}
SuperType.prototype.sayName = function(){
console.log(this.name);
};
function SubType(name,age){
//继承属性
SuperType.call(this,name);
this.age = age;
}
//继承方法
SubType.prototype = new SuperType('gg');
SubType.prototype.sayAge = function(){
console.log(this.age);
}
var instance = new SubType("kk",13);
console.log(instance);

4、原型式继承

  原型式继承:该方法没有使用严格意义上的构造函数,它的想法是借助原型可以基于已有的对象创建新的对象,同时还不必因此创建自定义类型。

function object(o){
function F(){}
F.prototype = o;
return new F();
}
var person = {
name : "kk",
age : 12
};
var extendPerson = object(person);
console.log(extendPerson);

5、寄生式继承

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

function object(o){
function F(){}
F.prototype = o;
return new F();
}
function createAnother(original){
var clone = object(original);//通过调用函数创建一个新对象
clone.sayHi = function(){//以某种方式来增强这个对象
console.log("hi");
};
return clone;//返回这个对象
}
var person = {
name : "kk",
age : 13
};
var anotherPerson = createAnother(person);
console.log(anotherPerson);

6、寄生组合式继承

  所谓寄生组合式继承:即通过借用构造函数来继承属性,通过原型链的混成形式来继承方法。
其背后的基本思路是:不必为了指定子类型的原型而调用超类型的构造函数,我们所需要的无非就是超类型原型的一个副本而已。本质上,就是使用寄生式继承来继承超类型的原型,然后再将结果指定给子类型的原型。

function object(o){
function F(){}
F.prototype = o;
return new F();
}
function inheritPrototype(subType,superType){
var prototype = object(superType.prototype);//创建对象
prototype.constructor = subType;//增强对象
subType.prototype = prototype;//指定对象
}
function SuperType(name){
this.name = name;
}
SuperType.prototype.sayName = function(){
console.log(this.name);
};
function SubType(name,age){
//继承属性
SuperType.call(this,name);
this.age = age;
}
inheritPrototype(SubType,SuperType);
SubType.prototype.sayAge = function(){
console.log(this.age);
}; var instance = new SubType('kk',15);
console.log(instance);

7、代码资源

  javaScript实例代码中的extendObject.js中包含本篇博客的代码,包含了JavaScript对象的继承的几种基本方式,希望对读者能有所帮助。

JavaScript对象的继承的更多相关文章

  1. #JavaScript对象与继承

    JavaScript对象与继承 JavaScript是我在C语言之后接触的第二门编程语言,大一暑假的时候在图书馆找了一本中国人写的JavaScript程序设计来看.那个时候在编程方面几乎还是小白,再加 ...

  2. JavaScript大杂烩4 - 理解JavaScript对象的继承机制

    JavaScript是单根的完全面向对象的语言 JavaScript是单根的面向对象语言,它只有单一的根Object,所有的其他对象都是直接或者间接的从Object对象继承.而在JavaScript的 ...

  3. JavaScript 对象 之继承对象 学习笔记

    假设,我们有个这样的需求: 两个种族,每个种族都有 名字.血量(默认200).行为(行为有 跳跃.移动速度 这些属性)等共有属性. 人族能量值比兽人多10%,兽人血量比人族多10%. 职业有战士和法师 ...

  4. web前端学习(二) javascript对象和原型继承

    目录 1. JavaScrpt对象 2. 原型对象和继承 3. 对象的克隆 (1)javascript对象 在JS中,对象是属性的容器.对于单个对象来说,都由属性名和属性值构成:其中属性名需要是标识符 ...

  5. javascript对象继承的实现

    现在有两个对象,需要实现Chinese类型对象对Person类型对象的继承. 这里分两部分,属性和方法. 属性可以直接用构造函数的方法实现继承,而方法则要通过原型链来实现继承. 先解释什么是原型链,每 ...

  6. Javascript学习6 - 类、对象、继承

    原文:Javascript学习6 - 类.对象.继承 Javasciprt并不像C++一样支持真正的类,也不是用class关键字来定义类.Javascript定义类也是使用function关键字来完成 ...

  7. Javascript实现对象的继承

    在Java和C#中,你可以简单的理解class是一个模子,对象就是被这个模子压出来的一批一批月饼.压个啥样,就得是个啥样,不能随便动,动一动就坏了.而在Javascript中,没有模子,月饼被换成了面 ...

  8. 【JavaScript】类继承(对象冒充)和原型继承__深入理解原型和原型链

    JavaScript里的继承方式在很多书上分了很多类型和实现方式,大体上就是两种:类继承(对象冒充)和原型继承. 类继承(对象冒充):在函数内部定义自身的属性的方法,子类继承时,用call或apply ...

  9. 面向对象的JavaScript --- 原型模式和基于原型继承的JavaScript对象系统

    面向对象的JavaScript --- 原型模式和基于原型继承的JavaScript对象系统 原型模式和基于原型继承的JavaScript对象系统 在 Brendan Eich 为 JavaScrip ...

随机推荐

  1. android sdk 镜象网站

    因为一些原因.Google相关非常多服务都无法訪问,所以在非常多时候我们SDK也无法升级,当然通过技术手段肯定能够解决,可是比較麻烦,并且下载速度也不怎么样. 这里笔者介绍一个国内的Android镜像 ...

  2. IIS进程回收 空闲时Net线程未运行

    最近手上的项目,用的是asp.net mvc,后台有个线程在循环接收socket数据,本身在系统运行的时候访问页面没问题,但是发现没访问时,后台没有接收数据,后来知道了是IIS把线程回收了.解决方法如 ...

  3. Vue自定义函数挂到全局方法

    方法一:使用Vue.prototype //在mian.js中写入函数 Vue.prototype.getToken = function (){ ... } //在所有组件里可调用函数 this.g ...

  4. 阅读笔记——Servlet

    什么是Servlet Servlet是用java编写的运行在web服务器中的程序,因此它可以调用服务器端的类,它也可以被调用,它本身就是一个类. Servlet的工作原理 servlet由web服务器 ...

  5. 【解决方法】Unexpected namespace prefix “xmlns” found for tag Layout

    问题描写叙述 出错代码例如以下: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&quo ...

  6. 全球可信并且唯一免费的HTTPS(SSL)证书颁发机构:StartSSL

    全球可信并且唯一免费的HTTPS(SSL)证书颁发机构:StartSSL http://blog.s135.com/startssl/ 购买权威机构的证书一年大概得七八千元,其实这是不值得的,所以一直 ...

  7. 简单记录几个有用的sql查询

    转载自:http://blog.itpub.net/16436858/viewspace-676265/ 下面示例中,查询的数据表参考这一篇的Person表. 一.限制返回的行数 1.Sql Serv ...

  8. 学习笔记(一):offset

    很多初学者对于JavaScript中的offset.scroll.client一直弄不明白,虽然网上到处都可以看一张图(图1),但这张图太多太杂,并且由于浏览器差异性,图示也不完全正确. 图一 不知道 ...

  9. Win7下IE11点击无反应的解决方法

    平台:win7 sp1 32bit 问题:点击Internet Explorer在开始菜单.快捷栏的图标和安装目录下的程序均没有反应,鼠标在变成漏斗后恢复原状再无反应.但搜狗浏览器和360浏览器下使用 ...

  10. 福昕pdf阅读器如何删除所有注释

    然后选中第一个 移动到最后按住shift,选择最后一个, 总之就是选中所有的 然后右键,点击删除即可. 不要忘记保存呦