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

前端-一篇文章理解 JS 继承

本文以《JavaScript高级程序设计》上内容为骨架,补充了ES6 Class相关内容,从我认为更容易理解角度将继承这件事叙述出来,希望大家能有所收获。 1. 继承分类 先来个整体印象。...如图所示,JS继承可以按照是否使用object函数(在下文中会提到),将继承分成两部分(Object.create是ES5新增方法,用来规范化这个函数)。...继承方式 上图上半区原型链继承,构造函数继承,组合继承,网上内容比较多,本文不作详细描述,只指出重点。这里给出了我认为最容易理解一篇《JS继承(上)》。...总结 1、ES6 Class extends是ES5继承语法糖 2、JS继承除了构造函数继承之外都基于原型链构建 3、可以用寄生组合继承实现ES6 Class extends,但是还是会有细微差别...参考文章: 1、《js继承、构造函数继承、原型链继承、组合继承、组合继承优化、寄生组合继承》 2、《JavaScript高级编程》

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

    JS 继承

    继承相关问题,比如: ES6 class 继承用 ES5 如何实现。...推荐阅读JS继承相关书籍章节 《JavaScript高级程序设计第3版》第6章——面向对象程序设计 6种继承方案,分别是原型链继承、借用构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承...多重继承法 寄生继承法 构造器借用法 构造器借用与属性拷贝法 《ES6标准入门》第21章——class继承 《深入理解ES6》第9章——JavaScript中类 《你不知道JavaScript》...上卷第6章——行为委托和附录A(ES6中class) 总结 继承对于JS来说就是父类拥有的方法和属性、静态方法等,子类也要拥有。...继承方法可以有很多,重点在于必须理解并熟。 悉这些对象、原型以及构造器工作方式,剩下就简单了。寄生组合式继承是开发者使用比较多

    2.9K32

    js继承

    类式继承 1.最常用继承组合模式 —— 借用构造函数 & 设置原型 // 父类 function Parent(name) { this.name = name;...// 设置原型 继承父类this属性以及父类原型 Child.prototype = new Parent(); 缺点:父构造函数被调用了两次,从而导致同一个属性会被继承两次(this.name...继承了父类自身属性 继承了父类原型属性(方法) 基于上面的问题,如果 Child.prototype 不指向 Parent实例 new Parent(),而是指向 Parent.prototype...原型继承并不涉及到类,这里对象都是继承自其他对象。...—— 浅复制 & 深复制 继承目的是为了实现代码复用,所以一个对象要从另一个对象中获取功能,把目标对象属性和方法复制过来也是一种方法。

    2.6K10

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

    继承含义: 继承是面向对象编程中一个重要概念,通过继承可以使子类实例使用在父类中定义属性和方法。...二、 构造函数继承 针对前面原型链继承可能会存在公用一个原型链问题,那么我们可以给大家介绍一种方式:构造函数继承。构造函数继承相当于将父类复制给子类。...三、 组合继承 原型链继承继承父类原型链上属性,但是可能会存在篡改问题;而构造函数继承不会存在篡改问题,但是不能继承原型上面的属性。那么我们是否可以将两者进行结合呢?...六、 寄生组合式继承 前面说了这么多,每种继承方式都有自己优点和缺点,那么是不是可以将这些继承方式做一个合并:以他之长补己之短呢?...其实我们知道,class语法也是由es5语法来写,其继承方法和寄生组合式继承方法一样。关于es6类,我在代码自检时候遇到两个重点,值得注意下是: 函数声明会提升,类声明不会。

    1.8K40

    JS进阶:继承

    理解继承之前,需要知道 js 三个东西: 什么是 JS 原型链 this 值到底是什么 JS new 到底是干什么 一、什么是 JS 原型链 我们知道 JS 有对象,比如 var obj =...如果你函数调用不是 call 形式, 请将其转换为 call 形式 三、JS new 到底是干什么?...缺点: 只能继承父类实例属性和方法,不能继承原型属性/方法 无法实现复用,每个子类都有父类实例函数副本,影响性能 3、组合继承 组合上述两种方法就是组合继承。...用原型链实现对原型属性和方法继承,用借用构造函数技术来实现实例属性继承。...let p = new Rectangle(); // ReferenceError class Rectangle {} 2、ES5继承和ES6继承区别 ES5继承实质上是先创建子类实例对象,

    4.4K10

    JS实现继承方式

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

    2.1K20

    Js继承实现方式

    Js继承实现方式 继承是面向对象软件技术当中一个概念,与多态、封装共为面向对象三个基本特征。继承可以使得子类具有父类属性和方法或者重新定义、追加属性和方法等。...// 判断child构造函数Childprototype对象是否在Parent原型链上 特点 父类新增原型方法与属性,子类都能访问到 非常纯粹继承关系,实例是子类实例,也是父类实例 子类实例可以继承父类构造函数属性和方法...不足 实例并不是父类实例,只是子类实例 只继承了父类构造函数属性和方法,没有继承父类原型属性和方法 每个子类都有父类实例函数副本,拷贝了父类函数而不是引用,影响性能 实例继承 为父类实例增加成员与方法...new Child()或直接调用Child() 不足 不支持多继承 实例是父类实例,不是子类实例 同样也是将父类成员与方法做了实例化拷贝 拷贝继承 通过直接将父类属性拷贝到子类原型中实现继承...父类新增原型方法与属性,子类都能访问到 不足 不能继承父构造函数实例对象成员 所有子类实例都会共享父类原型对象中属性 组合继承 组合原型链继承和借用构造函数继承,结合了两种模式优点,传参和复用

    2K20

    js实现继承

    js实现继承 经典继承(原型链) 缺点:过多继承了没用属性 Grandfather.prototype.lastName = 'zhang' function Grandfather() {...grandfatherlastName属性,但是由于原型链关系,造成了son既会继承grandfather自神东西,grandfather原型东西,father自身东西和father原型上东西...,造成了不必要继承 共享原型 本质:重写原型对象 优点:只会继承原型,不会继承父原本自带属性或方法(只有调用new Father()才会继承自身东西) 缺点:给本身原型添加属性或方法时,会把继承那个原型也修改了...) 原理:在函数里面调用函数,约等于将父里面的代码复制粘贴到子里面,然后通过call将父this改成子this 缺点: 不能继承借用构造函数原型 每次调用子构造函数都要调用多一次借用父构造函数...) 雏形 本质:重写原型对象 优点:只会继承原型,不会继承父原本自带属性或方法(只有调用new Father()才会继承自身东西) 缺点:1,这样继承后即使修改了son原型也不会修改father

    5.3K20

    JS原型继承和类式继承

    类式继承(构造函数) JS中其实是没有类概念,所谓类也是模拟出来。特别是当我们是用new 关键字时候,就使得“类”概念就越像其他语言中类了。...另外就是类式继承不支持多重继承,而对于原型继承来说,你只需要写好extend对对象进行扩展即可。 组合模式 另外一种模式,是结合类继承和原型继承各自优点来进行对父类继承。...用类式继承属性,而原型继承方法。这种模式避免了属性公用,因为一般来说,每一个子类属性都是私有的,而方法得到了统一。这种模式称为组合模式,也是继承类式常用到一种方法。...从这里,我们也可以看到类继承和原型基础一些区别。 结论 原型继承比较符合js这种语言特点。因为它本身就是js强大原型一部分。...而类式继承,与其称它为继承方式,毋宁说是一种函数运用技巧来模拟继承罢了。本文是卤煮一己之见,错误偏颇在所难免,如果有之,请各位斧正。

    3.4K90

    js继承与原型链

    对于使用基于类语言,如 Java 开发人员,js 令人困惑,因为它是动态,并且本身不提供一个 class 实现。...谈到继承时,js 只有一种结构:对象。 每个实例对象( object )都有一个私有属性(称之为 __proto__ )指向它构造函数原型对象(prototype )。...该原型对象也有一个自己原型对象( proto ) ,层层向上直到一个对象原型对象为 null。根据定义,null 没有原型,并作为这个原型链中最后一个环节。...几乎所有 js对象都是位于原型链顶端 Object 实例。 尽管这种原型继承通常被认为是 JavaScript 弱点之一,但是原型继承模型本身实际上比经典模型更强大。...例如,在原型模型基础上构建经典模型相当简单。

    1.4K10

    js实现继承几种方式

    js作为一个面向对象弱类型语言,继承也是其非常强大特性之一。一般情况下会出现下面的6中继承方式。...无法实现多继承 来自原型对象引用属性是所有实例共享 创建子类实例时,无法向父类构造函数传参 2、构造继承 核心:使用父类构造函数来增强子类实例,等于是复制父类实例属性给子类(没用到原型) function...) 缺点: 实例并不是父类实例,只是子类实例 只能继承父类实例属性和方法,不能继承原型属性/方法 无法实现函数复用,每个子类都有父类实例函数副本,影响性能 3、实例继承 核心:为父类实例添加新特性...缺点: 效率较低,内存占用高(因为要拷贝父类属性) 无法获取父类不可枚举方法(不可枚举方法,不能使用for in 访问到) 5、组合继承(推荐) 核心:通过调用父类构造,继承父类属性并保留传参优点...) 6、寄生组合继承(推荐) 核心:通过寄生方式,砍掉父类实例属性,这样,在调用两次父类构造时候,就不会初始化两次实例方法/属性,避免组合继承缺点 function Cat(name){

    1.4K20

    JS继承机制总结

    JS继承机制总结 继承就是子类可以使用父类所有功能,并且对这些功能进行扩展。 JS继承机制主要为原型链继承、构造函数继承、组合继承、寄生继承、寄生组合继承、原型式继承和混合式继承。...关于es6提出class继承本文不做阐述,会另做一篇文章进行分析总结。 本文主要是做总结,各个继承方式内容不做特别详细说明。...,实现多继承,创建子类实例时,可以向父类传递参数 缺点 只能继承父类实例上属性与方法,无法继承父类原型上属性与方法。...缺点 一些引用数据操作时候会出问题,两个实例会公用继承实例引用数据类 谨慎定义方法,以免定义方法也继承对象原型方法重名 无法直接给父级构造函数使用参数 寄生式继承 继承规则 //寄生式继承也没啥东西...缺点 一些引用数据操作时候会出问题,两个实例会公用继承实例引用数据类 谨慎定义方法,以免定义方法也继承对象原型方法重名 无法直接给父级构造函数使用参数 混合式继承 继承规则 //这个**混入方式继承

    1.6K10

    深入理解继承

    学习怎样创建对象是理解面向对象编程第一步,第二步是理解继承。在传统面向对象编程语言中,类继承其他类属性。...然而,JS继承方式与传统面向对象编程语言不同,继承可以发生对象之间,这种继承机制是我们已经熟悉一种机制:原型。...1.原型链接和Object.prototype js内置继承方式被称为原型链接(prototype chaining)或原型继承(prototypal inheritance)。...正如我们在前一天所学,原型对象上定义属性,在所有的对象实例中都是可用,这就是继承一种形式。对象实例继承了原型中属性。而原型也是一个对象,所以它也有自己原型,并且继承原型中属性。...2:对象继承 最简单继承方式是对象之间继承。我们所需要做就是指定新创建对象原型应该指向哪个对象。

    48240

    JS原理学习 (2) 》深入理解原型链与继承

    本文就带大家来深入理解下JavaScript中原型,欢迎各位感兴趣开发者阅读本文。 原理解析 接下来我们来逐步分析下原型与对象之间关系。...// {constructor: Person(), __proto__} 上述代码中我们创建了一个名为Person函数: prototype属性指向就是Person原型(每个除null外JS...Sub对象,它与Super对象之间就组成了一条原型链,符合我们在原理解析中所讲关系 接下来,我们将上述分析内容画成图,更好理解一点,如下所示(橙色线条为原型链): image-20210311112200899...我们前面讲所有的继承方法,都没有实现构造函数上静态方法继承,然而在ES6class继承中,子类是可以继承父类静态方法。...,请移步:js-learning 写在最后 本文为《JS原理学习》系列第2篇文章,本系列完整路线请移步:JS原理学习 (1) 》学习路线规划

    30830

    JS 继承多种方法

    一、原型链 学过java同学应该都知道,继承是java重要特点之一,许多面向对象语言都支持两种继承方式:接口继承和实现继承,接口继承继承方法签名,而实现继承继承实际方法,在js中,由于函数没有签名...继承关系 最后,要提醒大家是,所有引用类型默认都继承了Object,这个继承也是通过原型链实现,因此,其实原型链顶层就是Object原型对象啦。...原型链继承 最常见继承方法就是使用原型链实现继承啦,也就是我们上面所介绍,接下来,还是看一个实际例子。...,融合了它们优点,现在已经成为js中最常用继承方法。...寄生组合式继承 组合继承js中最经常用到一种继承方法,而我们前面也已经说了组合继承缺点,组合继承需要调用两次超类型构造函数,一次是在创建子类型原型时候,另一次是在子类型构造函数内部,子类型最终会包含超类型对象全部实例属性

    2.8K10
    领券