ES6语法总结
来源:互联网 发布:上海病假单淘宝交易 编辑:程序博客网 时间:2024/06/05 10:51
摘要 阮一峰《 ECMAScript 6 入门 》
1. Class
1.1 class的定义
// 定义一个Animal的类(构造函数)class Animal{ constructor(){ this.type = 'animal'; } says(say){ console.log(this.type + ' says ' + say); } }let animal = new Animal();animal.says('hello'); // animal says helloclass Cat extends Animal{ constructor(){ super(); this.type = 'cat'; }}let cat = new Cat();cat.says('hello'); // cat says hello
上面的代码首先用class
定义了一个”类”(构造函数),可以看到里面有个constructor
方法,这就是构造方法,而this则代表实例对象。简单的说,constructor
里面的属性和方法是实例对象自己的,而constructor
外定义的方法和属性则是所有实例对象所共享的。另外,方法之间不需要逗号分隔,加了会报错。
class
之间是可以通过extends
关键字实现继承,这比ES5通过修改原型而清晰和方便很多。上面定义了一个Cat类,该类通过extends
关键字,继承了Animal
的所有方法和属性。
super
关键字,它代表父类的实例,(即父类的this对象)。子类必须在constructor
方法中调用super
方法,否则新建的实例会报错。这是因为子类没有自己的实例对象,而是继承父类的实例对象,然后对其进行加工。如果不调用super
方法,子类就得不到this
对象。
ES6的继承机制,实质是先构建父类的实例对象this
(所以必须要有super
方法),然后再用子类的构造函数修改this
。
ES6的类,完全可以看作构造函数的另一种写法。
class Animal{ // ...}typeof Animal // "function"Animale === Animal.prototype.constructor // true
上面的代码表明,类本身就是构造函数。
与ES5一样,实例的属性除非显示定义在本身(即定义在this
上),否则都是定义在原型上。(即定义在class
上)。
animal.hasOwnProperty('type'); // trueanimal.hasOwnProperty('says'); // falseanimal.__proto__.hasOwnProperty('says'); // true
1.2. class表达式
const MyClass = class Me{ getClassName(){ return Me.name;}
上面代码使用了表达式定义了一个类。需要特别指出的是,这个类的名字是MyClass
而不是Me
,Me
只能在内部使用,代指当前类。
let inst = new MyClass();inst.getClassName(); // MeMe.name; // ReferenceError: Me is not defined
1.3. super关键字的详解(继承)
super
这个关键字,既可以当做函数使用,也可以当做对象使用。这两种情况的使用完全不同。
第一种情况,super
当做函数调用时,代表的是父类的构造函数。ES6要求,子类的构造函数必须执行一次super()
函数。
class A {}class B extends A{ constructor(){ super(); }}
上面代码中,子类B
的构造函数中的super()
,代表调用父类的构造函数。这是必须的,否则报错。
注意:super
虽然代表了父类的构造函数A
,但是返回的是子类的实例,即super
内部的this
指向B
,因此super()
在这里就相当于A.prototype.constructor.call(this)
。
class A { constructor() { console.log(new.target.name); }}class B extends A { constructor() { super(); }}new A() // Anew B() // B
上面代码中,new.target
指向当前正在执行的函数。可以看到,在super()
执行时,它指向的是子类B
的构造函数,而不是父类A
的构造函数。也就是说,super()
内部的this
指向B
。
第二种情况,super
作为对象时,在普通的方法中,指向父类的原型对象;在静态方法中,指向父类。
class A { p(){ return 2; }}class B extends A{ constructor(){ super(); console.log(super.p()); // 2 }}
上面代码中,子类B中super.p()
,就相当于一个对象使用。这时,super
在普通方法中,指向A.prototype
,super.p()
就相当于A.prototype.p()
。
这里需要注意,由于super
指向父类的原型对象,所以定义在父类实例上的方法或属性,是无法通过super
调用的。
class A { constructor() { this.p = 2; }}class B extends A { get m() { return super.p; }}let b = new B();b.m // undefined
上面代码中,p
是父类A
实例的属性,super.p
就引用不到它。
如果属性定义在父类的原型对象上,super
就可以取到。
class A { constructor() { this.x = 1; }}class B extends A { constructor() { super(); this.x = 2; super.x = 3; console.log(super.x); // undefined console.log(this.x); // 3 }}let b = new B();
上面代码中,由于绑定子类的this
,所以如果通过super
对某个属性赋值,这时super
就是this
,赋值的属性会变成子类实例的属性。super.x
赋值为3
,这时等同于对this.x
赋值为3
。而当读取super.x
的时候,读的是A.prototype.x
,所以返回undefined
。
如果super
作为对象,用在静态方法之中,这时super
将指向父类,而不是父类的原型对象。
class Parent { static myMethod(msg) { console.log('static', msg); } myMethod(msg) { console.log('instance', msg); }}class Child extends Parent { static myMethod(msg) { super.myMethod(msg); } myMethod(msg) { super.myMethod(msg); }}Child.myMethod(1); // static 1var child = new Child();child.myMethod(2); // instance 2
上面代码中,super
在静态方法之中指向父类,在普通方法之中指向父类的原型对象。
2. 字符串的扩展
2.1 for of
for(let k of 'abc'){ console.log(k); // a b c}
2.2 includes(),startsWith(),endsWith()
传统上,JS之后indexof
,可以用来确定一个字符串是否在另一个字符串中。ES6又提供了三种方法。
includes():返回布尔值,表示是否找到了参数字符串。startsWith():返回布尔值,表示参数字符串是否在源字符串的开头。endsWith():返回布尔值,表示参数字符串是否在源字符串的结尾。
这三个方法都支持第二个参数,表示开始搜索的位置。
var s = 'Hello world!';s.startsWith('world', 6) // trues.endsWith('Hello', 5) // trues.includes('Hello', 6) // false
上面代码表示,使用第二个参数n时,endsWith
的行为与其他两个方法有所不同。它针对前n
个字符,而其他两个方法针对从第n
个位置直到字符串结束。
- ES6语法学习总结
- ES6语法总结
- es6常用语法总结
- ES6中的常用语法总结
- ES6常用的一些语法总结
- 总结常见的ES6新语法特性
- es6中Class 的基本语法总结
- ES6语法
- es6语法
- ES6基本语法的简单用法总结(1)
- ES6总结
- ES6语法篇(其一)
- ES6 语法大概内容
- ES6新语法概览
- ES6核心内容之语法
- ES6 参数默认值语法
- Gulp使用ES6语法
- ES6语法摘要一
- Redis 安装
- 水星记(Mercury Records)
- Python操作Mongodb
- [每日一记/2017.07.29]软件测试-QTP10的下载 安装 破解
- Callable和Future
- ES6语法总结
- cglib动态创建类
- redis 使用总结
- HTML常用控件默认格式清除
- 主席树 --- 求区间第k大值
- php $_SERVER["REMOTE_ADDR"]输出ip为::1
- 深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点
- 字符集和字符编码
- mysql之触发器trigger 详解