原型链继承

核心: 将父类的实例作为子类的原型

//父类
function SuperType() {
  this.property = true;
} SuperType.prototype.getSuperValue = function () {
  return this.property
}; //子类
function SubType() {
  this.subproperty = false;
} //拿父类实例来充当子类原型对象
SubType.prototype = new SuperType(); SubType.prototype.getSubValue = function () {
  return this.subproperty
}; var instance = new SubType();
console.log(instance.getSuperValue()); //true 

特点:

  1. 非常纯粹的继承关系,实例是子类的实例,也是父类的实例
  2. 父类新增原型方法/原型属性,子类都能访问到
  3. 简单,易于实现

缺点:

  1. 要想为子类新增属性和方法,必须要在new 语句之后执行,不能放到构造器中
  2. 无法实现多继承
  3. 来自原型对象的引用属性是所有实例共享的
  4. 创建子类实例时,无法向父类构造函数传参

借用构造继承

核心:使用父类的构造函数来增强子类实例,等于是复制父类的实例属性给子类(没用到原型)

//父类
function SuperType() {
this.colors = ["red", "blue"]
}
//子类
function SubType() {
SuperType.call(this);//通过apply()和call()方法在新创建的对象上执行构造函数
} var instance1 = new SubType();
instance1.colors.push("black");
console.log(instance1.colors); //["red", "blue", "black"] var instance2 = new SubType();
console.log(instance2.colors); //["red", "blue"]

传递参数

//父类
function SuperType(name) {
this.name = name;
}
//子类
function SubType() {
SuperType.call(this, "mnixu");//通过apply()和call()方法在新创建的对象上执行构造函数
this.age = 20;
} var instance1 = new SubType();
console.log(instance1.name); //"mnixu"
console.log(instance1.age); //20

特点:

  1. 解决了原型链继承中,子类实例共享父类引用属性的问题
  2. 创建子类实例时,可以向父类传递参数
  3. 可以实现多继承(call多个父类对象)

缺点:

  1. 实例并不是父类的实例,只是子类的实例
  2. 只能继承父类的实例属性和方法,不能继承原型属性/方法
  3. 无法实现函数复用,每个子类都有父类实例函数的副本,影响性能

组合继承(最常用的继承模式)

核心:通过调用父类构造,继承父类的属性并保留传参的优点,然后通过将父类实例作为子类原型,实现函数复用

//通过借用构造函数实现继承父类构造函数的属性(构造函数通常用this.属性,对实例对象来说私有)。
//使用原型链实现继承父类原型的属性和方法(原型的属性和方法,对实例对象来说共享)。
//父类
function SuperType(name) {
this.name = name;
this.colors = ["red", "blue"];
} SuperType.prototype.sayName = function() {
console.log(this.name);
}
//子类
function SubType(name, age) {
SuperType.call(this, name);//通过apply()和call()方法在新创建的对象上执行构造函数
this.age = age;
} SubType.prototype = new SuperType();//拿父类实例来充当子类原型对象
SubType.prototype.constructor = SubType;//重新生成constructor属性指向子类,模型原型对象
SubType.prototype.sayAge = function() {
console.log(this.age);
}; var instance1 = new SubType("mnixu", 20);
instance1.colors.push("black");
console.log(instance1.colors); //["red", "blue", "black"]
instance1.sayAge(); //
instance1.sayName(); // "mnixu" var instance2 = new SubType("zwj", 28);
console.log(instance2.colors); //["red", "blue"]
instance2.sayAge(); //
instance2.sayName(); //"zwj"

特点:

  1. 弥补了借用构造函数继承方式的缺陷,可以继承实例属性/方法,也可以继承原型属性/方法
  2. 既是子类的实例,也是父类的实例
  3. 不存在引用属性共享问题
  4. 可传参
  5. 函数可复用

缺点:

  1. 调用了两次父类构造函数,生成了两份实例(子类实例将子类原型上的那份屏蔽了)

4.原型式继承

借助原型并基于已有的对象创建新对象,同时还不用创建自定义类型

//生成对象的函数
function object(o) { //部分浏览器支持Object.create()方法
function F() {};
F.prototype = o;
return new F();
} //父类
var Person = {
name: "mnixu",
color: ["blue", "black"]
}
//子对象1
var anotherPerson = object(Person);
anotherPerson.name = "Greg";
anotherPerson.color.push("red")
//子对象2
var yetAnotherPerson = object(Person);
yetAnotherPerson.name = "zwj";
yetAnotherPerson.color.push("white") console.log(anotherPerson.color); //["blue", "black", "red", "white"]
console.log(yetAnotherPerson.color); //["blue", "black", "red", "white"]

原型式继承首先在obj()函数内部创建一个临时性的构造函数 ,然后将传入的对象作为这个构造函数的原型,最后返回这个临时类型的一个新实例。

5.寄生式继承

这种继承方式是把原型式+工厂模式结合起来,目的是为了封装创建的过程。

//生成对象的函数
function object(o) { //部分浏览器支持Object.create()方法
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: "mnixu",
color: ["blue", "black"]
}
//子对象
var anotherPerson = createAnother(Person);
anotherPerson.sayHi();

6.寄生组合式继承

核心:通过寄生方式,砍掉父类的实例属性,这样,在调用两次父类的构造的时候,就不会初始化两次实例方法/属性,避免的组合继承的缺点

//生成对象的函数
function object(o) {//部分浏览器支持Object.create()方法
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;
this.colors = ["red", "blue"];
} 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);
};

特点:

  1. 这个例子的高效率体现在只调用了一次SuperType构造函数,避免了在SubType.prototype上面创建不必要的属性,
    并且,原型链还能保持不变。堪称完美

缺点:

  1. 实现较为复杂

copy:

重新理解JS的6种继承方式js高级程序设计笔记 -- 理解继承

JavaScript_几种继承方式(2017-07-04)的更多相关文章

  1. js的三种继承方式及其优缺点

    [转] 第一种,prototype的方式: //父类 function person(){ this.hair = 'black'; this.eye = 'black'; this.skin = ' ...

  2. 重新理解JS的6种继承方式

    写在前面 一直不喜欢JS的OOP,在学习阶段好像也用不到,总觉得JS的OOP不伦不类的,可能是因为先接触了Java,所以对JS的OO部分有些抵触. 偏见归偏见,既然面试官问到了JS的OOP,那么说明这 ...

  3. C++的三种继承方式简述

    C++对父类(也称基类)的继承有三种方式,分别为:public继承.protected继承.private继承.三种继承方式的不同在于继承之后子类的成员函数的"可继承性质". 在说 ...

  4. Javascript的四种继承方式

    在Javascript中,所有开发者定义的类都可以作为基类,但出于安全性考虑,本地类和宿主类不能作为基类,这样可以防止公用访问编译过的浏览器级的代码,因为这些代码可以被用于恶意攻击. 选定基类后,就可 ...

  5. JavaScript之四种继承方式讲解

    在Javascript中,所有开发者定义的类都可以作为基类,但出于安全性考虑,本地类和宿主类不能作为基类,这样可以防止公用访问编译过的浏览器级的代码,因为这些代码可以被用于恶意攻击. 选定基类后,就可 ...

  6. C++中的类继承(1) 三种继承方式

    继承是使代码可以复用的重要手段,也是面向对象程序设计的核心思想之一.简单的说,继承是指一个对象直接使用另一对象的属性和方法.继承呈现了 面向对象程序设 计的层次结构, 体现了 由简单到复杂的认知过程. ...

  7. C++继承(一) 三种继承方式

    继承定义 继承是使代码可以复用的重要手段,也是面向对象程序设计的核心思想之一. 继承就是不修改原有的类,直接利用原来的类的属性和方法并进行扩展.原来的类称为基类,继承的类称为派生类,他们的关系就像父子 ...

  8. c++三种继承方式public,protect,private

    C++中的三种继承public,protected,private 三种访问权限 public:可以被任意实体访问 protected:只允许子类及本类的成员函数访问 private:只允许本类的成员 ...

  9. JavaScript的3种继承方式

    JavaScript的继承方式有多种,这里列举3种,分别是原型继承.类继承以及混合继承. 1.原型继承 优点:既继承了父类的模板,又继承了父类的原型对象: 缺点:不是子类实例传参,而是需要通过父类实例 ...

随机推荐

  1. tomcat jetty

    背景 其实这个比较毫无意义.只是当时突然知道了jetty,所以记下来,对于开发人员来说选择哪个一般意义不大. 转载 从架构上来看 Tomcat 在处理少数非常繁忙的连接上更有优势,也就是说连接的生命周 ...

  2. ubuntu 下抓包

    笔记本安装了ubuntu 14.04, 利用笔记本的网卡进行抓包时,需要将网卡配置为monitor模式. (1)关闭无线网卡 sudo ifconfig wlan0 down (2)将无线网卡配置为m ...

  3. CentOs 6.6里kdump启动失败的原因

    在VMware中新安装了CentOs 6.6,重启系统发现kdump服务启动失败 先来说一下,什么是kdump kdump 是一种先进的基于 kexec 的内核崩溃转储机制.当系统崩溃时,kdump ...

  4. 转载:configure生成的文件(1.5.3)《深入理解Nginx》(陶辉)

    原文:https://book.2cto.com/201304/19620.html 当configure执行成功时会生成objs目录,并在该目录下产生以下目录和文件:|---ngx_auto_hea ...

  5. php ajax返回无故刷新页面

    1 前言 一个php页面,里面两个$.POST请求,一个会刷新页面,一个不会,然后就拉出来研究一下了,仅作为记录使用. 2 代码 HTML代码: <input value="查找&qu ...

  6. JQ初学总结一

    Jquery是最火的JavaScript库,大部分web开发都会用到就jquery,而作为初学者看了一些jq的用法总结自己的学习以增强自己的认知. 普通的javascript的缺点是:每种控件的操作方 ...

  7. java中一个Map要找到值Value最小的那个元素的方法

    import java.util.Arrays; import java.util.Collection; import java.util.HashMap; import java.util.Map ...

  8. vue2的缓存问题(非原创)

    keep-alive是vue内置的一个组件,可以使被它包含的组件处于保留状态,或避免被重新渲染. 用法: 运行结果描述: input输入框内,路由切换输入框内部的内容不会发生改变. 常见的用法:(下图 ...

  9. 【splunk】启动停止

    在控制台 splunk目录/bin下 ./splunk start #启动 ./splunk stop #停止 启动时出错,需要更改一下SPLUNK的配置 $SPLUNK_HOME/etc/splun ...

  10. ERP产品销售发货判断库存功能(四十二)

    产品数量的前端(键盘抬起的事件): <td> <input type="text" name="proCount" onkeyup=" ...