首页
学习
活动
专区
工具
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高级编程》

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

JS 继承

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

2.8K32

js继承

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

2.5K10

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()中。

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

2K20

JS原型继承和类式继承

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

3.4K90

深入理解继承

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

46040

js实现继承几种方式

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

1.4K20

js继承与原型链

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

1.4K10

JS继承机制总结

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

1.5K10

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

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

28130

理解jsthis

为什么使用this 如果没有this,那么我们代码会是下面的写法: 在方法中,为了能够获取到name名称,必须通过obj引用(变量名称)来获取。...但是这样做有一个很大弊端:如果我将obj名称换成了info,那么所有的方法中obj都需要换成info。...(编写位置)没有关系; 3.this绑定和调用方式以及调用位置有关系; 4.this是在运行时被绑定; this绑定规则 默认绑定 在独立函数调用情况下使用默认绑定 独立函数调用我们可以理解成函数没有被绑定到某个对象上进行调用...: 也就是它调用位置中,是通过某个对象发起函数调用。...这个和setTimeout源码内部调用有关; setTimeout内部是通过apply进行绑定this对象,并且绑定是全局对象; 案例二:数组forEach 数组有一个高阶函数forEach,用于函数遍历

3K30

JS 继承多种方法

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

2.8K10
领券