关于javascript:箭头函数需要注意的点

40次阅读

共计 4089 个字符,预计需要花费 11 分钟才能阅读完成。

一、引言

置信大家对 ES6 的箭头函数都不生疏,咱们也会在日常开发的过程中常常应用到它,然而箭头函数有哪些值得咱们去留神的点呢?

二、箭头函数的几个应用留神点

1. 函数体内的 this 对象,就是定义时所在的对象,而不是应用时所在的对象

咱们都晓得,一般的函数外面的 this 是指向运行时的作用域的 ,然而箭头函数则不然, 箭头函数中的 this 是绑定定义时所在的作用域的

  • 一般函数
function foo() {setTimeout(function() {console.log('id:', this.id);
  }, 100);
}

var id = 21;

foo.call({id: 42});            //id: 21
  • 箭头函数
function foo() {setTimeout(() => {console.log('id:', this.id);
  }, 100);
}

var id = 21;

foo.call({id: 42});            //id: 42

由下面两个例子可见,setTimeout 外面的回调函数运行的时候的作用域是 window,然而 this 定义的时候的作用域是函数 foo。所以,如果是一般函数,执行时 this 应该指向全局对象 window,这是应该输入 21。然而,箭头函数导致 this 总是指向函数定义失效时所在的对象,所以输入 42.

利用箭头函数的这个特点,咱们 能够应用箭头函数使 this 指向固定化 ,这种个性很 有利于封装回调函数。上面是一个例子,DOM 事件的回调函数封装在一个对象外面。

var handler = {
  id: '123456',

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

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

下面代码的 init 办法中,应用了箭头函数,这导致这个箭头函数外面的 this,总是指向 handler 对象。否则,回调函数运行时,this.doSomething 这一行会报错,因为此时 this 指向 document 对象。

很多小伙伴会感到很奇怪,为什么箭头函数的 this 不会因为函数运行时作用域的扭转而扭转

其实理论的起因是 箭头函数基本没有本人的 this,导致外部的 this 就是外层代码块的 this。

所以,箭头函数转成 ES5 的代码如下:

// ES6
function foo() {setTimeout(() => {console.log('id:', this.id);        // 其实这里的 this 就是应用了外层作用域的 this
  }, 100);
}

// ES5
function foo() {
  var _this = this;            // 将外层作用域的 this 复制给一个变量

  setTimeout(function () {console.log('id:', _this.id);
  }, 100);
}

2. 不能够当作构造函数,也就是说,不能应用 new 命令,否则会抛出一个谬误

下面第一点说到:箭头函数没有本人的 this,所以天经地义箭头函数也不能够当作构造函数

上面尝试应用箭头函数作为构造函数:

var fun = (id, name) => {
    this.id = id;
    this.name = name;
    this.showName = () => {console.log(this.name);
    }
};

let obj = new fun(1, "hdl");     //TypeError: fun is not a constructor
obj.showName();

果然,报错了,说 fun 不是一个构造函数,这也反过来印证了第一点,箭头函数没有 this。

3. 不能够应用 arguments 对象,该对象在函数体内不存在。如果要用,能够用 rest 参数代替。

function func1(a, b) {console.log(arguments);
}

let func2 = (a, b) => {console.log(arguments);     //arguments is not defined
}

func1(1, 2);
func2(1, 2);

如果非要打印函数参数,能够 在箭头函数中应用 rest 参数代替 arguments 对象.

function func1(a, b) {console.log(arguments);
}

let func2 = (...rest) => {console.log(rest);     //[1, 2]
}

func1(1, 2);
func2(1, 2);

4. 没有 new.target

new.target 是 ES6 新引入的属性,一般函数如果通过 new 调用,new.target 会返回该函数的援用

function Cat() {console.log(new.target); 
}
let cat = new Cat(); // ƒ Cat() {console.log(new.target); }

此属性次要 用于确定构造函数是否为 new 调用的

在箭头函数里应用 new.target 会报错。

// 一般函数
let a = function() {console.log(new.target);
}
a(); // undefined

// 箭头函数
let b = () => {console.log(new.target); // 报错:Uncaught SyntaxError: new.target expression is not allowed here
};
b();

5. 没有原型和 super

因为不能通过 new 关键字调用,不能作为构造函数,所以 箭头函数不存在 prototype 这个属性

let func = () => {};
console.log(func.prototype) // undefined

箭头函数没有原型,故也不能通过 super 来拜访原型的属性,所以箭头函数也是没有 super 的。同 this、arguments、new.target 一样,这些值由外围最近一层非箭头函数决定。

6.call/apply/bind 办法无奈扭转箭头函数中 this 的指向

这个也很容易了解,call()、apply()、bind()办法的独特特点是能够扭转 this 的指向 ,用来动静批改函数执行时 this 的指向。但因为 箭头函数的 this 定义时就曾经确定了且不会扭转。所以这三个办法永远也扭转不了箭头函数 this 的指向。

var name = 'global name';
var obj = {name: 'huangdonglu'}
// 箭头函数定义在全局作用域
let func = () => {console.log(this.name);
};

func();     // global name
// this 的指向不会扭转,永远指向 Window 对象, 放到到 window 下的全局变量
func.call(obj);     // global name
func.apply(obj);    // global name
func.bind(obj)();   // global name

7. 箭头函数的解析程序绝对考前

尽管箭头函数中的箭头不是运算符,但箭头函数具备与惯例函数不同的非凡运算符优先级解析规定。

let a = false || function() {}; // ok
let b = false || () => {}; // SyntaxError: Malformed arrow function parameter list
let c = false || (() => {}); // ok

8. 箭头函数不反对重名参数

function foo(a, a) {console.log(a, arguments); // 2 Arguments(2) [1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ]
}

var boo = (a, a) => { // 间接报错:Uncaught SyntaxError: Duplicate parameter name not allowed in this context
    console.log(a);
};
foo(1, 2);
boo(1, 2);

9. 不能够应用 yield 命令,因而箭头函数不能用作 Generator 函数。

三、箭头函数不实用场景

咱们都晓得,箭头函数比一般的函数要简洁很多,然而箭头函数也不是任何场景都能够实用的。

1. 第一个场合是定义对象的办法,且该办法外部包含 this。

  • 对象外面的函数应用箭头函数
const cat = {
    lives: 9,
    jumps : () => {this.lives--;}
};

cat.jumps();
console.log(cat.lives);     //9
  • 对象外面的办法应用一般办法
const cat = {
    lives: 9,
    jumps() {this.lives--;}
};

cat.jumps();
console.log(cat.lives);     //8

下面代码中,cat.jumps()办法是一个箭头函数,这是谬误的。调用 cat.jumps()时,如果是一般函数,该办法外部的 this 指向 cat;如果 写成下面那样的箭头函数,使得 this 指向全局对象 ,因而不会失去预期后果。这是因为 对象不形成独自的作用域,导致 jumps 箭头函数定义时的作用域就是全局作用域

2. 须要动静 this 时,也不应该应用动静函数。

var btn = document.getElementById('btn');
btn.addEventListener('click', () => {console.log(this);
});

因为 btn 的监听函数是一个箭头函数,导致外面的 this 就是全局对象 , 而不合乎咱们想操作按钮自身的需要。 如果改成一般函数,this 就会动静指向被点击的按钮对象。

除了下面这两点外,还总结了一下几点:

  • 不应被用在定义对象的办法上
  • 具备动静上下文的回调函数,也不应应用箭头函数
  • 不能利用在构造函数中
  • 防止在 prototype 上应用
  • 防止在须要 arguments 上应用

四、总结

就先总结下面这么多了,感激 @阮一峰 阮老师的文章:箭头函数应用留神点,最近也在浏览 NICHOLAS 的《深刻了解 ES6》,心愿能对 ES6 更加的相熟,也心愿大家可能对本文加以补充和斧正。

正文完
 0