深入浅出ES6---第二篇

xiaoxiao2021-02-28  125

arrow function箭头函数

函数的快捷写法,不需要通过 function 关键字创建函数,并且还可以省略 return 关键字。=> 是function的简写形式,支持expression 和 statement 两种形式。

// 箭头函数根据parma个数的不同,写法上还可以做如下改变 () => { expression } // 零个参数用 () 表示 x => { expression } // 一个参数可以省略 () (x, y) => { expression } // 多参数不能省略 ()

例子:

var person = { name: 'tom', getName: function() { return this.name; } } // ES6 const person = { name: 'tom', getName: () => this.name }

当我们使用箭头函数时,函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,它的this是继承外面的,因此内部的this就是外层代码块的this.

var person = { name: 'tom', getName: function getName() { var _this = this; // 使用了我们在es5时常用的方式保存this引用 return setTimeout(function () { return _this.name; }, 1000); } }; //ES6 const person = { name: 'tom', getName: function() { return setTimeout(() => this.name, 1000); } }

增强的对象字面量

对象字面量被增强了,写法更加简洁与灵活,同时在定义对象的时候能够做的事情更多了。 (1)当属性与值的变量同名时

const name = 'Jane'; const age = 20 // es6 const person = { name, age } // es5 var person = { name: name, age: age };

(2)定义方法可以不用function关键字

// es6 const person = { name, age, getName() { // 只要不使用箭头函数,this就还是我们熟悉的this return this.name } } // es5 var person = { name: name, age: age, getName: function getName() { return this.name; } };

(3)在对象字面量中可以使用中括号作为属性,表示属性也能是一个变量了。

const name = 'Jane'; const age = 20 const person = { [name]: true, [age]: true }

模块的 Import 和 Export

import 用于引入模块,export 用于导出模块。

// 引入整个文件 import dva from 'dva'; // 引入函数(可以是一个或多个) import { connect } from 'dva'; import { Link, Route } from 'dva/router'; // 引入全部并作为 github 对象 import * as github from './services/github'; // 导出默认 export default App; // 部分导出,复合写法是 export { App } from './file';   等价于import { App } from './file;export{App}

class、extend、super

这三个特性涉及了ES5中最令人头疼的的几个部分:原型、构造函数,继承。 class ES6提供了更接近传统语言的写法,引入了Class(类)这个概念。新的class写法让对象原型的写法更加清晰、更像面向对象编程的语法.

// ES5 // 构造函数 function Person(name, age) { this.name = name; this.age = age; } // 原型方法 Person.prototype.getName = function() { return this.name; } // ES6 class Person { constructor(name, age) { // 构造函数 this.name = name; this.age = age; } getName() { // 原型方法 return this.name; } }

上面代码首先用class定义了一个“类”,可以看到里面有一个constructor方法,这就是构造方法,而this关键字则代表实例对象。 简单地说,constructor内定义的方法和属性是实例对象自己的,而constructor外定义的方法和属性则是所有实例对象可以共享的。这个和ES5里的构造函数是差不多的意思,相当于把方法定义在构造函数里是私有的,而把方法定义到原型中,所有实例共享. extend继承

class Person { constructor(name, age) { this.name = name; this.age = age; } getName() { return this.name } } // Student类继承Person类 class Student extends Person { constructor(name, age, gender, classes) { super(name, age); this.gender = gender; this.classes = classes; } getGender() { return this.gender; } }

Class之间可以通过extends关键字实现继承,这比ES5的通过修改原型链实现继承,要清晰和方便很多。上面定义了一个Cat类,该类通过extends关键字,继承了Animal类的所有属性和方法。

super关键字,它指代父类的实例(即父类的this对象)。子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后可以对其进行加工。如果不调用super方法,子类就得不到this对象。 class、extend/super三者的综合

class Animal { constructor(){ this.type = 'animal' } says(say){ console.log(this.type + ' says ' + say) } } let animal = new Animal() animal.says('hello') //animal says hello class Cat extends Animal { constructor(){ super() this.type = 'cat' } } let cat = new Cat() cat.says('hello') //cat says hello
转载请注明原文地址: https://www.6miu.com/read-27059.html

最新回复(0)