js-ES6学习笔记-Class(2)
1、与函数一样,类也可以使用表达式的形式定义。
const MyClass = class Me {
getClassName() {
return Me.name;
}
};
这个类的名字是MyClass
而不是Me
,Me
只在Class的内部代码可用,指代当前类。
如果类的内部没用到的话,可以省略Me
,也就是可以写成下面的形式。
2、采用Class表达式,可以写出立即执行的Class。
let person = new class {
constructor(name) {
this.name = name;
} sayName() {
console.log(this.name);
}
}('张三'); person.sayName(); // "张三"
3、私有方法是常见需求,但 ES6 不提供,只能通过变通方法模拟实现。
一种做法是在命名上加以区别。
class Widget { // 公有方法
foo (baz) {
this._bar(baz);
} // 私有方法
_bar(baz) {
return this.snaf = baz;
} // ...
}
这种命名是不保险的,在类的外部,还是可以调用到这个方法。
另一种方法就是索性将私有方法移出模块,因为模块内部的所有方法都是对外可见的。
class Widget {
foo (baz) {
bar.call(this, baz);
} // ...
} function bar(baz) {
return this.snaf = baz;
}
上面代码中,foo
是公有方法,内部调用了bar.call(this, baz)
。这使得bar
实际上成为了当前模块的私有方法。
还有一种方法是利用Symbol
值的唯一性,将私有方法的名字命名为一个Symbol
值。
const bar = Symbol('bar');
const snaf = Symbol('snaf'); export default class myClass{ // 公有方法
foo(baz) {
this[bar](baz);
} // 私有方法
[bar](baz) {
return this[snaf] = baz;
} // ...
};
上面代码中,bar
和snaf
都是Symbol
值,导致第三方无法获取到它们,因此达到了私有方法和私有属性的效果。
4、类的方法内部如果含有this
,它默认指向类的实例。但是,必须非常小心,一旦单独使用该方法,很可能报错。
class Logger {
printName(name = 'there') {
this.print(`Hello ${name}`);
} print(text) {
console.log(text);
}
} const logger = new Logger();
const { printName } = logger;
printName(); // TypeError: Cannot read property 'print' of undefined
如果将这个方法提取出来单独使用,this
会指向该方法运行时所在的环境,因为找不到print
方法而导致报错。
一个比较简单的解决方法是,在构造方法中绑定this
,这样就不会找不到print
方法了。
class Logger {
constructor() {
this.printName = this.printName.bind(this);
} // ...
}
另一种解决方法是使用箭头函数。
class Logger {
constructor() {
this.printName = (name = 'there') => {
this.print(`Hello ${name}`);
};
} // ...
}
还有一种解决方法是使用Proxy
,获取方法的时候,自动绑定this
。
5、类和模块的内部,默认就是严格模式,所以不需要使用use strict
指定运行模式。只要你的代码写在类或模块之中,就只有严格模式可用。
6、name
属性总是返回紧跟在class
关键字后面的类名。
class Point {}
Point.name // "Point"
js-ES6学习笔记-Class(2)的更多相关文章
- JS&ES6学习笔记(持续更新)
ES6学习笔记(2019.7.29) 目录 ES6学习笔记(2019.7.29) let和const let let 基本用法 let 不存在变量提升 暂时性死区 不允许重复声明 块级作用域 级作用域 ...
- ES6学习笔记(三):教你用js面向对象思维来实现 tab栏增删改查功能
前两篇文章主要介绍了类和对象.类的继承,如果想了解更多理论请查阅<ES6学习笔记(一):轻松搞懂面向对象编程.类和对象>.<ES6学习笔记(二):教你玩转类的继承和类的对象>, ...
- ES6学习笔记<五> Module的操作——import、export、as
import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...
- ES6学习笔记<一> let const class extends super
学习参考地址1 学习参考地址2 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015:也 ...
- js再学习笔记
#js再学习笔记 ##基本 1.js严格区分大小写 2.js末尾的分号可加,也可不加 3.六种数据类型(使用typeof来检验数据的类型) `typeof` - undefined: `var ...
- JS数组学习笔记
原文:JS数组学习笔记 最近在备课数组,发现很多ES5的方法平时很少用到.细节比较多,自己做了大量例子和整理,希望对大家了解JavaScript中的Array有所帮助. 概念 数组是值的有序集合.每个 ...
- es6学习笔记-class之一概念
前段时间复习了面向对象这一部分,其中提到在es6之前,Javasript是没有类的概念的,只从es6之后出现了类的概念和继承.于是乎,花时间学习一下class. 简介 JavaScript 语言中,生 ...
- ES6学习笔记<四> default、rest、Multi-line Strings
default 参数默认值 在实际开发 有时需要给一些参数默认值. 在ES6之前一般都这么处理参数默认值 function add(val_1,val_2){ val_1 = val_1 || 10; ...
- ES6学习笔记<三> 生成器函数与yield
为什么要把这个内容拿出来单独做一篇学习笔记? 生成器函数比较重要,相对不是很容易理解,单独做一篇笔记详细聊一聊生成器函数. 标题为什么是生成器函数与yield? 生成器函数类似其他服务器端语音中的接口 ...
- ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring
接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...
随机推荐
- Smart/400开发上手2: COBOL批处理程序处理过程
开发目的:1.建立DB2数据库表:2.建立逻辑视图:3.通过Cobol程序将一个源数据表的数据通过一定公式计算后导出到另一个目的数据库表源数据表:TIM3PF目的数据表:TIM4PF4.在AS400中 ...
- django~项目的文件位置的重要性
前几天我犯了个很低级的错误 就是把文件的地址放错地方了~~ 我把templates文件放进mysite文件里面了 和templatetags文件同级了 所以一直报错 说找不到模板的文件 实际上te ...
- Django自带的后台管理样式找不到的问题。
今天发现自己用uwsgi,nginx部署完服务器后,又想用自带的Django服务器进行后台管理调试,发现Django后代管理页面样式找不到.又查看了路径发现是正确的.网上看了很多方法.最后才发现自己把 ...
- 集合框架map_DAY18
1:map集合(掌握) (1)Map集合存储的是键值对元素.键是唯一的,值可以重复. (2)Map和Collection的区别? A:Map是双列集合,存储的元素键值对,键唯一,值可以重复. B:Co ...
- netty客户端源码
随笔记录. //创建一个ChannelFactory(客户端代码) ChannelFactory factory = new NioClientSocketChannelFactory( Execut ...
- tomcat 最大并发数
只针对BIO模式,目标请求会sleep两秒再返回结果,通过jmeter测试工具进行并发测试 操作系统:windows && linux tomcat7测试: <Connector ...
- Android 开发工具类 33_开机自运行
原理:该类派生自 BroadcastReceiver,重载方法 onReceive ,检测接收到的 Intent 是否符合 BOOT_COMPLETED,如果符合,则启动用户Activity. imp ...
- geo-经纬度计算
经纬度计算, 本质上是球面三角函数的应用, 将数学公式转换为代码的过程, 站在前人的肩膀上, 自己又补充了一点: package com.iwhere.easy.travel.tool; public ...
- Spring Log4j2 log4j2.xml
<dependency> <groupId>org.apache.logging.log4j</groupId> <artifactId>log4j-c ...
- 【IT笔试面试题整理】二叉搜索树转换为双向链表
[试题描述] 将二叉搜索树转换为双向链表 对于二叉搜索树,可以将其转换为双向链表,其中,节点的左子树指针在链表中指向前一个节点,右子树指针在链表中指向后一个节点. 思路一: 采用递归思想,对于二叉搜索 ...