箭头函数和this

Posted 2020-12-13 do-something

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions

1.

()=>{c}        无参数return c

a=>{c}         一个参数a return c

(a,b)=>{c}   两个参数a和b return c

aa=>{{cc}}   一个参数aa return 对象cc

引入箭头函数有两个方面的作用：更简短的函数并且不绑定this

eg:

var elements = [
  ‘Hydrogen‘,
  ‘Helium‘,
  ‘Lithium‘,
  ‘Beryllium‘
];

不用箭头函数:
elements.map(function(element) { 
  return element.length; 
});
用箭头函数:

elements.map(element => element.length);

箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。

2.

 

在箭头函数出现之前，每一个新函数根据它是被如何调用的来定义这个函数的this值：

 

• 如果是该函数是一个构造函数，this指针指向一个新的对象
• 在严格模式下的函数调用下，this指向undefined
• 如果是该函数是一个对象的方法，则它的this指针指向这个对象等等

鉴于 this 是词法层面上的，严格模式中与 this 相关的规则都将被忽略。

var f = () => { ‘use strict‘; return this; };
f() === window; // 或者 global