我就是JavaScript里的胖箭头

今天写代码的时候遇到了一个很有趣的问题,先看看下面这几行代码(“//”后的是输出结果)

var obj = {
        id: "awesome",
        cool: function coolFn(){
                console.log( this.id );
        }
};

var id = "not awesome";
obj.cool();  //awesome
setTimeout(obj.cool, 1000);  //not awesome

是不是超级不可思议?按照我们思维,两行都应该输出 awesome
才对啊!可是为什么第二个调用输出的确实全局变量 id
的值呢?

这是因为我们在使用 setTimeout
函数的时候,所调用的函数 cool
失去了同它自己的 this
之间的绑定,它使用的是setTimeout()函数上下文中的this(这里的this指的就是window,当前窗口)。

先看看我们常用的解决方法:

var obj = {
    id: "awesome",
    cool: function(){
        console.log(this.id);
    }
};
var id = "not awesome";
setTimeout(obj.cool.apply(obj), 1000); // awesome
setTimeout(obj.cool.call(obj), 1000);  // awesome

就是添加 apply
或者 call
函数绑定对象,但是这样的方法我们常常会忘记,下面介绍 胖箭头
的方法:

var obj2 = {
    id: "awesome",
    cool: function coolFn(){
        setTimeout(()=>{
            console.log(this.id);
        }, 100);
    }
};
var id = "not awesome";
obj2.cool(); //awesome

在这个例子中胖箭头的作用还不是很明显,看下面这个例子就非常明显了:

使用胖箭头之前

function Counter() {
  this.num = 0;
  this.timer = setInterval(function add() {
    this.num++;
    console.log(this.num);
  }, 1000);
}

我们看一下输出结果:

var b = new Counter();
// NaN
// NaN
// NaN
// ...

结果并非我们想要的计数器效果,让我们看看使用胖箭头会怎样呢?

使用胖箭头之后

function Counter() {
  this.num = 0;
  this.timer = setInterval(() => {
    this.num++;
    console.log(this.num);
  }, 1000);
}
var b = new Counter();
// 1
// 2
// 3
// ...

哇!超棒是不是!

那胖箭头到底怎么使用呢?又是为什么会有这样的特点呢?

胖箭头基础语法

  • 这个函数有多个参数,并且函数里面的表达式不止一条:

    (param1, param2, …, paramN) => { statements }

  • 当函数只有单句表达式时,可以省略 {}

    (param1, param2, …, paramN) => expression

    此时会有一个隐含的返回值,等同于: (param1, param2, …, paramN) => { return expression; }

  • 当函数参数只有一个时,有下面两种写法

    (singleParam) => { statements }

    singleParam => { statements }

  • 若这个函数没有参数时

    () => { statements }

胖箭头高级语法

  • 若要返回一个对象,就要注意,如果是单表达式,像下面这样写就会报错
// SyntaxError
x => { foo: x }

因为这样和函数体的 {...}
有语法冲突,所以要改为:

x => ({ foo: x })
  • 若函数参数是可变的或者默认的,依旧是支持的!

    (param1, param2, …rest) => { statements }

    (param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements }

    例如:

// 可变参数:
(x, y, ...rest) => {
    var i, sum = x + y;
    for (i=0; i<rest.length; i++)="" {="" sum="" +="rest[i];" }="" return="" sum;="" }
  
  • 函数参数列表中的结构(Destructuring)也是支持的!
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();  
// 6

引入胖箭头有两个方面的作用:让我们的函数变得超级简短看上去更专业,而且从一开始的例子看出胖箭头是不绑定 this
的!

更短的函数

var materials = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

materials.map(function(material) { 
  return material.length; 
}); // [8, 6, 7, 9]

materials.map((material) => {
  return material.length;
}); // [8, 6, 7, 9]

materials.map(material => material.length); // [8, 6, 7, 9]

不绑定 arguments

下面的例子得在非严格模式下运行,才看得到结果哦!

var arguments = 42;
var arr = () => arguments;

console.log(arr()); // 42

function foo() {
  var f = (i) => arguments[0]+i; 
  // foo函数的间接参数绑定
  return f(2);
}

console.log(foo(1)); // 3

这里foo()函数中的arguments[0]指的是foo()函数传进来的参数(这里使用的是我们上面提到的“胖箭头高级语法”中参数不定的语法)。

但是我们一般这样用 剩余参数
来使用arguments对象:

function foo() { 
  var f = (...args) => args[0]; 
  return f(2); 
}

foo(1); 
// 2

不绑定 this

在胖箭头出现之前,每个新定义的函数都有它自己的 this
值(在构造函数的情况下是一个新对象,在严格模式的函数调用中为 undefined,如果该函数被称为“对象方法”则为基础对象),而 this
实在是一个讨厌的东西,常常让我头疼不已 *

让我们想想开头提到的例子,由于JavaScript函数对 this
绑定的错误处理,下面的例子无法得到预期结果:

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = function () {
            return new Date().getFullYear() - this.birth; 
          // this指向window或undefined
        };
        return fn();
    }
};
console.log(obj.getAge());

现在用胖箭头修改这个例子:

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = () => new Date().getFullYear() - this.birth; 
      // this指向obj对象
        return fn();
    }
};
console.log(obj.getAge()); // 27(2017 - 1990 = 27)

胖箭头完全修复了 this
的执行, this
总是指向词法作用域,也就是外层调用者 obj

扫一扫关注ComputerStudyBar哦

[图片上传失败...(image-a4954a-1512058168001)]

简书责编内容来自:简书 (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » 我就是JavaScript里的胖箭头

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录