解读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 相关文章推荐
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
Feb 03 Javascript
JS获取后台Cookies值的小例子
Mar 04 Javascript
jquery ajax,ashx,json的用法总结
Feb 12 Javascript
简单的jquery左侧导航栏和页面选中效果
Aug 21 Javascript
jQuery子属性过滤选择器用法分析
Feb 10 Javascript
jQuery实现仿Google首页拖动效果的方法
May 04 Javascript
canvas实现爱心和彩虹雨效果
Mar 09 Javascript
javascript定时器取消定时器及优化方法
Jul 08 Javascript
用Node提供静态文件服务的方法
Jul 06 Javascript
微信小程序实现录音时的麦克风动画效果实例
May 18 Javascript
vue指令做滚动加载和监听等
May 26 Javascript
JavaScript中document.activeELement焦点元素介绍
Nov 27 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
在IIS上安装PHP4.0正式版
2006/10/09 PHP
利用discuz实现PHP大文件上传应用实例代码
2008/11/14 PHP
PHP下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
PHP中echo和print的区别
2014/08/28 PHP
PHP实现批量清空删除指定文件夹所有内容的方法
2017/05/30 PHP
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
2011/04/14 Javascript
javascript工具库代码
2012/03/29 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
2013/10/28 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
2014/03/26 Javascript
jquery文档操作wrap()方法实例简述
2015/01/10 Javascript
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
JavaScript动态创建form表单并提交的实现方法
2015/12/10 Javascript
jQuery的文档处理程序详解
2016/05/10 Javascript
jquery siblings获取同辈元素用法实例分析
2016/07/25 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
2016/12/23 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
2017/05/12 Javascript
javaScript实现滚动条事件详解
2020/03/24 Javascript
浅谈Angular 观察者模式理解
2018/11/01 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
2019/02/12 Javascript
JavaScript实现简单计算器
2020/03/19 Javascript
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
[46:47]完美世界DOTA2联赛PWL S2 FTD vs Magma 第二场 11.20
2020/11/23 DOTA
tensorflow学习笔记之简单的神经网络训练和测试
2018/04/15 Python
Python代码缩进和测试模块示例详解
2018/05/07 Python
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
Python列表常见操作详解(获取,增加,删除,修改,排序等)
2019/02/18 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
让IE支持HTML5的方法
2012/12/11 HTML / CSS
英国自行车商店:AW Cycles
2021/02/24 全球购物
给朋友的道歉信
2014/01/09 职场文书
新闻学专业个人求职信写作
2014/02/04 职场文书
工商治理实习生的自我评价分享
2014/02/20 职场文书
社区食品安全实施方案
2014/03/28 职场文书
企业开业庆典答谢词
2015/01/20 职场文书