解读ES6中class关键字


Posted in Javascript onNovember 20, 2017

class是es6引入的最重要特性之一。在没有class之前,我们只能通过原型链来模拟类。

1 、介绍 

//定义类
  class Point {
   constructor(x, y) {
   this.x = x;
   this.y = y;
   }
   toString() {
   return '(' + this.x + ', ' + this.y + ')';
   }
  }

Point类除了构造方法,还定义了一个toString方法。注意,定义“类”的方法的时候,前面不需要加上function这个关键字,直接把函数定义放进去了就可以了。另外,方法之间不需要逗号分隔,加了会报错。  

//类的数据类型就是函数,类本身就指向构造函数。用的时候,也是直接对类使用new命令,跟构造函数的用法完全一致。
  class Bar {
   doStuff() {
   console.log('stuff');
   }
  }
  var b = new Bar();
  b.doStuff() // "stuff"

2、严格模式

类和模块的内部,默认就是严格模式,所以不需要使用use strict指定运行模式。只要你的代码写在类或模块之中,就只有严格模式可用

3、constructor 方法

constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法。一个类必须有constructor方法,如果没有显式定义,一个空的constructor方法会被默认添加。    

class Point {
  }
  // 等同于
  class Point {
   constructor() {}//constructor方法默认返回实例对象(即this),完全可以指定返回另外一个对象。
  }
  //注意:类必须使用new调用,否则会报错。这是它跟普通构造函数的一个主要区别,后者不用new也可以执行。

4、类的实例对象

生成类的实例对象的写法,使用new命令。

实例的属性除非显式定义在其本身(即定义在this对象上),否则都是定义在原型上(即定义在class上)。    

class Point {
   // ...
  }
  // 报错
  var point = Point(2, 3);
  // 正确
  var point = new Point(2, 3);

5、Class 表达式

下面代码使用表达式定义了一个类。需要注意的是,这个类的名字是MyClass而不是Me,Me只在 Class 的内部代码可用,指代当前类。      

const MyClass = class Me {
   getClassName() {
   return Me.name;
   }
  };
  //采用 Class 表达式,可以写出立即执行的 Class。
  var person = new class {
   constructor(name) {
   this.name = name;
   }
   sayName() {
   console.log(this.name);
   }
  }('张三');
  person.sayName(); // "张三"

6、不存在变量提升

类不存在变量提升(hoist)

下面代码中,Foo类使用在前,定义在后,这样会报错,因为 ES6 不会把类的声明提升到代码头部。这种规定的原因与下文要提到的继承有关,必须保证子类在父类之后定义。

new Foo(); // ReferenceError
  class Foo {}

7、私有方法

私有方法是常见需求,但 ES6 不提供,只能通过变通方法模拟实现。

添加私有方法办法

①在命名上加以区别。

②利用Symbol值的唯一性,将私有方法的名字命名为一个Symbol值。      

/*命名上加以区别*/
  class Widget {
   // 公有方法
   foo (baz) {
   this._bar(baz);
   }
   // 私有方法
   _bar(baz) {
   return this.snaf = baz;
   }
   // ...
  }
  /*利用Symbol*/
  const bar = Symbol('bar');
  const snaf = Symbol('snaf');
  
  export default class myClass{
   // 公有方法
   foo(baz) {
   this[bar](baz);
   }
   // 私有方法
   [bar](baz) {
   return this[snaf] = baz;
   }
   // ...
  };

8、私有属性

与私有方法一样,ES6 不支持私有属性。目前,有一个提案,为class加了私有属性。方法是在属性名之前,使用#表示。   

class Point {
   #x;
   constructor(x = 0) {
   #x = +x; // 写成 this.#x 亦可
   }
   get x() { return #x }
   set x(value) { #x = +value }
  }

9、this 的指向

类的方法内部如果含有this,它默认指向类的实例。

一旦单独使用该方法,很可能报错。     

class Logger {
   printName(name = 'there') {
   this.print(`Hello ${name}`);
   }
  
   print(text) {
   console.log(text);
   }
  } 
  const logger = new Logger();
  const { printName } = logger;
  printName();
  //上面代码中,printName方法中的this,默认指向Logger类的实例。但是,如果将这个方法提取出来单独使用,this会指向该方法运行时所在的环境,因为找不到print方法而导致报错。
  /*解决方法是,在构造方法中绑定this,这样就不会找不到print方法了。*/
  class Logger {
   constructor() {
   this.printName = this.printName.bind(this);
   }  
   // ...
  }

10、name 属性

 

由于本质上,ES6 的类只是 ES5 的构造函数的一层包装,所以函数的许多特性都被Class继承,包括name属性。

name属性总是返回紧跟在class关键字后面的类名。    

class Point {}
  Point.name // "Point"

总结

以上所述是小编给大家介绍的ES6中class关键字,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
需要做特殊处理的DOM元素属性的访问
Nov 05 Javascript
JavaScript中解析JSON数据的三种方法
Jul 03 Javascript
javascript合并表格单元格实例代码
Jan 03 Javascript
JQuery 设置checkbox值二次无效的解决方法
Jul 22 Javascript
JS 实现 ajax 异步浏览器兼容问题
Jan 21 Javascript
js脚本编写简单刷票投票系统
Jun 27 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
Jul 17 Javascript
使用重写url机制实现验证码换一张功能
Aug 01 Javascript
Angularjs Promise实例详解
Mar 15 Javascript
vue中倒计时组件的实例代码
Jul 06 Javascript
layui表格分页 记录勾选的实例
Sep 02 Javascript
Node.js学习之内置模块fs用法示例
Jan 22 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
Nov 20 #Javascript
Node.js 中使用 async 函数的方法
Nov 20 #Javascript
利用three.js画一个3D立体的正方体示例代码
Nov 19 #Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
Nov 19 #Javascript
使用DataTable插件实现异步加载数据
Nov 19 #Javascript
原生JavaScript实现Ajax异步请求
Nov 19 #Javascript
gulp安装以及打包合并的方法教程
Nov 19 #Javascript
You might like
PHP+AJAX实现无刷新注册(带用户名实时检测)
2007/01/02 PHP
php与mysql建立连接并执行SQL语句的代码
2011/07/04 PHP
PHP取进制余数函数代码
2012/01/19 PHP
php jq jquery getJSON跨域提交数据完整版
2013/09/13 PHP
php 邮件发送问题解决
2014/03/22 PHP
ThinkPHP调用common/common.php函数提示错误function undefined的解决方法
2014/08/25 PHP
PHP网络操作函数汇总
2015/05/18 PHP
Zend Framework教程之Zend_Registry对象用法分析
2016/03/22 PHP
php从数据库中读取特定的行(实例)
2017/06/02 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
JavaScript Object的extend是一个常用的功能
2009/12/02 Javascript
jquery checkbox实现单选小例
2013/11/27 Javascript
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
js判断手机号运营商的方法
2015/10/23 Javascript
基于JavaScript实现滑动门效果
2017/03/16 Javascript
详解webpack异步加载业务模块
2017/06/23 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
JS返回顶部实例代码
2020/08/09 Javascript
JavaScript实现省市联动过程中bug的解决方法
2017/12/04 Javascript
微信小程序实现倒计时补零功能
2018/07/09 Javascript
Array数组对象中的forEach、map、filter及reduce详析
2018/08/02 Javascript
angularjs性能优化的方法
2018/09/05 Javascript
vue.js购物车添加商品组件的方法
2019/09/17 Javascript
Vue文本模糊匹配功能如何实现
2020/07/30 Javascript
[14:19]2018年度COSER大赛-完美盛典
2018/12/16 DOTA
Python实现去除列表中重复元素的方法小结【4种方法】
2018/04/27 Python
python 实现登录网页的操作方法
2018/05/11 Python
python单例模式获取IP代理的方法详解
2018/09/13 Python
解决使用PyCharm时无法启动控制台的问题
2019/01/19 Python
Python3实现的判断回文链表算法示例
2019/03/08 Python
代码实例讲解python3的编码问题
2019/07/08 Python
Python符号计算之实现函数极限的方法
2019/07/15 Python
python输入一个水仙花数(三位数) 输出百位十位个位实例
2020/05/03 Python
重构Python代码的六个实例
2020/11/25 Python
《小池塘》教学反思
2014/02/28 职场文书
中学清明节活动总结
2014/07/04 职场文书