js this

js 的 this 是个比较令人头疼的东西，尤其是在面试的时候，深受面试官的喜爱。我们今天来谈谈 js 中的 this

this 是什么，为什么要用 this
它是一个在每个函数作用域中自动定义的特殊标识符关键字， this机制提供了更优雅的方式来隐含地“传递”一个对象引用，导致更加干净的 API 设计和更容易的复用。当我们的代码和使用环境约复杂，我们就越能感受到 this 的重要性

先看一段代码

 let x = {
   num: 1,
   sum: function(data) {
     return this.num + data
   }
 }
 let y = {
   num: 1,
   sum: function(data) {
     return this.num + data
   }
 }
 let y_sum = y.sum
  console.log(x.sum(1)) // 2
  console.log(y_sum(1)) // NaN

单从上面的代码来看，两者似乎没有区别，但是运行后的结果确是不一样的

在看一段代码

 let x = {
   num: 1,
   sum: function(data) {
     return this.num + data
   }
 }
 let y = {
   num: 1,
   sum: data => {
     return this.num + data
   }
 }
  console.log(x.sum(1)) // 2
  console.log(y.sum(1)) // NaN

也是一样，看着俩段代码差别不大，但是结果却完全不一样

var num = 2
var obj = {
  num: 1,
  say: function () {
    setTimeout(function(){
      console.log(this.num) // 2
    }, 0)
  }
}
obj.say()

一般函数的this指向是指执行该函数的运行对象

 let x = {
   num: 1,
   sum: function(data) {
     return this.num + data
     // 这里的this是指运行了sum函数的x。所以this.num = 1
   }
 }
 let y = {
   num: 1,
   sum: function(data) {
     return this.num + data
     // 由于这里运行sum函数的不再是y而是window。所以这里相当于window.num = undefined
   }
 }
 let y_sum = y.sum
  console.log(x.sum(1)) // 2
  console.log(y_sum(1)) // NaN

箭头函数的指向是指向运行该函数的父执行上下文的this,箭头函数中的this是在定义函数的时候绑定，而不是在执行函数的时候绑定。

let x = {

   num: 1,
   sum: function(data) {
     return this.num + data
     // 这里的this指的是x
   }
 }
 let y = {
   num: 1,
   sum: data => {
     return this.num + data
   }
   // 这里因为是箭头函数，所以这里的this在sum函数定义的时候就开始绑定了，这里的this是window
 }
  console.log(x.sum(1)) // 2
  console.log(y.sum(1)) // NaN

  var obj = {
  say: function () {
    let _say = () => {
      console.log(this);
      // 这里的this就是say，因为在定义_say时，_say会去拿父执行上下文的this
    }
    return _say()
  }
}
obj.say()

对于匿名函数来说，this的指向是window

var num = 2
var obj = {
  num: 1,
  say: function () {
    setTimeout(function(){
      console.log(this.num) // 2
      // 这里的this是window
    }, 0)
  }
}
obj.say()
// 这里如果是箭头函数，结果又不一样了
var obj2 = {
  num: 1,
  say: function () {
    setTimeout(() =>{
      console.log(this.num) // 1
    }, 0)
  }
}
obj2.say()

虽然有的时候，函数会在window下调用，this会指向window对象，但是this 不会以任何方式指向函数的 词法作用域

function foo() {
    var a = 2;
    this.bar();
}

function bar() {
    console.log( this.a );
}

foo(); //undefined

开发者试图用 this 在 foo() 和 bar() 的词法作用域间建立一座桥，使得bar() 可以访问 foo()内部作用域的变量 a。这样的桥是不可能的。 你不能使用 this 引用在词法作用域中查找东西。这是不可能的。

更多练习

function foo() {
    console.log( this.a );
}

var obj2 = {
    a: 42,
    foo: foo
};

var obj1 = {
    a: 2,
    obj2: obj2
};

obj1.obj2.foo(); // 42
// 这里最终调用foo函数的依然是obj2


function foo() {
    console.log( this.a );
}

function doFoo(fn) {
    // `fn` 只不过 `foo` 的另一个引用
  // 在这里fn() != obj.foo()
    fn();
}

var obj = {
    a: 2,
    foo: foo
};

var a = "oops, global";

doFoo( obj.foo ); // "oops, global"

var obj = {
  say: function () {
    function _say() {
      // this 是什么？想想为什么？
      console.log(this)
    }
    return _say.bind(obj)
  }()
}
obj.say()
// 这里_say通过bind将this指向了obj，但是打印的结果却还是window，为什么呢？
// 这里可以看作： 因为 = 赋值语句是由右向左运行的。所以这里的obj应该是个undefined,所以this指向了window

换种写法就会完全不一样了

var obj = {}
obj.say: function () {
    function _say() {
      console.log(this)
    }
    return _say.bind(obj)
}()
obj.say()
// 这里this指向了obj