Drcus | 王亚振

Drcus | 王亚振

随便写,记录点东西

深入理解: ES6 箭头函数

发布于:  

箭头函数是 ECMAScript 6 最人性的特性之一, 也是我最love的特性之一, 好好学习一下。

跟传统的 JavaScript 函数有几点不同

  • 本地 this 绑定
  • 不能通过 new 来调用
  • this 不能再改变
  • 没有 arguments 对象 - 在es6中更多的会使用不定参数和默认参数

语法

// ES6
var reflect = value => value;

// ES5
var reflect = function(value) {
    return value;
};

多个参数时:

var sum = (num1, num2) => num1 + num2;

// effectively equivalent to:

var sum = function(num1, num2) {
    return num1 + num2;
};

没有参数就用()

var sum = () => 1 + 2;

// 等价

var sum = function() {
    return 1 + 2;
};

返回一个对象:

var getTempItem = id => ({ id: id, name: "Temp" });

// 转换

var getTempItem = function(id) {
    return {
        id: id,
        name: "Temp"
    };
};

返回一个对象要用括号括起来

用法

看例子

var PageHandler = {

    id: "123456",

    init: function() {
        document.addEventListener("click", function(event) {
            this.doSomething(event.type);     // error
        }, false);
    },

    doSomething: function(type) {
        console.log("Handling " + type  + " for " + this.id);
    }
};

上边代码调用doSomething的时候你我都知道会报错, 会说 undefined is not a function 修改:

var PageHandler = {

    id: "123456",

    init: function() {
        document.addEventListener("click", (function(event) {
            this.doSomething(event.type);     // 
        }).bind(this), false);
    },

    doSomething: function(type) {
        console.log("Handling " + type  + " for " + this.id);
    }
};

现在代码好像如期的工作了,但是却多了个函数,能不能更简单点,简洁明了 来

var PageHandler = {

    id: "123456",

    init: function() {
        document.addEventListener("click", event => this.doSomething(event.type), false);
    },

    doSomething: function(type) {
        console.log("Handling " + type  + " for " + this.id);
    }
};

这才对嘛 这里的箭头函数this 作用域就是它的父级作用域,所以此时this就是PageHandler

简单点的一个排序

var result = values.sort(function(a, b) {
    return a - b;
});

箭头函数

var result = values.sort((a, b) => a - b);

其它

  1. typeof 操作符 返回的也是function
  2. instanceof 返回true 即是Function的实例
  3. call, apply, bind 这些方法也都能用,但不会改变箭头函数的this

关于React

React 组件中函数this的三种方案

  1. ES7 Property Initializers (Babel Stage 0提供)

    class Privilege extends Component {
    render = () => {
    console.log(this.props);
    }
    }
  2. Autobind Decorator:

    import autobind from 'autobind-decorator';

class Privilege extends Component { @autobind render () { console.log(this.props); } }

3. 构造函数里手动绑定

class Privilege extends Component { constructor() { this.render = this.render.bind(this); } render() { console.log(this.props); } }

不过通过我自己在项目中的使用经验来看。
组件的一些生命周期方法是自动绑定`this`的
要这样写:

class Privilege extends Component { componentWillMount() { // do something } render() { ... } }

不过一些自己的函数的话,就要自己绑定`this`了, 如:

class Privilege extends Component { // 这里就得这样写 chooseRole = (roleId, event) => { event.preventDefault();// ok this.props.chooseRole(roleId); this.props.getPrivilegeList(roleId); }; render() { ... } }

`Mixins` 现在官方都不推荐使用了
## end
先总结这样吧, 新的收获再及时更新


## 参考
[NCZOnline](https://www.nczonline.net/blog/2013/09/10/understanding-ecmascript-6-arrow-functions/)

厚颜一下 ~^_^~

赏赐