实现继承的6中方法:

  • 借用构造函数
  • 组合继承
  • 原型式继承
  • 寄生式继承
  • 寄生组合式继承
  • 拷贝继承

1. 借用构造函数

在子类型构造函数的内部调用超类构造函数。通过使用apply()和call()方法在新创建的对象上执行构造函数

可以在子类型构造函数中向超类型构造函数传递参数

缺点:只能继承超类型的实例属性,对于原型上的方法和属性无法继承。

function SuperType(name) {
this.name = name;
this.colors = ['red','blue','green']
} function SubType() {
// 继承SuperType
SuperType.call(this,'ronghui');
this.age = 19;
} var instance1 = new SubType();
instance1.colors.push('black');
console.log(instance1.colors) // ["red", "blue", "green", "black"]
console.log(instance.name) // ronghui
console.log(instance.age) // 19

2. 组合继承

组合继承也叫伪经典继承,指的是将原型链和急用构造函数的技术组合到一块,从而发挥二者之长的一种继承模式。其背后的思路是使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的的继承。这样,既通过原型上定义方法实现了函数复用,又能够保证每个实例都有它自己的属性。

缺点:

  • 无论在什么情况下,都会调用两次超类型构造函数
  • 一次是在创建子类型原型的时候,另一次是在子类型构造函数内部,子类型会继承超类型对象的全部实例属性;
  • 这些实例属性可能不是我们想要的,因为我们还需要定义自己私有的属性,
  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('张三', 29);
instance1.colors.push('block')
console.log(instance1.colors) // ["red", "blue", "green", "block"]
instance1.sayName() // 张三
instance1.sayAge() // 29 var instance2 = new SubType('李四', 24);
console.log(instance2.colors); // ["red", "blue", "green"]
instance2.sayName() // 李四
instance2.sayAge() // 24

3. 原型式继承

function object(o) {
function F()
F.prototype = o;
return new F()
}
var person = {
name: '张三',
f
}

ES5的Object.create()实现原型式继承,接受两个参数:一个用做新对象原型的对象和一个为新对象定义额外属性的对象。

 var person = {
name: 'Nicholas',
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"]

4. 寄生式继承

function createAnother(original) {
let clone = Object.create(original);
clone.sayHi = function() { console.log( 'hi')}
return clone
}

5. 寄生组合式继承

组合继承缺点:无论在什么情况下,都会调用两次超类型构造函数:一次是在创建子类型原型的时候,另一次是在子类型构造函数颞部。

寄生组合继承,是通过借用构造函数来继承属性,通过原型链的混成形式来继承方法

function inheritPrototype(subType, superType) {
var prototype = Object.create(superType.prototype);
prototype.constructor = subType;
subType.prototype = prototype;; }
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;
}
inheritPrototype(SubType, SuperType);
SubType.prototype.sayAge = function () {
console.log(this.age)
}
var instance1 = new SubType('张三', 18)
instance1.sayName() // 张三
instance1.sayAge(); // 18

6. 拷贝继承

for...in遍历原型

function Animal() { }
Animal.prototype.species = '动物'; function extends2(SubType, SupType) {
var p = SupType.prototype;
var c = SubType.prototype;
for (var i in p) {
c[i] = p[i]
} } extends2(Cat, Animal);
var cat1 = new Cat('大毛', '黄色')
console.log(cat1.species)

JavaScript——实现继承的几种方式的更多相关文章

  1. javascript实现继承的几种方式

    原型链方式实现继承 function SuperType(){ this.property = true; this.colors = ['red','blue','green']; } SuperT ...

  2. 实现JavaScript中继承的三种方式

    在JavaScript中,继承可以通过三种手法实现原型链继承 使用apply.call方法 对象实例间的继承.     一.原型链继承 在原型链继承方面,JavaScript与java.c#等语言类似 ...

  3. javascript实现继承的三种方式

    一.原型链继承  function Parent(){} function Child(){} Child.prototype = new Parent(); 通过对象child的prototype属 ...

  4. javascript实现继承的一种方式

    function extend(Child, Parent) { var F = function(){}; F.prototype = Parent.prototype; Child.prototy ...

  5. javascript实现继承的6种方式

    /*1.原型链继承*/ function SuperType() { this.property = true; } SuperType.prototype.getSuperValue = funct ...

  6. javascript中实现继承的几种方式

    javascript中实现继承的几种方式 1.借用构造函数实现继承 function Parent1(){ this.name = "parent1" } function Chi ...

  7. javascript(js)创建对象的模式与继承的几种方式

    1.js创建对象的几种方式 工厂模式 为什么会产生工厂模式,原因是使用同一个接口创建很多对象,会产生大量的重复代码,为了解决这个问题,产生了工厂模式. function createPerson(na ...

  8. 前端知识体系:JavaScript基础-原型和原型链-实现继承的几种方式以及他们的优缺点

    实现继承的几种方式以及他们的优缺点(参考文档1.参考文档2.参考文档3) 要搞懂JS继承,我们首先要理解原型链:每一个实例对象都有一个__proto__属性(隐式原型),在js内部用来查找原型链:每一 ...

  9. javascript创建类的6种方式

    javascript创建类的7种方式 一 使用字面量创建 1.1 示例 var obj={}; 1.2 使用场景 比较适用于临时构建一个对象,且不关注该对象的类型,只用于临时封装一次数据,且不适合代码 ...

随机推荐

  1. 函数&&变量

    #*- encoding=utf-8 -*import sysprint(sys.getdefaultencoding()) def test(x,y,z): print(x) print(y) pr ...

  2. bootstrap 的布局

    第一步:你要做的就是选择适合你显示器的标签: .col-xs- 超小屏幕 手机 (<768px) .col-sm- 小屏幕 平板 (≥768px) .col-md- 中等屏幕 桌面显示器 (≥9 ...

  3. C++创建对象时什么时候用*,什么时候不用*

    用*, 表示创建的是一个指针对象,而指针的创建,必须初始化,C++中用new关键字开辟内存. 另外指针对象访问成员变量用-> , 非指针用. 就这么个原则 但是指针也可以不用-> 例如 ( ...

  4. zabbix创建钉钉报警

    https://juejin.im/post/5c8708eef265da2dd168a1c1 简介 家里搭建了zabbix去监控主机,邮件报警什么的都太麻烦了,所以直接使用钉钉机器人来提醒,下面是我 ...

  5. 如何Docker化任意一个应用

    网上有很多关于如何将应用Docker化的教程,为什么我还要再写一个呢? 我见过的大部分教程都是限定在某种特定技术(例如Java或者Python),可能无法满足读者的需求.同时,这些教程也没有说清楚关于 ...

  6. Angular:ViewProviders和Providers的区别

    在Angular中使用依赖注入(DI)的时候,我们一般会使用providers.其实要做同样的事我们还有另外一个选择:viewProviders. viewProviders允许我们定义只对组件的vi ...

  7. 为 PhpStorm 配置 Xdebug 来调试代码

    当项目越来越复杂,排错就越发困难. 你以为代码是这么运行的,但就是有未想到的功能导致流程变得不可捉摸. 此时我们需要调试啊调试... PhpStorm 是一款优秀的 PHP IDE,排除其 Java ...

  8. 后端技术杂谈7:OpenStack的基石KVM

    Qemu,KVM,Virsh傻傻的分不清 本文转载自Itweet的博客 本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 https://gi ...

  9. php面试专题---MYSQL查询语句优化

    php面试专题---MYSQL查询语句优化 一.总结 一句话总结: mysql的性能优化包罗甚广: 索引优化,查询优化,查询缓存,服务器设置优化,操作系统和硬件优化,应用层面优化(web服务器,缓存) ...

  10. PHP csv导出数据 (二)

    全部导出和时间导出 html代码,全程并不需要引用什么插件 <include file="public@header"/> <link href="__ ...