---恢复内容开始---

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的使用的更多相关文章

  1. ES6中的模板字符串和新XSS Payload

    ES6中的模板字符串和新XSS Payload 众所周知,在XSS的实战对抗中,由于防守方经常会采用各种各样严格的过滤手段来过滤输入,所以我们使用的XSS Payload也会根据实际情况作出各种各样的 ...

  2. ES5和ES6中的继承 图解

    Javascript中的继承一直是个比较麻烦的问题,prototype.constructor.__proto__在构造函数,实例和原型之间有的 复杂的关系,不仔细捋下很难记得牢固.ES6中又新增了c ...

  3. ES6中块作用域之于for语句是怎样的?

    在ES6中新加了快作用域的概念(C语言就有,作为类c语言的js,当然应该加上),算是很好理解. { let i; } console.log(i);// i is not defined 在代码块当中 ...

  4. ES6中的var let const应如何选择

    javascript世界里面的每个人都在说有关ECMAScript 6 (ES6,也称作ES 2015)的话题,对象的巨大变化 ( 类 , super() , 等), 函数 (默认参数等), 以及模块 ...

  5. Nodejs与ES6系列4:ES6中的类

    ES6中的类 4.1.class基本语法 在之前的javascript语法中是不存在class这样的概念,如果要通过构造函数生成一个新对象代码 function Shape(width,height) ...

  6. ES6中Arguments和Parameters用法解析

    原文链接 译文 ECMAScript 6 (也称 ECMAScript 2015) 是ECMAScript 标准的最新版本,显著地完善了JS中参数的处理方式.除了其它新特性外,我们还可以使用rest参 ...

  7. ES6中的Class

    对于javascript来说,类是一种可选(而不是必须)的设计模式,而且在JavaScript这样的[[Prototype]] 语言中实现类是很蹩脚的. 这种蹩脚的感觉不只是来源于语法,虽然语法是很重 ...

  8. ES5和ES6中对于继承的实现方法

    在ES5继承的实现非常有趣的,由于没有传统面向对象类的概念,Javascript利用原型链的特性来实现继承,这其中有很多的属性指向和需要注意的地方. 原型链的特点和实现已经在之前的一篇整理说过了,就是 ...

  9. ES6中的高阶函数:如同 a => b => c 一样简单

    作者:Sequoia McDowell 2016年01月16日 ES6来啦!随着越来越多的代码库和思潮引领者开始在他们的代码中使用ES6,以往被认为是"仅需了解"的ES6特性变成了 ...

  10. 深入理解 JavaScript 异步系列(3)—— ES6 中的 Promise

    第一部分,Promise 加入 ES6 标准 原文地址 http://www.cnblogs.com/wangfupeng1988/p/6515855.html 未经作者允许不得转载! 从 jquer ...

随机推荐

  1. Scrapy框架-Item Pipeline

    目录 1. Item Pipeline 3. 完善之前的案例: 3.1. item写入JSON文件 3.2. 启用一个Item Pipeline组件 3.3. 重新启动爬虫 1. Item Pipel ...

  2. 关键字-this

    1.当成员变量和局部变量重名时,在方法中使用this时,this指向的是该方法所在类的成员变量. package gc.test.java.cs1; public class User{ public ...

  3. 去掉所有的html标签,得到HTML标签中的所有内容

    text——含有HTML标签的字符串 var text1=text.replace(/<\/?.+?>/g,""); text=text1.replace(/ /g,& ...

  4. php之微信公众号发送模板消息

    讲一下开发项目中微信公众号发送模板消息的实现过程(我用的还是Thinkphp5.0). 先看一下效果,如图: 就是类似于这样的,下面讲一下实现过程: 第一步:微信公众号申请模板消息权限: 立即申请: ...

  5. [LeetCode] 22. 括号生成

    题目链接:https://leetcode-cn.com/problems/generate-parentheses/ 题目描述: 给出 n 代表生成括号的对数,请你写出一个函数,使其能够生成所有可能 ...

  6. Selenium 4即将发布:每个QA都应该知道的

    阅读原文 Simon Stewart(Selenium的创始成员)在班加罗尔的Selenium大会议上正式确认了Selenium4.0的发布日期和一些主要更新.我们先来提前了解一下Selenium 4 ...

  7. [认证授权] 4.OIDC(OpenId Connect)身份认证(核心部分)

    1 什么是OIDC? 看一下官方的介绍(http://openid.net/connect/): OpenID Connect 1.0 is a simple identity layer on to ...

  8. antd pro 分支

    添加图片 这两种都可以 form表单问题 1 @Form.create() 这是绑定表单和组件,必须有,这样就能从this.props 中找到Form了 2 Select 要写initialValue ...

  9. Django-admin管理工具

    知识预览 admin组件使用 admin源码解析 admin组件使用 Django 提供了基于 web 的管理工具. Django 自动管理工具是 django.contrib 的一部分.你可以在项目 ...

  10. Neutron Vlan Network 学习

    vlan network 是带 tag 的网络,是实际应用最广泛的网络类型.    下图是 vlan100 网络的示例.   1. 三个 instance 通过 TAP 设备连接到名为 brqXXXX ...