解读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 相关文章推荐
基于Jquery的将DropDownlist的选中值赋给label的实现代码
May 06 Javascript
js 实现浏览历史记录示例
Apr 20 Javascript
JavaScript事件委托实例分析
May 26 Javascript
JavaScript实现的圆形浮动标签云效果实例
Aug 06 Javascript
JavaScript判断按钮被点击的方法
Dec 13 Javascript
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
JavaScript中错误正确处理方式小结你用对了吗
Oct 10 Javascript
详谈构造函数加括号与不加括号的区别
Oct 26 Javascript
Vue Promise的axios请求封装详解
Aug 13 Javascript
详解angular部署到iis出现404解决方案
Aug 14 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
Sep 11 Javascript
关于vue 项目中浏览器跨域的配置问题
Nov 10 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 zend 相对路径问题
2009/01/12 PHP
PHP 魔术函数使用说明
2010/05/14 PHP
php文件下载处理方法分析
2015/04/22 PHP
php实现构建排除当前元素的乘积数组方法
2018/10/06 PHP
php回调函数处理数组操作示例
2020/04/13 PHP
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
js修改table中Td的值(定义td的双击事件)
2013/01/10 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
2014/05/08 Javascript
jQuery简单实现隐藏以及显示特效
2015/02/26 Javascript
JavaScript的函数式编程基础指南
2016/03/19 Javascript
javascript类型系统_正则表达式RegExp类型详解
2016/06/24 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
jQuery实现简易的输入框字数计数功能示例
2017/01/16 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
2017/02/06 Javascript
Bootstrap 网格系统布局详解
2017/03/19 Javascript
微信小程序商城项目之淘宝分类入口(2)
2017/04/17 Javascript
angular.fromJson与toJson方法用法示例
2017/05/17 Javascript
Node.js readline 逐行读取、写入文件内容的示例
2018/03/01 Javascript
jQuery中的for循环var与let的区别
2018/04/21 jQuery
mpvue写一个CPASS小程序的示例
2018/09/04 Javascript
node中的密码安全(加密)
2018/09/17 Javascript
详解微信小程序开发之formId使用(模板消息)
2019/08/27 Javascript
Python注释详解
2016/06/01 Python
Django单元测试工具test client使用详解
2019/08/02 Python
Python实现银行账户资金交易管理系统
2020/01/03 Python
Python实现获取当前目录下文件名代码详解
2020/03/10 Python
Python连接Hadoop数据中遇到的各种坑(汇总)
2020/04/14 Python
python 读取.nii格式图像实例
2020/07/01 Python
Java面试题:Java类的Main方法如果是Private将会怎么样
2016/08/18 面试题
党的群众路线学习材料
2014/05/16 职场文书
供应链金融服务方案
2014/05/25 职场文书
公司活动总结怎么写
2014/06/25 职场文书
2014年党员自我评议(5篇)
2014/09/12 职场文书
家属答谢词
2015/01/05 职场文书
春节慰问简报
2015/07/21 职场文书
Win10 最新稳定版本 21H2开始推送
2022/04/19 数码科技