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 // true
- 类的数据类型就是函数,类本身就指向构造函数。
constructor
方法是类的默认方法,通过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 ...
随机推荐
- docker-compose的安装和卸载
使用docker-compose 可以轻松.高效的管理容器,它是一个用于定义和运行多容器 docker 的应用程序工具. 原文地址:代码汇个人博客 http://www.codehui.net/inf ...
- kerberos环境下spark消费kafka写入到Hbase
一.准备环境: 创建Kafka Topic和HBase表 1. 在kerberos环境下创建Kafka Topic 1.1 因为kafka默认使用的协议为PLAINTEXT,在kerberos环境下需 ...
- [LeetCode] 20. 有效的括号
题目链接:https://leetcode-cn.com/problems/valid-parentheses/ 题目描述: 给定一个只包括 '(',')','{','}','[',']' 的字符串, ...
- WordPress慢的八种解决方法(用排查法解决)
WordPress的打开速度慢会影响到用户体验和关键词的稳定排名,WordPress为什么加载慢呢?其实很简单的,就是WordPress水土不服,用WordPress的大家都知道,WordPress是 ...
- Python测试模块doctest
面试被问到了却没有用过,很尴尬:今天看了一下,真的是一个很简单的测试模块 方便起见,这里直接拿菜鸟教程的介绍和例子过来 开发高质量软件的方法之一是为每一个函数开发测试代码,并且在开发过程中经常进行测试 ...
- elasticsearch补全功能之只补全筛选后的部分数据context suggester
官方文档https://www.elastic.co/guide/en/elasticsearch/reference/5.0/suggester-context.html 下面所有演示基于elast ...
- python 绘制柱状图
python 绘制柱状图 import matplotlib.pyplot as plt import numpy as np # 创建一个点数为 8 x 6 的窗口, 并设置分辨率为 80像素/每英 ...
- Java代理模式之Cglib代理
Cglib代理,也叫做子类代理.在内存中构建一个子类对象从而实现对目标对象功能的扩展. CGLIB包的底层是通过使用一个小而快的字节码处理框架ASM,来转换字节码并生成新的类.不鼓励直接使用ASM,因 ...
- 南邮 base64全家桶
这几天不想学逆向 做做crypto(菜还瞎j2做)..... 题目: 全家桶全家桶全家桶!我怎么饿了......密文(解密前删除回车):R1pDVE1NWlhHUTNETU4yQ0dZWkRNTUpY ...
- codeforces131D
Subway CodeForces - 131D A subway scheme, classic for all Berland cities is represented by a set of ...