js中的this

如何区别JavaScript中的this指向

类型一：在函数中直接调用的

• 直接调用的函数this指向window

  function greet(text) {
      console.log(text);
  }
  greet("Hello"); // hello
  greet.call(window, "Hello"); // hello
  

  类型二：函数作为对象的方法被调用的

• 谁调用函数，函数的this就指向谁

  let person = {
      name: "张三",
      sayHello: function(text) {
          console.log(`${this.name}笑着向你说：${text}`);
      }
  }
  person.sayHello("Hello"); // 张三笑着向你说：Hello
  person.sayHello.call(person, "Hello"); // 张三笑着向你说：Hello

  一道面试题

• 打印结果是什么？

  var name = 222;
  var a = {
      name: 111,
      say: function() {
          console.log(this.name);
      }
  }
  
  var fun = a.say;
  fun();
  a.say();
  
  var b = {
      name: 333,
      say: function(fn){
          fn();
      }
  }
  
  b.say(a.say);
  b.say = a.say;
  b.say();

• 打印结果

  // 不要使用let
  var name = 222;
  var a = {
      name: 111,
      say: function() {
          console.log(this.name);
      }
  }
  
  var fun = a.say;
  fun(); // 222  -> fun.call(window)
  a.say(); // 111 a.say.call(a)
  
  var b = {
      name: 333,
      say: function(fn){
          fn();
      }
  }
  
  b.say(a.say); // 222  -> fn.call(window)    此处传参a.say给fn()并执行，等价于  (a.say)()  也就是fn.call(window)
  b.say = a.say;
  b.say(); // 333  -> b.say.call(b)

箭头函数中的this

• 箭头函数内部没有绑定this机制，即箭头函数没有this，导致箭头函数的this指向外层代码块的this

  var x = 11;
  var obj = {
      x: 22,
      say: () => {
          console.log(this.x);
      }
  }
  obj.say(); // 11    -> this指向外层的window

  var x = 11;
  var obj = {
      x: 22,
      say: function(){
          var x = 33;
          var fn = () => {
              console.log(this.x)
          }
          return fn();
      }
  }
  obj.say(); // 22    -> this指向外层的obj