解读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 相关文章推荐
JS控制阿拉伯数字转为中文大写示例代码
Sep 04 Javascript
js onload处理html页面加载之后的事件
Oct 30 Javascript
jQuery解决input超多的表单提交
Aug 10 Javascript
深入解析JavaScript中函数的Currying柯里化
Mar 19 Javascript
js HTML5手机刮刮乐代码
Sep 29 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
Oct 10 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
Mar 17 Javascript
Node.js Express安装与使用教程
May 11 Javascript
angular实现input输入监听的示例
Aug 31 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
Oct 29 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
Nov 13 Javascript
vscode自定义vue模板的实现
Jan 27 Vue.js
利用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 SQL之where语句生成器
2009/03/24 PHP
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
PHP图片加水印实现方法
2016/05/06 PHP
PHP读取zip文件的方法示例
2016/11/17 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
js技巧--转义符"\"的妙用
2007/01/09 Javascript
jquery实现手风琴效果
2015/11/20 Javascript
jQuery插件扩展extend的简单实现原理
2016/06/24 Javascript
浅谈JavaScript对象与继承
2016/07/10 Javascript
Javascript 跨域知识详细介绍
2016/10/30 Javascript
详解jQuery的Cookie插件
2016/11/23 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
2017/07/27 Javascript
Vue filter介绍及详细使用
2018/04/04 Javascript
NodeJS模块与ES6模块系统语法及注意点详解
2019/01/04 NodeJs
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
小程序实现投票进度条
2019/11/20 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
零基础写python爬虫之抓取糗事百科代码分享
2014/11/06 Python
在Python中使用Mako模版库的简单教程
2015/04/08 Python
Python3 操作符重载方法示例
2017/11/23 Python
Python matplotlib通过plt.scatter画空心圆标记出特定的点方法
2018/12/13 Python
django的csrf实现过程详解
2019/07/26 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
利用pytorch实现对CIFAR-10数据集的分类
2020/01/14 Python
Python Selenium参数配置方法解析
2020/01/19 Python
Kiwi.com中国:找到特价机票并发现新目的地
2019/10/27 全球购物
幼儿园新学期寄语
2014/01/18 职场文书
西门豹教学反思
2014/02/04 职场文书
抵押贷款承诺书
2014/05/30 职场文书
2015年安全生产工作总结范文
2015/04/02 职场文书
大学生实习证明
2015/06/16 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书
python的变量和简单数字类型详解
2021/09/15 Python
python lambda 表达式形式分析
2022/04/03 Python
IDEA中sout快捷键无效问题的解决方法
2022/07/23 Java/Android