前端入门21-JavaScript的ES6新特性 (3)

箭头函数内部,还可以再使用箭头函数。下面是一个 ES5 语法的多重嵌套函数。

function insert(value) { return {into: function (array) { return {after: function (afterValue) { array.splice(array.indexOf(afterValue) + 1, 0, value); return array; }}; }}; } insert(2).into([1, 3]).after(1); //[1, 2, 3]

上面这个函数,可以使用箭头函数改写。

let insert = (value) => ({into: (array) => ({after: (afterValue) => { array.splice(array.indexOf(afterValue) + 1, 0, value); return array; }})}); insert(2).into([1, 3]).after(1); //[1, 2, 3]

但使用箭头函数有一些注意点:

函数体内的 this 的指向,就是定义时所在的对象,而不是使用时所在的对象。

不可以当作构造函数,也就是说,不可以使用 new 命令,否则会抛出一个错误。

不可以使用 arguments 对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。

不可以使用 yield 命令,因此箭头函数不能用作 Generator 函数。

其他还有很多扩展,包括在 ES5 中,函数有个 name 属性并在标准规范中,但在 ES6 中加入了标准规范中,还有其他新增的一些特性,具体参考:

class 类

JavaScript 语言中,生成实例对象的传统方法是通过构造函数。下面是一个例子。

function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')'; }; var p = new Point(1, 2);

上面这种写法跟传统的面向对象语言(比如 C++ 和 Java)差异很大,很容易让新学习这门语言的程序员感到困惑。

ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。

基本上,ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用 ES6 的class改写,就是下面这样。

//定义类 class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; } } var p = new Point();

上面代码定义了一个“类”,可以看到里面有一个constructor方法,这就是构造方法,而this关键字则代表实例对象。也就是说,ES5 的构造函数Point,对应 ES6 的Point类的构造方法。

Point类除了构造方法,还定义了一个toString方法。注意,定义“类”的方法的时候,前面不需要加上function这个关键字,直接把函数定义放进去了就可以了。另外,方法之间不需要逗号分隔,加了会报错。

ES6 的类,完全可以看作构造函数的另一种写法。

class Point { // ... } typeof Point // "function" Point === Point.prototype.constructor // true

上面代码表明,类的数据类型就是函数,类本身就指向构造函数。

使用的时候,也是直接对类使用new命令,跟构造函数的用法完全一致。

class Bar { doStuff() { console.log('stuff'); } } var b = new Bar(); b.doStuff() // "stuff"

构造函数的prototype属性,在 ES6 的“类”上面继续存在。事实上,类的所有方法都定义在类的prototype属性上面。

class Point { constructor() { // ... } toString() { // ... } toValue() { // ... } } // 等同于 Point.prototype = { constructor() {}, toString() {}, toValue() {}, };

在类的实例上面调用方法,其实就是调用原型上的方法。

class B {} let b = new B(); b.constructor === B.prototype.constructor // true

更多细节内容参考:

其他

阮一峰好歹专门为 ES6 新增的特性写了一整本书,想用一个章节来介绍太不可能了,很多我也没有去细看。

本篇的主旨就在于大体上列出一些新特性,知道原来 ES6 新增了这些东西,后续有时间再去细看这本书,或者当用到的时候再去查。

最后,就列举下,其他上面没有讲到的特性吧:

ArrayBuffer:大概同于操作二进制数据

set 和 map:新增是数据结构,类似于数组,可以类比 Java 中的 Set 和 Map

Proxy:修改某些默认行为,等同于在语言层面做出修改,所以属于"元编程",即对编程语言进行编程。

Reflect:同样是用于操作对象,修改默认行为。Proxy 更多是在原本行为上增加新的行为,而 Reflect 则是直接修改原本行为。

Iterator 和 for..of 循环:为不同的数据结构提供各自的遍历访问操作

Promise:异步编程的解决方案,比传统的解决方案(回调和事件)更合理强大

Generator 函数:异步编程的解决方案

async:Generator 函数的语法糖

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpfxpz.html