1. 原型链继承 (原型链)

function Parent() {
this.fruits = ['apple', 'orange'];
}
Parent.prototype.sayHello = function () {
console.log('Parent');
}; function Child() {} Child.prototype = new Parent(); let child1 = new Child();
child1.fruits.push('banana');
console.log(child1.fruits); // [ 'apple', 'orange', 'banana' ] let child2 = new Child();
console.log(child2.fruits); // [ 'apple', 'orange', 'banana' ]

特点:被所有的实例共享了引用类型属性


2. 构造函数方式的继承 (call)

function Parent() {
this.fruits = ['apple', 'orange'];
}
Parent.prototype.sayHello = function () {
console.log('Parent');
}; function Child() {
Parent.call(this);
} let child1 = new Child();
child1.fruits.push('banana');
console.log(child1.fruits); // [ 'apple', 'orange', 'banana' ] let child2 = new Child();
console.log(child2.fruits); // [ 'apple', 'orange' ]

特点:

  1. call方法仅仅调用了父级构造函数的属性及方法(私有属性),没有办法调用父级构造函数原型对象的方法(公有属性)
  2. 可以在 Child 中向 Parent 传参
  3. 每次实例化对象都得创建一遍方法,基本无法实现函数复用

3. 组合链继承方式 (原型链 + call)

function Parent(name) {
this.name = name;
this.fruits = ['apple', 'orange'];
}
Parent.prototype.sayHello = function () {
console.log(this.name);
}; function Child(name, age) {
Parent.call(this, name);
this.name = age;
}
Child.prototype = new Parent(); let child1 = new Child();
child1.fruits.push('banana');
console.log(child1.fruits); // [ 'apple', 'orange', 'banana' ] let child2 = new Child();
console.log(child2.fruits); // [ 'apple', 'orange' ]

特点:

  1. 子类的私有属性继承了父类私有属性,子类公有属性也继承了父类的私有属性和公有属性
  2. 父类函数执行了两次

4. 寄生继承 (Object.create 或者是自我实现的Object)

let parent = {
fruits: ['apple', 'orange'],
sayHello: function () {
console.log('hello');
},
}; function parasitic(pro) {
let clone = Object.create(pro);
return clone;
} let child1 = parasitic(parent);
child1.fruits.push('banana');
console.log(child1.fruits); // [ 'apple', 'orange', 'banana' ] let child2 = parasitic(parent);

这里用到了Object.create

特点:

  1. 和原型链继承效果雷同

5. 寄生组合继承(Oject.create + call)

function Parent(name) {
this.name = name;
this.fruits = ['apple','orange'] }
Parent.prototype.sayHello = function () {
console.log(this.name)
} function Child() {
Parent.call(this) }
function parasitic(child,parent) {
let tempObj = Object.create(parent.prototype);
child.prototype = tempObj;
tempObj.constructor = child;
} parasitic(Child, Parent);

特点:

  1. 子类私有属性继承了父类的私有属性,子类公有属性继承了父类公有属性(和组合继承相比更加纯粹干净)

总结: 所以应用的最多应该就是 组合继承和寄生组合继承两种方式了

js继承方式及特征的更多相关文章

  1. JS继承方式详解

    js继承的概念 js里常用的如下两种继承方式: 原型链继承(对象间的继承) 类式继承(构造函数间的继承) 由于js不像java那样是真正面向对象的语言,js是基于对象的,它没有类的概念.所以,要想实现 ...

  2. 经典面试题:js继承方式下

    上一篇讲解了构造函数的继承方式,今天来讲非构造函数的继承模式. 一.object()方法 json格式的发明人Douglas Crockford,提出了一个object()函数,可以做到这一点. fu ...

  3. 经典面试题:js继承方式上

    js不是传统的面向对象语言,那么他是怎么实现继承的呢?由于js是基于原型链实现的面向对象,所以js主要通过原型链查找来实现继承,主要有两大类实现方式,分为基于构造函数的继承,以及非构造函数的继承. 由 ...

  4. js继承方式

    1.原型链 实现的本质是重写原型对象,代之以一个新类型的实例: 给原型添加方法的代码硬顶放在替换原型的语句之后: 不能使用对象字面量查收能见原型方法,这样会重写原型链. 缺点:包含引用类型值的原型属性 ...

  5. js继承方式及其优缺点?

    原型链继承的缺点一是字面量重写原型会中断关系,使用引用类型的原型,并且子类型还无法给超类型传递参数.借用构造函数(类式继承)借用构造函数虽然解决了刚才两种问题,但没有原型,则复用无从谈起.所以我们需要 ...

  6. js 中继承方式小谈

    题外话 前段时间面试中笔试题有这道题目: 请实现一个继承链,要求如下: 构造函数A():构造函数中有consoleA方法,可以实现console.log("a") 实例对象 a:a ...

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

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

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

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

  9. js两种定义函数、继承方式及区别

    一:js两种定义函数的方式及区别 1:函数声明: function sayA() { alert("i am A"); } 2:函数表达式: var sayB = function ...

随机推荐

  1. 让你发布的nuget包支持源代码调试

    前情概要 在不久的从前(也还是要以年为单位哈), 我们如果需要调试第三方代码, 或者框架代码很麻烦. 需要配置symbols, 匹配原始代码路径等. 为此, MS推出了 Source Link 功能, ...

  2. centos 8 下解压.tar.gz文件

    执行命令 tar 参数 文件名 参数: -c :建立一个压缩文件的参数指令(create 的意思): -x :解开一个压缩文件的参数指令: -t :查看 tarfile 里面的文件: 特别注意,在参数 ...

  3. css图片显示文字(上浮)

    <html> <head lang="en"> <meta charset="UTF-8"> <title>&l ...

  4. Linux系统inodes资源耗尽时的查找及删除

    for i in {1..10}; do echo $i; ls > $i.log; done for i in $(seq 1 10); do echo $i; done 以上为for循环的使 ...

  5. 从 Java 代码到 Java 堆

    本文将为您提供 Java 代码内存使用情况的深入见解,包括将 int 值置入一个 Integer 对象的内存开销.对象委托的成本和不同集合类型的内存效率.您将了解到如何确定应用程序中的哪些位置效率低下 ...

  6. Quartz和Spring Task定时任务的简单应用和比较

    看了两个项目,一个用的是Quartz写的定时器,一个是使用spring的task写的,网上看了2篇文章,写的比较清楚,这里做一下留存 链接一.菠萝大象:http://www.blogjava.net/ ...

  7. 成功解决1406, “Data too long for column ‘txt‘ at row 1“

    这是因为数据库里该字段的数据类型所给的数据空间太小.MySQL将截断超过指定列宽度的任何插入值.为了让这个不报错,可以尝试切换MySQL模式不使用严格模式. SET @@global.sql_mode ...

  8. 一行代码打印python之禅

    就这一句: import this 输出: The Zen of Python, by Tim Peters Beautiful is better than ugly. Explicit is be ...

  9. 三分钟掌握共享内存 & Actor并发模型

    吃点好的,很有必要.今天介绍常见的两种并发模型: 共享内存&Actor 共享内存 面向对象编程中,万物都是对象,数据+行为=对象: 多核时代,可并行多个线程,但是受限于资源对象,线程之间存在对 ...

  10. 高校表白App-团队冲刺第三天

    今天要做什么 今天开站立会议的时候,忽然发觉在一个完整的App上好像是有一些引导页的,比如说在第一次使用App的时候,或者是在使用App的时候会出现新手指引操作. 做了什么 通过查阅资料来学习View ...