首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JS精粹】原型链继承和构造函数继承的 “毛病”

构造函数继承 构造函数继承,也叫做:“盗用构造函数”,“对象伪装”或“经典继承”。 基本思路:在子类构造函数中用 apply()和 call()方法调用父类构造函数。...构造函数继承:子类不能访问父类原型上的方法。 咱就是说,这东西怎么这么拧巴呢。。。 于是乎一个规避二者“毛病”的继承方式出现了:组合继承~~ 组合继承 目前最流行的继承模式是组合继承!...思路是:使用原型链继承原型上的属性和方法,而通过构造函数继承实例属性。...,总结起来就是,属性(特别是引用值)通过构造函数继承,而公用的、需要复用的方法用原型链去继承!!...说实话,JS 继承真的很奇怪。。。并不是面向对象语言,又要通过原型链去模拟面向对象,真的很多小坑的点需要去注意。

1.3K20

JS 继承

构造函数、原型对象和实例之间的关系 要弄懂extends继承之前,先来复习一下构造函数、原型对象和实例之间的关系。...构造函数(Parent) 结合代码和图可以知道, ES6extends 继承,主要就是: 把子类构造函数( Child)的原型( proto)指向了父类构造函数( Parent)。...推荐阅读JS继承相关的书籍章节 《JavaScript高级程序设计第3版》第6章——面向对象的程序设计 6种继承的方案,分别是原型链继承、借用构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承...上卷第6章——行为委托和附录A(ES6中的class) 总结 继承对于JS来说就是父类拥有的方法和属性、静态方法等,子类也要拥有。...回顾寄生组合式继承,主要就是三点: 子类构造函数的 proto指向父类构造器,继承父类的静态方法 子类构造函数的 prototype的 proto指向父类构造器的 prototype,继承父类的方法。

2.9K32
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    js实现继承

    js实现继承 经典继承(原型链) 缺点:过多的继承了没用的属性 Grandfather.prototype.lastName = 'zhang' function Grandfather() {...,造成了不必要的继承 共享原型 本质:重写原型对象 优点:只会继承父的原型,不会继承父原本自带的属性或方法(只有调用new Father()才会继承自身的东西) 缺点:给本身的原型添加属性或方法时,会把继承的那个原型也修改了...(伪经典继承) 原理:在函数里面调用函数,约等于将父里面的代码复制粘贴到子里面,然后通过call将父的this改成子的this 缺点: 不能继承借用的构造函数的原型 每次调用子构造函数都要调用多一次借用的父构造函数...__proto__获取father的原型进行修改而Son.prototype.food,只是在改变father实例 改进 原理:使用一个F构造函数中间层,F的原型继承父构造函数的原型,然后子的原型指向...F,形成闭包,因此返回的这个function可以访问这个F,而这个F只是作为中间层传递原型给目标而已,传递完之后F这个构造函数就没用了,而立即执行函数在执行完后就会销毁F,因此,高端操作(利用闭包延长F

    5.3K20

    JS进阶:继承

    在理解继承之前,需要知道 js 的三个东西: 什么是 JS 原型链 this 的值到底是什么 JS 的new 到底是干什么的 一、什么是 JS 原型链 我们知道 JS 有对象,比如 var obj =...如果你的函数调用不是 call 形式, 请将其转换为 call 形式 三、JS 的 new 到底是干什么的?...继承分类 image.png 继承方式 1、原型链继承 构造函数、原型和实例之间的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个原型对象的指针。...缺点: 只能继承父类的实例属性和方法,不能继承原型属性/方法 无法实现复用,每个子类都有父类实例函数的副本,影响性能 3、组合继承 组合上述两种方法就是组合继承。...用原型链实现对原型属性和方法的继承,用借用构造函数技术来实现实例属性的继承

    4.4K10

    JS原型继承和类式继承

    类式继承(构造函数JS中其实是没有类的概念的,所谓的类也是模拟出来的。特别是当我们是用new 关键字的时候,就使得“类”的概念就越像其他语言中的类了。...类式继承是在函数对象内调用父类的构造函数,使得自身获得父类的方法和属性。call和apply方法为类式继承提供了支持。通过改变this的作用环境,使得子类本身具有父类的各种属性。...child是通过中间继承了father的原型上的东西的。但是为什么中间还有一层object呢,为什么不把child.prototype = father.prototype。...所以很显然只能通过中间层才能使得child和father保持为独立的对象。 对比 和原型对比起来,构造函数(类)式继承有什么不一样呢?...从这里,我们也可以看到类继承和原型基础的一些区别。 结论 原型继承比较符合js这种语言的特点。因为它本身就是js强大的原型的一部分。

    3.4K90

    JS继承机制总结

    JS继承机制总结 继承就是子类可以使用父类的所有功能,并且对这些功能进行扩展。 JS继承机制主要为原型链继承、构造函数继承、组合继承、寄生继承、寄生组合继承、原型式继承和混合式继承。...,就必须放在Child.prototype = new Parent()这样的语句后面 构造函数继承 继承规则 在子类构造函数内部使用`call或apply`来调用父类构造函数 复制代码 代码实例 function...但是现在用了构造函数继承,由于它是复制了父类构造函数中的属性和方法,这样产生的每个子类实例中都会有一份自己各自的方法,可是有的方法完全没有必要复制,可以用来共用的,所以就说不能够「函数复用」。)...它避免了组合继承中调用两次父类构造函数,初始化两次实例属性的缺点。...继承规则 //原型式继承的原理是创建一个构造函数,构造函数的原型指向对象,然后调用 new 操作符创建实例,并返回这个实例,本质是一个浅拷贝。

    1.6K10

    js中的继承

    ​方式一:原型链继承特点:实例可继承的属性有:实例的构造函数的属性,父类构造函数属性,父类原型的属性。(新实例不会继承父类实例的属性!)...缺点:新实例无法向父类构造函数传参function Parent() {this.name = 'zs'}Parent.prototype.say = function() {console.log('...Child.prototype = new Parent()const c = new Child();console.log(c) // Child { name: 'zs', age: 20 }方式二:借用构造函数继承特点...:可以向父类构造函数传参 缺点:不能继承父类构造函数的原型function Parent(name) {this.name = name}function Child() {Parent.call(this...:原型链继承+构造函数继承function Parent(name) {this.name = name}function Child(name) {Parent.call(this, name)this.age

    1.1K00

    js 继承的是什么?如何实现继承

    二、 构造函数继承 针对前面原型链继承可能会存在公用一个原型链的问题,那么我们可以给大家介绍一种方式:构造函数继承。构造函数继承相当于将父类复制给子类。...三、 组合继承 原型链继承继承父类原型链上的属性,但是可能会存在篡改的问题;而构造函数继承不会存在篡改的问题,但是不能继承原型上面的属性。那么我们是否可以将两者进行结合呢?...五、 寄生式继承 在原型式继承的基础上面增强了对象,并返回构造函数。...这个例子的效率的体现在它只调用了一次父类的构造函数,这很大程度上面减少创建了不必要多余的属性。并且还能继承原型链上面的方法。这个方法是现在库的实现方法。...其实我们知道,class语法也是由es5语法来写的,其继承的方法和寄生组合式继承的方法一样。关于es6的类,我在代码自检的时候遇到的两个重点,值得注意下的是: 函数声明会提升,类声明不会。

    1.8K40

    js各种继承方式汇总

    js中的各种继承实现汇总 首先定义一个父类: function Animal(name) { this.name = name || '动物' this.sleep = function ()...,可以向父类传递参数 缺点: 1、没用到原型,只是单纯继承了父类的实例属性及方法 2、没继承原型上的属性及方法 3、每个子类都有父类方法属性的副本,影响性能,没有实现父类函数复用 function...Animal) // false 组合继承(构造继承+原型链继承) 特点: 1、组合构造继承和原型链继承 优点: 1、可以继承实例属性/方法,也可以继承原型属性/方法 2、既是子类的实例,...也是父类的实例 3、不存在引用属性共享问题 4、可传参 5、函数可复用 缺点: 1、调用了两次父类构造函数 function Duck(name) { Animal.call(this,...特点: 1、使用中间函数对象避免父类构造被两次调用的问题 优点: 1、完美 缺点: 1、写起来费劲 function Snake(name) { Animal.call(this, name

    2.2K70

    JS实现继承的方式

    JS实现继承的方式 构造函数继承 原型继承 组合(构造函数+原型)继承 Class继承 ---- 构造函数继承 构造函数继承的关键:在Child构造函数中执行Parent.call(this)...组合继承 组合继承的关键: 1.属性使用构造函数继承 - 避免了原型继承中Parent引用属性被所有Child实例共享的缺陷。...2.方法使用过原型继承 - 避免了构造函数继承中方法重复拷贝、浪费内存的缺陷 function Parent(){ this.name = name; this.hobby = [];...(另一处调用是Child构造函数中的Parent.call(this)),降低效率,且如果Parent构造函数有副作用,重复调用可能造成不良后果。...因为子类没有自己的this对象,而是继承父类的this对象。如果不调用super函数,子类就得不到this对象。super()作为父类的构造函数,只能出现在子类的constructor()中。

    2.1K20

    Js继承的实现方式

    Js继承的实现方式 继承是面向对象软件技术当中的一个概念,与多态、封装共为面向对象的三个基本特征。继承可以使得子类具有父类的属性和方法或者重新定义、追加属性和方法等。...、父类原型属性和方法 不足 无法实现多继承 子类实例化时无法向父类的构造函数传参 所有子类实例都会共享父类的原型对象中的属性 构造函数继承 当子类构造函数被调用时,借助call或者apply调用父类构造方法实现对于...通过调用多个父类构造函数可以实现多继承 不足 实例并不是父类的实例,只是子类的实例 只继承了父类的构造函数的属性和方法,没有继承父类原型的属性和方法 每个子类都有父类实例函数的副本,拷贝了父类函数而不是引用...所有子类实例都会共享父类的原型对象中的属性 组合继承 组合原型链继承和借用构造函数继承,结合了两种模式的优点,传参和复用 // 定义父类 function Parent(from){ this.name...可以继承实例属性和方法,也可以继承原型属性和方法 不足 调用了两次父类构造函数,生成了两份实例,子类的构造函数的拷贝会代替原型上的父类构造函数的实例 寄生组合继承 通过寄生方式,砍掉父类的实例属性,在调用两次父类的构造的时候

    2K20

    JavaScript原型链继承与盗用构造函数继承

    ---- theme: channing-cyan 这是我参与8月更文挑战的第6天,活动详情查看:8月更文挑战 昨天我们讲解了原型和原型链,今天我们说一下继承,顺便再重温一下原型链 什么是继承 继承这个词比较容易理解...这个就是继承。我们直接上干货。 原型链继承 原型链继承js中的主要继承方式,它的基本思想就是通过原型继承多个引用类型的属性和方法。...对于属性和方法一直会持续到原型链末端 原型链虽然是比较强大的继承实现工具,但是它里面所有的引用值都是实例间共享的,而且子类不能向父类传参,一般原型链也不会被单独使用,我们可以通过盗用构造函数配合来解决这些问题...盗用构造函数 盗用构造函数有时候也被一些人叫做“对象伪装”或“经典继承”。这个思路很简单,在字类构造函数中调用父类构造函数。我们可以用.call()和.apply()将父类构造函数引入子类函数。...盗用构造函数也有一定的问题 1、只能继承父类构造函数的属性。 2、无法实现构造函数的复用。(每次用每次都要重新调用) 3、每个新实例都有父类构造函数的副本,臃肿。

    40720

    一文看懂 JS 继承

    一文看懂 JS 继承 最近回顾 js 继承的时候,发现还是对一些概念不是很清晰。...这里再梳理一下 JS继承的几种主要的方式,构造函数继承、原型链继承、组合继承以及原型式继承、寄生式继承、寄生组合式继承和 ES6 的 Class: 构造函数继承 构造函数继承没有用到 prototype...私有的写在构造函数 ?...原型式继承直接使用 ES5 Object.create 方法,该方法的原理是创建一个构造函数,构造函数的原型指向对象,然后调用 new 操作符创建实例,并返回这个实例,本质是一个浅拷贝 ?...这个是组合继承的唯一缺点,寄生组合式解决了这个问题: ? 公有的写在原型 ? 私有的写在构造函数 ? 可以向父类传递参数 ?

    90120

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭
      领券