解读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 相关文章推荐
让iframe子窗体取父窗体地址栏参数(querystring)
Oct 13 Javascript
javascript 最常用的10个自定义函数[推荐]
Dec 26 Javascript
ExtJs使用IFrame的实现代码
Mar 24 Javascript
基于jquery的一个拖拽到指定区域内的效果
Sep 21 Javascript
js实现div闪烁原理及实现代码
Jun 24 Javascript
容易造成JavaScript内存泄露几个方面
Sep 04 Javascript
JavaScript中实现map功能代码分享
Jun 11 Javascript
基于jquery实现复选框全选,反选,全不选等功能
Oct 16 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
Jun 02 Javascript
javascript实现文字无缝滚动
Dec 27 Javascript
微信小程序带动画弹窗组件使用方法详解
Nov 27 Javascript
vue 详情跳转至列表页实现列表页缓存
Mar 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
《魔兽争霸3:重制版》更新 多项视觉效果调整
2020/05/04 魔兽争霸
PHP的autoload自动加载机制使用说明
2010/12/28 PHP
php中字符查找函数strpos、strrchr与strpbrk用法
2014/11/18 PHP
php发送http请求的常用方法分析
2016/11/08 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
Jquery进度条插件 Progress Bar小问题解决
2011/07/12 Javascript
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
2011/10/16 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
2013/05/27 Javascript
js获取对象为null的解决方法
2013/11/21 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
2014/01/14 Javascript
js window.open弹出新的网页窗口
2014/01/16 Javascript
js和jquery使按钮失效为不可用状态的方法
2014/01/26 Javascript
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
详解JavaScript的Polymer框架中的通知交互
2015/07/29 Javascript
javascript实现瀑布流加载图片原理
2016/02/02 Javascript
AngularJs学习第八篇 过滤器filter创建
2016/06/08 Javascript
javascript 将共享属性迁移到原型中去的实现方法
2016/08/31 Javascript
详解在AngularJS的controller外部直接获取$scope
2017/06/02 Javascript
详解Angular 4 表单快速入门
2017/06/05 Javascript
Bootstrap实现下拉菜单多级联动
2017/11/23 Javascript
Vue无限滑动周选择日期的组件的示例代码
2018/07/18 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
2019/07/02 Javascript
jQuery实现颜色打字机的完整代码
2020/03/19 jQuery
Python回调函数用法实例详解
2015/07/02 Python
tensorflow实现KNN识别MNIST
2018/03/12 Python
查看python安装路径及pip安装的包列表及路径
2019/04/03 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
Python如何输出整数
2020/06/07 Python
Watchshop德国:欧洲在线手表No.1
2019/06/20 全球购物
豪华床上用品、床单和浴室必需品:Peacock Alley
2019/09/04 全球购物
以下的初始化有什么区别
2013/12/16 面试题
工作失误检讨书范文大全
2014/01/13 职场文书
2014年技术员工作总结
2014/11/18 职场文书
Python中常见的导入方式总结
2021/05/06 Python
解决pytorch-gpu 安装失败的记录
2021/05/24 Python
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers