【前端】（三）ES6新特性之箭头函数

箭头函数

箭头函数即使用箭头表示的函数。
匿名函数才能改写为箭头函数。

写法

常见的函数写程箭头函数：

let num = function (a) {
     
	return a*2;
}

//写成箭头函数形式，function(a) 变成 =(a)=>
let num = (a) => {
     
	return a*2
}

//当只有一个参数的时候，省略()，
let num = a => {
     
	return a*2
}

//当函数体只有一条return语句时，省略{}和return
let num = a => a*2;

好处

1. 语法比函数表达式更加简洁，是经典函数表达式的语法糖

箭头函数的this指向

普通函数的this：会重新绑定this，指向调用它的对象上
箭头函数：
（1）默认指向定义它时，所处上下文的对象的this指向。即ES6箭头函数里this的指向就是上下文里对象this指向，若没有上下文对象，this就指向window
（2）即使是call，apply，bind等方法也不能改变箭头函数this的指向

拓展：this指向问题

（1）默认绑定规则

① this默认指向window
② 全局环境下的this指向window

console.log(this) //window

③ 函数自己独立调用时内部的this指向window

function fun() {
     
	console.log(this)
}
fun() // window。
//fun()即window.fun()，fun()被window调用

③ 被嵌套的函数独立调用时，内部this指向window

var obj = {
     
	a:1,
	foo:function() {
     
		console.log(this) //object
		function test() {
     
			console.log(this) //window
		}
		test() 
	}
}

obj.foo(); //内部的test()自动执行，打印window

④ 闭包中的this默认指向window

var a = 0;
var obj = {
     
  a:2,
  foo:function() {
     
    console.log(this) // object
    return function test() {
     
      console.log(this) // window
    }
  }
}
var fn = obj.foo()
console.log(fn())

（2）隐式绑定

function foo() {
     
  console.log(this.a)
}
var obj = {
     
  a:1,
  foo:foo,
  obj2:{
     
    a:2,
    foo:foo
  }
}
// foo()函数的直接对象是obj，this指向直接对象
obj.foo(); //1
// foo()函数的直接对象是obj2，this指向直接对象
obj.obj2.foo()//2

（3）隐式绑定丢失的情况

隐式丢失就是指被隐式绑定的函数丢失了绑定对象从而默认绑定到window。

情况一：重新赋值

var a = 0;
function foo() {
     
  console.log(this.a);
}
var obj = {
     
  a:1,
  foo:foo
}
var bar = obj.foo
bar(); // 0
//bar()相当于window.bar()

等同于

var a = 0;
var bar = function foo () {
     
  console.log(this.a)
}
bar()

情况二：参数传递

var a = 0;
function foo() {
     
  console.log(this.a)
}
function bar(fn) {
     
  fn();
}
var obj = {
     
  a:1,
  foo:foo
}
bar(obj.foo) //0，指向window

情况三：内置函数 setTimeOut()和setInterval()第一个参数的回掉函数中的this默认指向了window

setTimeout(function(){
     
	console.log(this);
	},1000);

情况四：间接调用

function foo(){
     
	console.log(this.a)
}
var a=2;
var obj = {
     
	a:3;
	foo:foo
}
var p = {
     a:4}
// 赋值给另一个变量的一个属性 并且 立即调用
(p.foo = obj.foo)() //window

（4）显式绑定

call() apply() bind()把对象绑定到this上，叫做显示绑定。
一篇文章解决所有：https://www.cnblogs.com/Jade-Liu18831/p/9580410.html

（5）new绑定

1. 相当于构造函数来实例化对象，内部this指向当前实例化的对象

function fn() {
     
  console.log(this)
}
var fn = new fn()
console.log(fn)   //fn

推荐文章

彻底理解js中this的指向，不必硬背。
文章中我认为有用的句子:
(1) this永远指向的是最后调用它的对象
(2) this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁(详细见原文)