ES6中的class与继承

最新推荐文章于 2023-07-11 19:10:10 发布
最新推荐文章于 2023-07-11 19:10:10 发布
阅读量892 收藏 2
点赞数 4
文章标签： 类 class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48566243/article/details/110091746
版权

ES6中的class与继承

ES5中的类

ES5中如果要生成一个对象实例，需要先定义一个构造函数，然后通过new操作符来完成
实例：
在这里插入图片描述

ES6中的类

ES6引入了class（类）这个概念，通过class关键字可以定义类该关键字的出现使得javascript在对象写法上更加清晰，更像是一种面向对象的语言。
实例：

在这里插入图片描述

注意项：
1.在类中声明方法的时候，千万不要给该方法加上function关键字
2.方法之间不要用逗号分隔，否则会报错由上面代码可以看出类实质上就是一个函数。类自身指向的就是构造函数 所以可以认为ES6中的类其实就是构造函数的另外一种写法！在这里插入图片描述
constructor方法是类的构造函数的默认方法，通过new命令生成对象实例时，自动调用该方法
在这里插入图片描述

constructor中定义的属性可以称为实例属性（即定义在this对象上），constructor外声明的属性都是定义在原型上的，可以称为原型属性（定义在class上)。
hasOwnProperty()函数用于判断属性是否是实例属性。其结果是一个布尔值， true说明是实例属性，false说明不是实例属性。
in操作符会在通过对象能够访问给定属性时返回true,无论该属性存在于实例中还是原型中。
在这里插入图片描述

class不存在变量提升，所以需要先定义再使用。因为ES6不会把类的声明提升到代码头部，但是ES5就不一样,ES5存在变量提升,可以先使用，然后再定义
在这里插入图片描述

ES5中的继承 （组合继承:原型链继承 + 借用构造函数)

原型链继承

父类的实例作为子类的原型
在这里插入图片描述

借用构造函数继承

在子类内,使用call()调用父类方法,并将父类的this修改为子类的this 相当于是把父类的实例属性复制了一份放到子类的函数内
在这里插入图片描述

组合式继承

既能调用父类实例属性，又能调用父类原型属性
在这里插入图片描述

ES6中的继承

class继承

在这里插入图片描述

深山踏红叶²
关注
  • 4
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS面向对象编程——ES6 中class的继承用法详解
10-15
主要介绍了JS面向对象编程——ES6 中class的继承用法,结合实例形式详细分析了ES6中class继承的相关操作技巧与使用注意事项,需要的朋友可以参考下
关于ES5中的prototype与ES6中class继承的比较
mym940725的博客
12-20 1529
ES5: 继承： 1.通过原型链实现继承。子类的prototype为父类对象的一个实例，因此子类的原型对象包含指向父类的原型对象的指针，父类的实例属性成为子类原型属性 2.ES5 的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)） ES6: 继承： 1.子类没有自己的this对象，因此必须在construct中通
es6（六）—— JavaScript中class（类）的继承
weixin_44784401的博客
02-09 1340
JavaScript中class（类）的继承
ES6——class类实现继承
热门推荐
qq_49002903的博客
08-01 3万+
上面示例代码中子类中有两句重复的逻辑语句，在父类中我们已经声明过了，在子类中再写一次就冗余了，让我们接下来看看有没有什么好的解决办法。这就是上面的代码冗余的问题解决办法可以将name和age写到super参数中就可以直接继承父类的逻辑，减少冗余代码。注意在子类（派生类）的构造函数中使用this或者返回默认对象之前，必须先通过super调用父类的构造函数！子类继承父类之后，子类中也可以直接调用父类的方法（最上方示例代码中有涉及这里就不再做展示了）。中，以创建一个类，该类是另一个类的子类。...
es6 原生构造函数的继承
歪脖先生的博客
02-02 896
原生构造函数的继承 原生构造函数是指语言内置的构造函数，通常用来生成数据结构。ECMAScript 的原生构造函数大致有下面这些。 Boolean() Number() String() Array() Date() Function() RegExp() Error() Object() 以前，这些原生构造函数是无法继承的，比如，不能自己定义一个Array的
JavaScript ES6实现继承
最新发布
weixin_56663198的博客
07-11 1647
1 对象的方法补充 2 原型继承关系图 3 class方式定义类 4 extends实现继承 5 extends实现继承 6 多态概念的理
ES6 javascript中Class类继承用法实例详解
10-19
主要介绍了ES6 javascript中Class类继承用法,结合实例形式较为详细的分析了ES6继承的基本用法、相关属性、方法与使用技巧,需要的朋友可以参考下
详解ES6中class的实现原理
01-18
一、在ES6以前实现类和继承 　实现类的代码如下： function Person(name, age) { this.name = name; this.age = age; } Person.prototype.speakSomething = function () { console.log(I can speek chinese); };...
ES6---class类继承
m0_55673399的博客
09-15 183
this显示绑定的属性为私有属性，而sayName（）方法没有this显示绑定，则定义在原型上是公共方法。let class1 = new Newclass('class1', '1')//我是公共方法--定义在原型上 class1。let class2 = new Newclass('class2', '2')//我是公共方法--定义在原型上 class2。console.log('我是公共方法--定义在原型上', this.name)关键字extends。
ES6中class类、类的继承extends、多态、字面量的增强、解构、let/const、字符串模板、函数的默认参数、展开语法、数值、Symbol使用、Set、Map、es7-13总结
米儿的博客
11-17 1829
一、认识class定义类 我们会发现，按照前面的构造函数形式创建 类，不仅仅和编写普通的函数过于相似，而且代码并不容易理解。 在ES6（ECMAScript2015）新的标准中使用了class关键字来直接定义类； 但是类本质上依然是前面所讲的构造函数、原型链的语法糖而已； 可以使用两种方式来声明类：类声明和类表达式 // 类的声明 class Person { } // 类的表达式 var Animal = class { } 类和构造函数的异同 类的一些特性和我们的构造函数的特性其实是一
ES6学习（八）：Class的继承
激洪的博客
04-17 1912
ES6之Class的继承
【ES6】class类与继承
好川的博客
08-08 815
什么是Class?Ⅰ、类的使用1、constructor方法2、实例属性写在 constructor 函数的方法都可以执行，那么在哪里呢？proto_在类里加方法 ===上加3、静态属性在类里===Ⅱ、类继承的方式1、实例继承 与 extends 关键字继承。...
JavaScript es6 五种常见继承方式
m0_51622088的博客
10-09 2106
原型继承、构造函数继承、组合继承、寄生组合继承、class继承
【ES6】- class继承
m0_55960697的博客
04-10 1055
class继承 Class 可以通过extends关键字实现继承，让子类继承父类的属性和方法。extends 的写法比 ES5 的原型链继承，要清晰和方便很多。 // 继承Person类中的sayHi方法 class Person { sayHi(){ console.log("hello"); } } class Chinese extends Person {} // 继承Person类中的属性和方法 class Person { cons..
JS高级 之 ES6 实现继承
玄鱼殇
07-21 1451
JS高级 之 ES6 实现继承
es6类的继承，看完还不会我也没办法
leleshuo
10-12 1038
今天来聊聊es6类的继承，上一次关于类的一些写法和特性已经总结的差不多了，所以这次重点就在继承上面了。
【JS继承】JS继承之ES6 Class 继承
吉帅振博客
06-23 693
JS是一种基于对象的语言，要实现面向对象，写法跟传统的面向对象有很大的差异。ES6引入了Class语法糖，使得JS的继承更像面向对象语言的写法。此篇博客，分为：基本介绍、Vue使用案例Class可以通过extends关键字实现继承，这比ES5的通过修改原型链实现继承，要清晰和方便很多；1234代码定义了一个Son 类，该类通过extends关键字，继承了Father类的所有属性和方法，但是由于没有部署任何代码,所以这两个类完全一样，等于复制了一个Father类。12345678910 construct
【前端学习 - JS（17）ES6】
weixin_60364883的博客
01-16 220
ES6 1-1 背景 EC版本 发布时间 新增特性 2009(ES5) 2009年11月 扩展了Object、Array、Function的功能等新增特性 2015(ES6) 2015年6月 类，模块化，箭头函数，函数参数默认值等 2016(ES7) 2016年3月 includes，指数操作符 2017(ES8) 2017年6月 sync/await，Object.values()，Object.entries()，Stri.
JS-继承的实现方式
weixin_46254175的博客
03-04 115
文章目录原型继承call继承寄生组合继承es6中class 原型继承 通过prototype把子类的原型绑到父类的实例上，子类就可以调用父类的公有属性和方法、私有的属性和方法。但是这种方式实现继承，无论父类中公有的属性和方法还是私有的属性和方法，都会变成子类公有的属性和方法，这样子类就可以重写父类的属性和方法，也有影响父类的其他实例。 function Parent(x){ this.x = x...
ES6中class 语法
04-20
ES6中class语法的特点包括： 1. 可以使用class关键字定义类，使得类的定义更加清晰易读。 2. 类中可以直接声明属性和方法，不需要使用Object.prototype挂载方法。 3. 支持类的继承，可以使用extends关键字继承其他类...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值