javascript——箭头函数(es6)

  • 2019-05-27
  • 43
  • 0

我们来讲讲es6的箭头函数,

箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this,arguments,super或 new.target。这些函数表达式更适用于那些本来需要匿名函数的地方,并且它们不能用作构造函数。(来自MDN)

MDN对箭头函数的介绍还是很充分的,所以我总点得说点与众不同的,我主要想说的有以下几点:

1.this

首先它(箭头函数)没有自己的this,所以每次执行函数的时候,内部的this实际指向它的父级作用域,这里容易草造成问题,也可用来解决问题

造成的问题:

const a = {
    b: 'a',
    fn: () => {
        // this 指向???
        return this.b
    }
}
// 此时 fn里面的this 不是指向 a
// 结果 undefined
a.fn() 

上述的情况 有很多类似情况,不一一举例,包含但不仅限于定义对象方法、定义原型方法、定义构造函数、定义事件回调函数

解决的问题:

 function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this| 正确地指向 p 实例
  }, 1000);
}
// 
var p = new Person();

主要还是一点箭头函数的this指向的是从他的父级开始。

2.prototype

我们知道js是一个面向对象的语言,所有的对象都一个原型属性,然后函数也是对象的一条支线,所以函数也有prototype属性,指向他的构造函数的对象,可是箭头函数就是没有,所以这也是和他没有this是有关的,所以当使用call,bind 也不能给箭头函数绑定this,因为人家连原型prototype都没有,你这个this要绑定给谁呢。

原有

至于为什么箭头函数没有原型,难道他不是真的函数吗?

var d = () => {return '2'}
d instanceof Function
// true

d.__proto__
// ƒ () { [native code] }

结果它是函数,不然也不叫箭头函数了,它虽然没有显示原型prototype,但是他有隐式原型__proto__,所以还是具有函数大部分功能的,

至于为什么箭头函数没有this,arguments,prototype等等,我查找很多资料(其实资料很少),简单说就是,箭头函数被设计为“抛弃型”的函数,因此不能被用于定义新的类型,prototype 属性的缺失让这个特性显而易见。

评论

还没有任何评论,你来说两句吧