ES6类的引入

已于 2022-08-25 21:04:28 修改
阅读量1k 收藏
点赞数
文章标签： java
于 2019-09-20 17:18:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tongxin_tongmeng/article/details/101068720
版权 
旧方式:ES5中通过创建构造器,然后将方法指派到该构造器原型的方式模仿类结构,这称为自定义类型,这是ES6类的出发点

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rvbmd4aW5fdG9uZ21lbmc=,size_16,color_FFFFFF,t_70

新方式:类声明写法

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rvbmd4aW5fdG9uZ21lbmc=,size_16,color_FFFFFF,t_70

新方式:类表达式写法-->匿名类表达式

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rvbmd4aW5fdG9uZ21lbmc=,size_16,color_FFFFFF,t_70

新方式:类表达式写法-->具名类表达式

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rvbmd4aW5fdG9uZ21lbmc=,size_16,color_FFFFFF,t_70

类是一级公民:可以被当作值使用-->可以作为参数传递,可以作为返回值,可以给变量赋值

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rvbmd4aW5fdG9uZ21lbmc=,size_16,color_FFFFFF,t_70

立即调用类构造器实现单例:定义一个匿名类,只用来创建一个对象就没用了

 watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rvbmd4aW5fdG9uZ21lbmc=,size_16,color_FFFFFF,t_70

类的属性和get,set方法

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rvbmd4aW5fdG9uZ21lbmc=,size_16,color_FFFFFF,t_70

类的方法名可以为变量

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rvbmd4aW5fdG9uZ21lbmc=,size_16,color_FFFFFF,t_70 

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rvbmd4aW5fdG9uZ21lbmc=,size_16,color_FFFFFF,t_70

类的生成器:调用生成器,返回迭代器

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rvbmd4aW5fdG9uZ21lbmc=,size_16,color_FFFFFF,t_70

使用Symbol.iterator自定义生成器,使自定义类具有默认迭代器

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rvbmd4aW5fdG9uZ21lbmc=,size_16,color_FFFFFF,t_70

旧方式:定义类的静态方法

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rvbmd4aW5fdG9uZ21lbmc=,size_16,color_FFFFFF,t_70

新方式:定义类的静态方法

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rvbmd4aW5fdG9uZ21lbmc=,size_16,color_FFFFFF,t_70

旧方式:类的继承

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rvbmd4aW5fdG9uZ21lbmc=,size_16,color_FFFFFF,t_70

新方式:类的继承

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rvbmd4aW5fdG9uZ21lbmc=,size_16,color_FFFFFF,t_70

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rvbmd4aW5fdG9uZ21lbmc=,size_16,color_FFFFFF,t_70

子类可以重写父类中的方法

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rvbmd4aW5fdG9uZ21lbmc=,size_16,color_FFFFFF,t_70

子类方法中可以通过super调用父类中的方法

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rvbmd4aW5fdG9uZ21lbmc=,size_16,color_FFFFFF,t_70

子类可以继承父类的静态成员

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rvbmd4aW5fdG9uZ21lbmc=,size_16,color_FFFFFF,t_70

父类可以是表达式:只要表达式返回值具有构造函数和方法原型即可

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rvbmd4aW5fdG9uZ21lbmc=,size_16,color_FFFFFF,t_70

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rvbmd4aW5fdG9uZ21lbmc=,size_16,color_FFFFFF,t_70

类的多继承:可以通过如下方式实现

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rvbmd4aW5fdG9uZ21lbmc=,size_16,color_FFFFFF,t_70

旧方式:不支持继承数组

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rvbmd4aW5fdG9uZ21lbmc=,size_16,color_FFFFFF,t_70

新方式:支持继承数组

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rvbmd4aW5fdG9uZ21lbmc=,size_16,color_FFFFFF,t_70

子类继承Array,ArrayBuffer,Map,Promise,RegExp,Set,类型化数组 这些内置类作为父类时,当子类对象调
用从父类继承来的方法时,返回值的类型都是子类的类型(这是不符合预期的,比如子类继承数组,子类对象调用继承
来的slice()方法时,本来想返回一个数组类型的结果,但实际返回的却是子类的类型)

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rvbmd4aW5fdG9uZ21lbmc=,size_16,color_FFFFFF,t_70

上面现象的原因是因为,这些内置类的Symbol.species属性的get方法,返回值都是this,这些内置类都是类似下
面这样定义的,子类继承了父类的Symbol.species属性的get方法,返回this时返回的就是子类对象了

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rvbmd4aW5fdG9uZ21lbmc=,size_16,color_FFFFFF,t_70

根据上面分析,子类继承了父类的Symbol.species属性的get方法返回的是this,我们只需要在子类中重写父类的
这个方法,让其返回父类型就可以了

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rvbmd4aW5fdG9uZ21lbmc=,size_16,color_FFFFFF,t_70

构造函数中,new.target为当前类型的情况:通过new调用构造函数

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rvbmd4aW5fdG9uZ21lbmc=,size_16,color_FFFFFF,t_70

构造函数中,new.target为子类型的情况:子类中通过super调用父类构造函数

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rvbmd4aW5fdG9uZ21lbmc=,size_16,color_FFFFFF,t_70

new.target可以实现抽象类的效果:只能被继承,不可以new实例化对象

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rvbmd4aW5fdG9uZ21lbmc=,size_16,color_FFFFFF,t_70

类的构造函数被调用时,必须使用new,否则报错,这可以防止将类作为函数调用

 

 

童心同萌
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
es6模块导入方法
qq_27054291的博客
04-24 735
export导出语法 // default exports export default 42; export default {}; export default []; export default foo; export default function () {} export default class {} export default function foo () {} expor...
ES6 中的类
Amy的博客
01-02 633
ES6 ES6 引入了 Class（类）这个概念作为对象的模版。通过 class 关键字可以定义类。 基本上，ES6 中的 class 可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰，更像面向对象编程的语法而已。 class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ',' + this.
Es6引入类
weixin_39537054的博客
09-08 532
Es6引入类，这和java的类基本是一样的。用法也差不多。 直接看代码如下： class SuperBase { constructor(id,name,age){ this.id = id; this.name = name; this.age = age; } showIn...
Web前端系列之ES6核心编程完全解析
最新发布
sinat_30844883的博客
07-27 798
ES6提供了更接近面向对象（javascript本质上是基于对象的语言）语言的写法，引入了class类这个概念，作为对象的模板。通过class关键字，可以定义类。 基本上，ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
ES6中的类
qq_41764138的博客
09-07 277
类的定义 一般的定义 class Person{ constructor (name, age) { [this.name, this.age] = [name, age]; } // 函数挂载于原型上 showName () { return `my name is ${this.name}`; } } 赋值...
es6 - 导入导出
weixin_33913377的博客
07-21 478
今天用node纠结了半天，明明是正确的语法，一直报错，原来node和chrome并不支持es6语法....   1. npm install package.json 1 { 2 "name": "ES6", 3 "version": "1.0.0", 4 "description": "", 5 "main&qu
es6在网页中模块引入的方法
weixin_30867015的博客
08-14 996
前言： 以前，当然包括现在的大部分js引入，我们都是利用<script></script>这种全局的方式进行引入，当然这种弊端还是用的，比如这样直接利用script引入的话，会导致全局暴露，会有变量冲突的可能。 基于此，es6引入了模块引用，具体就是利用import 和 export来进行操作。（当然，大部分后台语言早已经实现了模块引入，甚至包括css这种样式）。 1...
es6 --- 类
FOR 的博客
07-22 208
ECMAScript 6 新引入的 class 关键字具有正式定义类的能力。class（类） 其实是对ES5 的构造函数 ， 继承等进行了封装 ， 语法糖等 ， 使的构造函数创建，继承等像使用类一样。 类定义 与函数类型相似，定义类也有两种主要方式：类声明和类表达式。这两种方式都使用 class 关键字加大括号。 // 类声明 class Person {} // 不需要小括号 // 类表达式 const Animal = class {}; 类表达式 类表达式可以只有变量名， 也可以有类名和变
es6模块引入跨域问题
m0_70721464的博客
07-31 412
当你在html中引入js模块时，如下图所示，在html中在js中当你在浏览器中直接打开时，会报如下错误这是由于不能跨模块导入，为解决问题，可以如下写法加一个type属性，当你再运行的时候，会报另一个错误这是由于模块加载的内容需要在服务器中显示，而不是在本地文件的路径下显示。...
es6-samples:演示 ES6 中引入的各种功能的代码示例
06-10
ES6引入了基于原型的面向对象编程的类语法，虽然实质仍然是函数，但提供了更接近传统面向对象编程的写法。通过`class`关键字定义类，`extends`实现继承。 6. **模块（Module）**： 通过`import`和`export`关键字...
详解vue-cli+es6引入es5写的js(两种方法)
12-12
学习了vue有一段日子了，vue+es6开发非常好用，vue的插件非常多，很充足，但是还是会用到引入第三方外部js的时候，但是很多人在vue-cli中的.vue文件引入es6会出很多错误，因为我们的代码是es6写的，你引入es5的js...
ES6 类(Class)基本用法和静态属性+方法详解
12-20
ES6 类(Class)基本用法和静态属性+方法详，博客地址：http://blog.csdn.net/pcaxb/article/details/53759637
js定义类的方法示例【ES5与ES6】
10-16
ES5版本通常通过构造函数和原型的结合使用来模拟类的行为，而ES6则引入了class关键字来更直观和简洁地定义类。 在ES5中，定义一个类通常需要创建一个构造函数，并在该构造函数中初始化对象的属性。如果需要方法，则...
ES6引入的新类型
qq_45868411的博客
08-12 213
文章目录一、Map(映射)二、函数三、类四、JavaScript的代码规范 一、Map(映射) 1.Map类似于对象，也是键值对的集合。但是”键”的范围不限于字符串，各种类型的值(包括对象)都可以当做键。也就是说，Object(对象)提供了”字符串-值”的对应，Map结构提供了”值-值”的对应，是一种更完善的Hash结构实现。 2.Map的构建 //使用二位数组构建Map结构 let arr = [['name','lisi'],['title','kungfu']]; let map = new Map(
JS的ES6中的类使用
weixin_47342624的博客
09-17 343
构造方法在new操作符，创建实例时调用，实例方法绑定到原型prototype上，静态方法绑定到类本身上this._address = "广州市"}// 普通的实例方法// 创建出来的对象进行访问}}}
【ES6模块化】import - export - 按需引入 - 项目中使用babel - ES6模块化引入npm包
YK菌的博客
03-04 1022
文章目录1. 什么是模块化2. 模块化的好处3. 模块化规范产品3.1 浏览器端模块化规范3.2 服务器端模块化规范3.3 大一统的模块化规范——ES6模块化4. ES6模块化基本使用4.1 export 模块暴露数据4.1.1 分别暴露 (按需暴露)4.1.2 统一暴露4.1.3 默认暴露4.2 import引入模块4.2.1 通用的引入4.2.2 解构赋值形式（按需引入）4.2.3 针对默认暴露的简便导入形式4.3 直接导入并执行模块代码4.4 浏览器使用5. 项目中使用babel6. ES6模块化引入
ES6_Javascript_讲解
zhengxiuchen86的博客
07-16 184
01 课程介绍及引导 02 环境部署及课程介绍 03 数组方法(forEach) 04 数组方法(map) 05 数组方法(filter和find) 06 数组方法(every和some) 07 数组方法(reduce) 08 let和const 09 模板字符串 10 箭头函数 11 增强对象字面量 12 函数参数默认值 13 展开运算符 14 解构(数组和对象) 15 面向对象(class)...
ES6 三种不同的模块导入方式
m0_64436820的博客
08-20 573
ES6 三种不同的模块导入方式。
项目上手： 模块导入导出 es6
qq_36413371的博客
03-11 116
一：es6模块导入导出 node 13.2.0才支持es的模块导入导出 默认导出在前 ，按需导入在后
ES6类详解：入门与原型模拟
ES6中的类是一种面向对象编程的重要特性，它为JavaScript语言引入了类和类继承的概念，弥补了早期版本（如ES5）在这方面的不足。在ES5中，尽管JS不直接支持类，但开发者可以通过构造函数和原型链来实现类似的功能。...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

童心同萌

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值