ES6-11中class类：定义构造函数初始化、继承父类、调用父级构造函数等

最新推荐文章于 2024-05-02 10:57:41 发布
VIP文章 最新推荐文章于 2024-05-02 10:57:41 发布
阅读量613 收藏
点赞数
分类专栏： es6 文章标签： es6 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenjunxing1992/article/details/125614998
版权

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过 class 关键字，可以定义类。基本上，ES6 的 class 可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

知识点：
        1. class 声明类
        2. constructor 定义构造函数初始化
        3. extends 继承父类
        4. super 调用父级构造
最低0.47元/天 解锁文章
Ben阿星
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react ES6下子组件调用父组件方法
Flasco的个人博客
05-30 1万+
es6下React Native 子组件调用父组件的方法
es6-class-bind-all:自动绑定es6类中所有方法的'this'范围
05-09
问题 如您所见，构造函数中有太多.bind()操作。 一旦有大量的类在回调中被调用或对其范围进行了任何更改，这将是非常麻烦的事情。 class Person { constructor ( ) { this . name = 'Steve' this . age = 20 this . gender = 'male' this . setName = this . setName . bind ( this ) this . setAge = this . setAge . bind ( this ) this . setGender = this . setGender . bind ( this ) } setName ( name ) { this . name = name } setAge ( age
es6 类继承extends和super关键字,super调用父类普通函数以及继承中属性方法查找原则，类中this的指向问题
艾小逗
08-26 4275
类继承extends和super关键字 extends class Father{ constructor(){ //构造函数 } money(){ console.log(100) } } class Son extends Father{ //extends 子类继承父类 } var son = new Son(); son.money(); //100 ...
【ES6】js 中class的extends、super关键字用法和避坑点
qq_22744093的博客
09-04 1668
在JavaScript中，使用class关键字可以实现面向对象编程。其中，extends和super是两个非常重要的关键字，它们分别用于实现类的继承和调用父类的方法。
ES6 Class的继承（extends、super作为函数和对象的用法、自定义数据结构、获取父类方法、类的prototype和__proto__属性、实例的__proto__属性）
AIWWY的博客
08-31 727
目录 Class的继承 extends super super作为函数 super作为对象 自定义数据结构 获取父类 类的prototype和__proto__属性 实例的__proto__属性 Class的继承 extends Class 可以通过extends关键字实现继承 父类的静态方法，也会被子类继承。 class A { static hello() { console.log('hello world'); } } class B exten
ES6 中的类（Class）
y13103192727的博客
10-03 179
es6 的 class 其实就是之前的构造函数和原型 // 之前的构造函数加原型 // 坐标构造函数 function Point(x, y) { this.x = x, this.y = y } //构造函数的原型 Point.prototype.toString = function () { return `{${this.x},${this.y}}` } //创建实例化对象 let point = new Point(1, 2) console.log(poin
JS类和对象，super关键字
weixin_44809439的博客
08-13 1343
对象是由属性和方法组成的： 属性：事物的特征，在对象中用属性来表示（常用名词） 方法：事物的行为，在对象中用方法来表示（常用动词） 类抽象了对象的公共部分，它泛指某一大类（class） 对象特指某一个，通过类实例化一个具体的对象 面向对象的思维特点: 抽取（抽象）对象共用的属性和行为组织(封装)成一个类(模板) 对类进行实例化, 获取类的对象 创建和实例化类 class name { // class body } var xx = new name(); construct
ES6中Class类构造函数、实例、原型属性和方法、继承extends、super关键字
qq_51066068的博客
05-11 2080
目录 Class类 构造函数 实例属性和方法 原型属性和方法 静态属性和方法 继承 super 关键字 Class类 JavaScript 语言中，生成实例对象的传统方法是通过构造函数。 ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰更像面向对象编程的语法而已。所以ES..
js中的类
qq_48432396的博客
10-24 1405
//二、类不会被提身------------------------------------------------------------------------- 什么是类： 在ES6中新增加了类的概念，可以使用class关键字声明一个类， 之后以这个类来实例化对象。类抽象了对象的公共部分，它泛指 ...
es6-css-minify：轻松缩小VS Code中CSS和JavaScript
02-05
当打开.js或.css文件时，状态栏中将出现一个Minify按钮。 您也可以通过单击F1或CTRL+SHIFT+P来运行Minify: Document 。加载自定义配置默认情况下，扩展名将查找.uglifyrc ， .cleancssrc和.autoprefixerrc 。 您...
es5-function-to-class-codemod：将ES5函数转换为ES6类
02-05
将ES5函数转换为ES6类 :package: :laptop:产品特点 :hundred_points: prototype方法 prototype静态方法 prototype上的变量和文字 具有defineProperty Getters，Setters 块级变量样本输入 :kick_scooter: 和输出 :...
JavaScript-ES6--Promises-Example:JavaScript-ES6--Promises-示例
04-29
JavaScript-ES6--Promises-示例 api链接-https //jsonplaceholder.typicode.com/users
es6-string-html：es6多行字符串中的突出显示代码
02-05
在es6多行字符串中添加了对代码的语法突出显示支持： ...只需在字符串之前插入注释/ * html * /或html （或sql而不是html）（有关可能的值，请参见“要求”部分），或从命令菜单中选择Insert es6-string-h
es6中的class类属性和用法
suqi_123123的博客
11-06 70
使用ES6类，我们可以更好地组织和管理代码，提高代码的可读性和可维护性。它还支持面向对象编程的核心概念，如继承、多态等，使得代码的设计更加灵活和可扩展。
ES6 中的 Class 类
youngjqz的博客
05-04 1652
ES6 中的新引入的 class 具有正式定义类的能力,我们可以使用 class 关键字来定义类,和函数类型相似,类的定义的主要方式是 类声明 和 类表达式 1.类的定义 类的两种定义的方式都需要使用到 class 关键字 // 类声明 class Person {} // 类表达式 let Person = class {}; 需要注意的是,类表达式和函数表达式类似,使用 var 关键字声明,在求值前引用,拿到的是undefined,如果是使用 let 关键字声明,则会报错,原因是使用
使用 es6 class类创建对象 在其他页面 用vue引用报错 is not a constructor
热门推荐
weixin_39090097的博客
09-14 2万+
最近项目中使用 es6 新语法class创建对象，在 vue 文件中导入以后，在new的时候报错，很是郁闷 然后 启动项目 ，打开浏览器 刷刷报错   明明是是引入了为嘛报错呢？ 最后发现是因为 命名的问题    所以小伙伴 们，引入的时候别刷刷名字 全部一通复制，let的定义名字 千万不能和 import 定义的名字一样...
ES6--class类（详解/看完必会）
蜗牛~~
02-22 7538
ES6中class类的学习，看完必会
ES6 class基本语法 及其 基本使用
qq_19652407的博客
11-17 321
ES6 class基本语法 及其 基本使用 一、class的简介 class可以看作是一个语法糖，目的是让写出来的代码更加简洁明了。 class语法创建实例对象与传统方法的差异： 传统方法通过构造函数实现： function square(height,width){ this.height = height; this.width = width; } square.prototype.area = function(){ return this.height * this.wid
现代JavaScript：对ES6+的深入讲解，新型的JS特性以及怎样在项目中使用它们
最新发布
哎 你看的博客
05-02 748
let 和 const 关键字、模板字符串（Template Strings）、箭头函数（Arrow Functions）、解构赋值（Destructuring）、Promise 和 async/await、类（Classes）、模块（Modules）、展开语法（Spread Operator）、**默认参数(Default Parameters)**、对象/数组的静态方法：
利用ES6中的类，实现子类继承父类，其中父类有moneycars和house属性以及 manage0方法。
05-25
可以按照以下方式定义父类和子类： ```javascript // 定义父类 class Person { constructor(moneycars, house) { this.moneycars = moneycars; this.house = house; } manage0() { console.log("我会管理财产和房产"); } } // 定义子类 class Son extends Person { constructor(moneycars, house, name) { super(moneycars, house); this.name = name; } introduce() { console.log(`我叫${this.name}，我继承了${this.moneycars}元钱和${this.house}套房子`); } } ``` 在上面的代码中，`Person`为父类，拥有`moneycars`和`house`属性以及`manage0`方法。`Son`为子类，继承了`Person`，并添加了一个`name`属性和`introduce`方法。在子类的构造函数中，通过`super`关键字调用父类的构造函数，并将`moneycars`和`house`传递给父类进行初始化。 现在我们可以创建一个`Son`对象，并调用它的`introduce`方法来验证继承是否成功： ```javascript let son = new Son(1000000, 2, "小明"); son.introduce(); // 输出：我叫小明，我继承了1000000元钱和2套房子 ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值