es6中的class的使用
---恢复内容开始---
es5中生成实例对象的传统方法是通过构造函数:
function Point(x,y){
this.x = x;
this.y = y;
}
Point.prototype.toString = function(){
return '(' + this.x + ', ' + this.y + ')';
}
var p= new Point(2,3);
console.log(p.toString())
ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。基本上,ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用 ES6 的class改写
class Point{
constructor(x,y){
this.x = x;
this.y = x;
}
toString(){
return '(' + this.x + ', ' + this.y + ')';
}
}
var p= new Point(2,3);
console.log(p.toString())
浏览器的执行结果
上面代码定义了一个“类”,可以看到里面有一个constructor方法,这就是构造方法,而this关键字则代表实例对象。
class Point {类的数据类型就是函数,类本身就指向构造函数。
// ...
} typeof Point // "function"
Point === Point.prototype.constructor // trueconstructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法。一个类必须有constructor方法,如果没有显式定义,一个空的constructor方法会被默认添加。
class Point {
}
// 等同于
class Point {
constructor() {}
}
如果忘记加上new,像函数那样调用Class,将会报错
class Point {
// ...
}
// 报错
var point = Point(2, 3);
// 正确
var point = new Point(2, 3);
super可以继承类
class Animal{
constructor(name){
this.name = name;
}
getName() {
return this.name
}
}
let animal = new Animal('animal');
console.log(animal.getName());
class Cat extends Animal{
constructor() {
super()
this.name = 'cat';
}
}
let cat = new Cat();
console.log(cat.getName())
运行结果:

使用super()注意
在构造函数中访问this之前一定调用super(),它负责初始化this,如果在调用super()之前之前尝试访问this会导致程序出错
如果不想调用super(),唯一的方法就是让类的构造函数返回一个对象
父类的静态方法可以被子类继承:
class Foo {
static classMethod() {
return 'hello';
}
}
class Bar extends Foo {
}
Bar.classMethod() // 'hello'
可计算成员名称:类和对象字面量有很多相似之处,类方法和访问器属性也支持使用可计算名称,用方括号包裹一个表达式可使用计算名称:
let methodName = "sayName";
class PersonClass {
constructor(name){
this.name = name;
}
[methodName](){
console.log(this.name)
}
}
let me = new PersonClass("ninaclass");
me.sayName();//ninaclass
---恢复内容结束---
es6中的class的使用的更多相关文章
- ES6中的模板字符串和新XSS Payload
ES6中的模板字符串和新XSS Payload 众所周知,在XSS的实战对抗中,由于防守方经常会采用各种各样严格的过滤手段来过滤输入,所以我们使用的XSS Payload也会根据实际情况作出各种各样的 ...
- ES5和ES6中的继承 图解
Javascript中的继承一直是个比较麻烦的问题,prototype.constructor.__proto__在构造函数,实例和原型之间有的 复杂的关系,不仔细捋下很难记得牢固.ES6中又新增了c ...
- ES6中块作用域之于for语句是怎样的?
在ES6中新加了快作用域的概念(C语言就有,作为类c语言的js,当然应该加上),算是很好理解. { let i; } console.log(i);// i is not defined 在代码块当中 ...
- ES6中的var let const应如何选择
javascript世界里面的每个人都在说有关ECMAScript 6 (ES6,也称作ES 2015)的话题,对象的巨大变化 ( 类 , super() , 等), 函数 (默认参数等), 以及模块 ...
- Nodejs与ES6系列4:ES6中的类
ES6中的类 4.1.class基本语法 在之前的javascript语法中是不存在class这样的概念,如果要通过构造函数生成一个新对象代码 function Shape(width,height) ...
- ES6中Arguments和Parameters用法解析
原文链接 译文 ECMAScript 6 (也称 ECMAScript 2015) 是ECMAScript 标准的最新版本,显著地完善了JS中参数的处理方式.除了其它新特性外,我们还可以使用rest参 ...
- ES6中的Class
对于javascript来说,类是一种可选(而不是必须)的设计模式,而且在JavaScript这样的[[Prototype]] 语言中实现类是很蹩脚的. 这种蹩脚的感觉不只是来源于语法,虽然语法是很重 ...
- ES5和ES6中对于继承的实现方法
在ES5继承的实现非常有趣的,由于没有传统面向对象类的概念,Javascript利用原型链的特性来实现继承,这其中有很多的属性指向和需要注意的地方. 原型链的特点和实现已经在之前的一篇整理说过了,就是 ...
- ES6中的高阶函数:如同 a => b => c 一样简单
作者:Sequoia McDowell 2016年01月16日 ES6来啦!随着越来越多的代码库和思潮引领者开始在他们的代码中使用ES6,以往被认为是"仅需了解"的ES6特性变成了 ...
- 深入理解 JavaScript 异步系列(3)—— ES6 中的 Promise
第一部分,Promise 加入 ES6 标准 原文地址 http://www.cnblogs.com/wangfupeng1988/p/6515855.html 未经作者允许不得转载! 从 jquer ...
随机推荐
- 【内容】MVP 三剑客活动
最近微软搞了一个活动,叫做三剑客,主旨就是“Cloud+AI本地化社区活动,为微软产品本地化做出自己的贡献”,虽然已是rMVP,但也同样收到的社区经理的来信,本人也报名参加了这个活动,同时给了我三个小 ...
- 我为什么要花大力气从头研发智表ZCELL(一个仿EXCEL的前端插件)
为什么呢,一个前端用的,类似EXCEL的操作的JS 插件,从头研发真的有必要吗?可能你会觉得没有必要吧,其实我自己也问过自己好多遍.因为业界有更加强大的spreadjs,也有比较轻型的JEXCEL,自 ...
- 转自阿里云邪-如何从小白成长为 Apache Committer?
http://wuchong.me/blog/2019/02/12/how-to-become-apache-committer/ 过去三年,我一直在为 Apache Flink 开源项目贡献,也在两 ...
- Even Parity UVA - 11464 (枚举)
从来没有觉得枚举有多费脑子的.但是这道题还是很香的. 思路:就是非常简单的枚举啦. 从一般的枚举开始考虑.一般的做法就是在所有的格子中有两种状态1, 0. 而一共有225个格子,所有一共要枚举的情 ...
- cordova 自定义 plugin
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/qq_30879415/article/details/81265455准备工作安装cordovanp ...
- Core官方DI解析(2)-ServiceProvider
ServiceProvider ServiceProvider是我们用来获取服务实例对象的类型,它也是一个特别简单的类型,因为这个类型本身并没有做什么,其实以一种代理模式,其核心功能全部都在IServ ...
- windows系统下的特殊目录导致的FileNotFoundException
环境:下面只有JDK(内含jre),没有外在的jre 读取的两个文件都是存在的,只是文件名不同 运行结果1 运行结果2 切换JDK 运行结果3: 运行结果4: 请留意:C:\windows\syste ...
- 排序—时间复杂度为O(n2)的三种排序算法
1 如何评价.分析一个排序算法? 很多语言.数据库都已经封装了关于排序算法的实现代码.所以我们学习排序算法目的更多的不是为了去实现这些代码,而是灵活的应用这些算法和解决更为复杂的问题,所以更重要的是学 ...
- c提高第四次作业
1. 简述指针数组和数组指针的区别?答: 指针数组:是一个数组,每个元素都是指针 数组指针:是一个指针,指向数组的指针 2. 如何定义一个指向 int a[10] 类型的指针变量(数组指针)(使用3种 ...
- LODOP不同电脑打印效果不同排查
1.位置不同,偏移问题.详细的相关偏移问题的博文:LODOP不同打印机出现偏移问题 2.样式问题. 本机浏览器解析样式不同 ,相关超文本样式博文:Lodop打印控件传入css样式.看是否传入正确样式 ...