1、原型链方式

function Super(){
this.val = 1;
this.arr = [1];
}
function Sub(){
// ...
}
Sub.prototype = new Super(); // 核心 var sub1 = new Sub();
var sub2 = new Sub();
sub1.val = 2;
sub1.arr.push(2);
alert(sub1.val); //
alert(sub2.val); // alert(sub1.arr); // 1, 2
alert(sub2.arr); // 1, 2

拿父类实例来充当子类原型对象

优点:

  1. 简单,易于实现

缺点:

  1. 修改sub1.arr后sub2.arr也变了,因为来自原型对象的引用属性是所有实例共享的。

    可以这样理解:执行sub1.arr.push(2);先对sub1进行属性查找,找遍了实例属性(在本例中没有实例属性),没找到,就开始顺着原型链向上找,拿到了sub1的原型对象,一搜身,发现有arr属性。于是给arr末尾插入了2,所以sub2.arr也变了

  2. 创建子类实例时,无法向父类构造函数传参

2、借用构造函数方式

function Super(val){
this.val = val;
this.arr = [1]; this.fun = function(){
// ...
}
}
function Sub(val){
Super.call(this, val); // 核心
// ...
} var sub1 = new Sub(1);
var sub2 = new Sub(2);
sub1.arr.push(2);
alert(sub1.val); //
alert(sub2.val); // alert(sub1.arr); // 1, 2
alert(sub2.arr); // alert(sub1.fun === sub2.fun); // false

借父类的构造函数来增强子类实例,等于是把父类的实例属性复制了一份给子类实例装上了(完全没有用到原型)

优点:

  1. 解决了子类实例共享父类引用属性的问题

  2. 创建子类实例时,可以向父类构造函数传参

缺点:

  1. 无法实现函数复用,每个子类实例都持有一个新的fun函数,太多了就会影响性能,内存爆炸。。

3、组合继承方式

function Super(){
// 只在此处声明基本属性和引用属性
this.val = 1;
this.arr = [1];
}
// 在此处声明函数
Super.prototype.fun1 = function(){};
Super.prototype.fun2 = function(){};
//Super.prototype.fun3...
function Sub(){
Super.call(this); // 核心
// ...
}
Sub.prototype = new Super(); // 核心 var sub1 = new Sub(1);
var sub2 = new Sub(2);
alert(sub1.fun === sub2.fun); // true

把实例函数都放在原型对象上,以实现函数复用。同时还要保留借用构造函数方式的优点,通过Super.call(this);继承父类的基本属性和引用属性并保留能传参的优点;通过Sub.prototype = new Super();继承父类函数,实现函数复用

优点:

  1. 不存在引用属性共享问题
  2. 可传参
  3. 函数可复用

缺点:

  1. (一点小瑕疵)子类原型上有一份多余的父类实例属性,因为父类构造函数被调用了两次,生成了两份,而子类实例上的那一份屏蔽了子类原型上的。。。又是内存浪费,比刚才情况好点,不过确实是瑕疵

4、寄生组合继承方式

function beget(obj){
var F = function(){};
F.prototype = obj;
return new F();
}
function Super(){
// 只在此处声明基本属性和引用属性
this.val = 1;
this.arr = [1];
}
// 在此处声明函数
Super.prototype.fun1 = function(){};
Super.prototype.fun2 = function(){};
//Super.prototype.fun3...
function Sub(){
Super.call(this); // 核心
// ...
}
var proto = beget(Super.prototype); // 核心
proto.constructor = Sub; // 核心
Sub.prototype = proto; // 核心 var sub = new Sub();
alert(sub.val);
alert(sub.arr);

转载:https://www.cnblogs.com/ayqy/p/4471638.html

js的几种继承方式的更多相关文章

  1. js的6种继承方式

    重新理解js的6种继承方式 注:本文引用于http://www.cnblogs.com/ayqy/p/4471638.html 重点看第三点 组合继承(最常用) 写在前面 一直不喜欢JS的OOP,在学 ...

  2. 细说 js 的7种继承方式

    在这之前,先搞清楚下面这个问题: function Father(){} Father.prototype.name = 'father'; Father.prototype.children = [ ...

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

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

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

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

  5. js的5种继承方式——前端面试

    js主要有以下几种继承方式:对象冒充,call()方法,apply()方法,原型链继承以及混合方式.下面就每种方法就代码讲解具体的继承是怎么实现的. 1.继承第一种方式:对象冒充 function P ...

  6. js的2种继承方式详解

    js中继承可以分为两种:对象冒充和原型链方式 一.对象冒充包括三种:临时属性方式.call()及apply()方式1.临时属性方式 复制代码代码如下: function Person(name){   ...

  7. JavaScript_几种继承方式(2017-07-04)

    原型链继承 核心: 将父类的实例作为子类的原型 //父类 function SuperType() {   this.property = true; } SuperType.prototype.ge ...

  8. js实现的几种继承方式

    他山之石,可以攻玉,本人一直以谦虚的态度学他人之所长,补自己之所短,望各位老师指正! 拜谢 js几种继承方式,学习中的总结: 所谓的继承是为了继承共有的属性,减少不必要代码的书写 第一种:借用构造函数 ...

  9. 都0202年了,你还不知道javascript有几种继承方式?

    前言     当面试官问你:你了解js哪些继承方式?es6的class继承是如何实现的?你心中有很清晰的答案吗?如果没有的话,可以通过阅读本文,帮助你更深刻地理解js的所有继承方式.       js ...

随机推荐

  1. 2019-8-30-PowerShell-通过-WMI-获取系统安装的驱动

    title author date CreateTime categories PowerShell 通过 WMI 获取系统安装的驱动 lindexi 2019-08-30 08:58:39 +080 ...

  2. Codeigniter 获取当前的控制器名称和方法名称

    在Codeigniter 可以通过下面两个方法获取当前的控制器名称和方法名称 $this->router->fetch_class(); $this->router->fetc ...

  3. 2.初始化spark

    参考:  RDD programming guide http://spark.apache.org/docs/latest/rdd-programming-guide.html  SQL progr ...

  4. [转]使用TortoiseGit处理代码冲突

    场景一  user0 有新提交 user1 没有pull -> 写新代码 -> pull -> 提示有冲突   解决办法一 -> stash save(把自己的代码隐藏存起来) ...

  5. 关于Synthesis

    1,当追求面积最小时 会以牺牲Fmax为代价,可以使用一下setting: fit_pack_for_density=on fit_report_lab_usage_stats=on 可在 .qsf ...

  6. Windbg 问题集锦记录

    问题1: 问: 0  Id: 15f4.e60 Suspend: 1 Teb: 7ffdf000 Unfrozen  # ChildEBP RetAddr  Args to Child         ...

  7. Acer电脑【no bootable device】引导修复

    时隔一年,又遇上了我的电脑出现     No Bootable Device    的开机提示,进不了系统. 那么怎么办呢? // 本文修复方式仅针对宏碁电脑且分区表为MBR的情况.按如下方法引导并未 ...

  8. PAT甲级——【牛客练习A1004】

    题目描述 An inorder binary tree traversal can be implemented in a non-recursive way with a stack. For ex ...

  9. Mybatis Plus 入坑(含最新3.X配置)

    简介 Mybatis-Plus(简称MP)是一个 Mybatis 的增强工具,在 Mybatis 的基础上只做增强不做改变,为简化开发.提高效率而生. 使用它可以简化单表的操作, 节省开发时间, 国人 ...

  10. Spring Boot使用Swagger2

    1.添加Swagger2依赖 <dependency> <groupId>io.springfox</groupId> <artifactId>spri ...