Nodejs ES.next 的 => 函数语法

ECMAScript.next: arrow functions and method definitions

翻到 RSS 于是看了一遍, 文章好长, 跳着摘一些重点过来:

动态的 this

原先我们的函数, 会遇到 this 指向不明确的问题, 只好加 bind:

    var jane = {
        name: "Jane",
    logHello: function (friends) {
        friends.forEach(function (friend) {
            console.log(this.name + " says hello to " + friend)
        }.bind(this));
    }
}

词法域的 this

ES6 里的 () => {} 函数定义语法, 就是冲着这个来的:

    let jane = {
        name: "Jane",
    logHello: function (friends) {
        friends.forEach(friend =&gt; {
            console.log(this.name + " says hello to " + friend)
        });
    }
}

这里的 this 是词法域的, 因此代码可以按照预期地执行当然 => 这货是 CoffeeScript 里学去的… 但相比起来, coffee 的 => 大概有些场合还会有问题

更多语法:

        () => { ... } // no argument
         x => { ... } // one argument
    (x, y) => { ... } // several arguments
    let squares = [ 1, 2, 3 ].map(function (x) { return x * x });
    let squares = [ 1, 2, 3 ].map(x => x * x);

这里定义的 => 函数和 JS 通常的函数定义有 3 点不同:

this 永远是被绑定了的
没有原型链之类功能, 不能用做构造器
arguments 变量不存在

方法的定义

然后… 文章中间讨论了一堆, 没看懂…

另一个提到的是方法定义的语法:

    class Point {
        constructor(x, y) {
            this.x = x;
            this.y = y;
        }
        // Method definition:
        dist() {
            return Math.sqrt((this.x*this.x)+(this.y*this.y));
        }
    }
    let jane = {
        name: "Jane",
    // Method definition:
    logHello(friends) {
        friends.forEach(friend =&gt; {
            console.log(this.name + " says hello to " + friend)
        });
    }
}

也变得很简短了. 只不过括号还是很多… 总之原先旧的写法在 JS 里将会比较少见因为函数作为构造器, 作为 subroutine 都有了更好的语法

此外

刚看到消息说 Firefox 22 已经部署了 => 语法, 还没去看 https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/22#JavaScript

文章作者说这几个函数的语法让 JS 更简单了… 的确, 从 this 的角度说, 更明确了从 CoffeeScript 对比看, JS 的函数定义的语法种类在变多… 我个人觉得不大惯

ionicwang 1楼

Node.js ES.next 的 `=>` 函数语法

动态的 `this`

在早期的 JavaScript 中，函数中的 this 指向是一个常见的问题。为了确保 this 指向正确，我们常常需要使用 .bind() 方法：

var jane = {
    name: "Jane",
    
    logHello: function (friends) {
        friends.forEach(function (friend) {
            console.log(this.name + " says hello to " + friend);
        }.bind(this));
    }
}

词法域的 `this`

ES6 引入了箭头函数 (=>)，使得 this 的指向更加明确。箭头函数不会创建自己的 this 上下文，而是继承自父作用域。

let jane = {
    name: "Jane",
    
    logHello: function (friends) {
        friends.forEach(friend => {
            console.log(this.name + " says hello to " + friend);
        });
    }
}

在这个例子中，箭头函数内的 this 继承自外部函数 logHello，因此可以按照预期执行。

箭头函数的语法

箭头函数的语法非常简洁，支持多种形式：

() => { ... } // 无参数
x => { ... }  // 一个参数
(x, y) => { ... } // 多个参数

例如：

let squares = [1, 2, 3].map(function (x) { return x * x });
let squares = [1, 2, 3].map(x => x * x);

箭头函数与普通函数有一些区别：

this 始终绑定到定义时的上下文。
没有原型链，不能用作构造函数。
没有 arguments 变量。

方法的定义

ES6 还引入了更简洁的方法定义语法：

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    // 方法定义
    dist() {
        return Math.sqrt((this.x * this.x) + (this.y * this.y));
    }
}

let jane = {
    name: "Jane",

    // 方法定义
    logHello(friends) {
        friends.forEach(friend => {
            console.log(this.name + " says hello to " + friend);
        });
    }
}

这种方法定义更加简洁，减少了不必要的语法结构。

总结

ES6 的箭头函数简化了 this 的处理，并提供了更简洁的函数定义方式。这使得代码更易于阅读和维护。虽然有些人可能需要时间适应这种新的语法，但它确实为 JavaScript 增添了许多便利。Firefox 22 已经支持这种语法，这意味着你可以在现代浏览器中开始使用这些新特性。

希望这些示例和解释能帮助你更好地理解 Node.js 中的 ES6 箭头函数语法。

h691938207 2楼

看来 =〉只用于定义无名函数。

ionicwang 3楼

终于正识到这个问题了，但是这个语法也太摧残了

sinazl 4楼

学 CoffeeScript 学的 --!

zlyuanteng 5楼

Node.js ES.next 的 => 函数语法

动态的 `this`

在ES5中，普通函数中的 this 绑定可能会出现问题，需要使用 bind 方法来确保 this 的正确绑定：

var jane = {
    name: "Jane",
    
    logHello: function (friends) {
        friends.forEach(function (friend) {
            console.log(this.name + " says hello to " + friend)
        }.bind(this));
    }
}

词法域的 `this`

ES6 引入了箭头函数 (=>)，它具有词法域的 this，不需要额外的 bind 来确保 this 的正确绑定：

let jane = {
    name: "Jane",
    
    logHello: function (friends) {
        friends.forEach(friend => {
            console.log(this.name + " says hello to " + friend)
        });
    }
}

箭头函数的语法

箭头函数的语法非常简洁，支持以下几种形式：

无参数：() => { ... }
一个参数：(x) => { ... } 或 x => { ... }
多个参数：(x, y) => { ... }

例如：

let squares = [1, 2, 3].map(x => x * x);

方法的定义

ES6 类和对象的方法定义也变得更加简洁：

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    dist() {
        return Math.sqrt((this.x * this.x) + (this.y * this.y));
    }
}

let jane = {
    name: "Jane",

    logHello(friends) {
        friends.forEach(friend => {
            console.log(this.name + " says hello to " + friend);
        });
    }
}

总结

箭头函数的引入使 this 的绑定更加明确，并且简化了函数和方法的定义。虽然这种语法可能需要一定的适应时间，但它确实让代码更加简洁易读。