箭头函数和普通函数中的this

箭头函数的写法

var fun = () => {
  return 1;
}

等于

function fun() {
  return 1;
}

普通函数中的this

1. this总是代表它的直接调用者, 例如 obj.function ,那么function中的this就是obj;
2. 在默认情况(非严格模式下,未使用 ‘use strict’),没找到直接调用者,则this指的是 window;
3. 在严格模式下,没有直接调用者的函数中的this是 undefined;
4. 使用call,apply,bind(ES5新增)绑定的,this指的是 绑定的对象.

not strict

function fun() {
  console.log(this)
}
fun() // window对象

strict

'use strict'
function fun() {
  console.log(this)
}
fun() // undefined

call

function fun() {
  console.log(this)
}
fun.call({a:1}) // { a: 1 }

箭头函数中的this

1.箭头函数会捕获其所在上下文的 this 值，作为自己的 this 值，自己本身并没有this值；
2.箭头函数的this永远指向其上下文的this，任何方法都改变不了其指向，如call(), bind(), apply()。

箭头函数作为匿名函数,是不能作为构造函数的,不能使用new

var B = ()=>{
  value:1;
}
var b = new B();

箭头函数不绑定arguments,取而代之用rest参数…解决

function A(a){
  console.log(arguments); //[object Arguments] {0: 1}
}

var B = (b)=>{
  console.log(arguments); //ReferenceError: arguments is not defined
}

var C = (...c)=>{ //...c即为rest参数
  console.log(c); //[3]
}
A(1);
B(2);
C(3);

箭头函数会捕获其所在上下文的 this 值，作为自己的 this 值

var obj = {
  a: 10,
  b: function(){
    console.log(this.a);
  },
  c: function() {
     return ()=>{
           console.log(this.a);
     }
  }
}
obj.b();    // 10
obj.c()();  // 10

在c方法里面return的那个箭头函数捕获的是c:function(){}这个环境的this，而这个环境的this是obj

var obj = {
  a: 10,
  b: () => {
    console.log(this.a); //undefined
    console.log(this); //window
  },
  c: function() {
    console.log(this.a); //10
    console.log(this); //obj{...}
  }
}
obj.b();        //undefined     {}
obj.c();        //10            { a: 10, b: [Function: b], c: [Function: c] }
var b = obj.b
b()             //undefined     {}
var c = obj.c
c()             //undefined     window

箭头函数捕获的是obj{}这个对象的环境，然后这个环境的this指向的是window

var obj = {
  a: 10,
  b: function(){
    console.log(this.a); //10
  },
  c: function() {
     return () => {
      return ()=>{
            console.log(this.a); //10
        }
    }
  }
}
obj.b();        //10
obj.c()()();    //10

如下能得到一个有趣的规律，里面的匿名函数的this指向外层匿名函数的this，外面的匿名函数的this指向obj{}这个对象的环境，然后这个环境的this指向的是window

var obj = {
  a: 10,
  b: function(){
    console.log(this.a); //10
  },
  c: () => {
     return ()=>{
           console.log(this.a); //10
     }
  }
}
obj.b();        //10
obj.c()();      //undefined

使用call()和apply()调用

通过 call() 或 apply() 方法调用一个函数时，只是传入了参数而已，对 this并没有什么影响

obj.b.call({a:1}) // undefined  {}
obj.c.call({a:1}) // 1          { a: 1 }