• this 是 JavaScript 的关键字
• this 是 function 执行时，自动生成的内部物件
• 随着 function 执行的场合不同，this 指向的值也会有所不同
• 大多情况下，this 代表的就是呼叫 function 的物件

判断关键

this 决定在於函式如何被呼叫

• 纯粹的调用(一般的函式呼叫、立即函式 IIFE、闭包 Closure、间接参考)
  • window
• 物件的方法调用
  • Object
• DOM 物件调用
  • Object (监听函式中的 this 会指向的则是该 DOM 物件)
• 建构式的调用
  • Object > 属於 new 它的物件
• bind, apply, call
  • 传入的物件
• 箭头函示 >箭头函数会自动将 this 变数绑定到其定义时所在的物件
  • window 或 定义的环境
  • 箭头函示不得当建构式
• 在严格模式下，一般函式呼叫的 this 值都是 undefined。

间接参考需特别注意

以下为各个案例
1.变数指定物件下的方法，并执行

 var name = 'GlobalName';

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

   var obj = {
     name: 'tom',
     foo: foo,
   };

   obj.foo()                        //tom(物件的方法调用)
   var callThisName = obj.foo;      //GlobalName(间接参考)

   callThisName(); // "GlobalName"

2.参数传递中的callback function，也属於间接参考

var name = 'GlobalName';

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

var obj = {
  name: 'tom',
  foo: foo,
};

function boo(fn) {
  fn();
}

boo(obj.foo); // "GlobalName"

3.物件下的多层方法也属於间接参考

var name = 'GlobalName';

var obj = {
  name: 'tom',
  foo: function(){
    console.log(this.name)         //tom
    function inner() {
      console.log(this.name)       //GlobalName
      function inner2() {
        console.log(this.name)     //GlobalName
      }   
       inner2()
    }
    inner()
  }
};
obj.foo()

热门面试题

1.依序出现甚麽

function callName(){
  console.log(this.name)
}

var obj = {
  name:'tom',
  callName:callName,
  nickname:{
    name:'tommy',
    callName:callName
  }
}

obj.callName()
obj.nickname.callName()

Ans: tom、tommy

2.依序出现甚麽

var name = "Global name"

function callName(){
  console.log(this.name)
}

var obj = {
  name:'tom',
  callName:callName,
  nickname:{
    name:'tommy',
    callName:callName
  }
}

var newcall1 = obj.callName
var newcall2 = obj.nickname.callName


newcall1()
newcall2()

Ans: Global name、Global name(因为是间接参考)
3.依序出现甚麽

function callName(){
  console.log(this.name)
}

var obj = {
  name:'tom',
  callName:callName,
  nickname:{
    name:'tommy',
    callName:callName
  }
}

var newcall1 = obj
var newcall2 = obj.nickname
var newcall3 = newcall1.callName()      //已执行，非间接参考
var newcall4 = newcall2.callName

newcall3
newcall4

Ans:tom、[Function: callName]

4.会印出什麽呢~若是严谨模式下又会印出甚麽

// "use strict"
var name = 'tom';
function callName(){
  console.log(this.name);
};

var a = {
  name:'alice',
  callName:callName
}
callName.name = 'jonna'

a.callName()

Ans:alice、Cannot assign to read only property 'name'

5.会依序印出什麽呢~(时常忘记!!)

var name = 'tom';

var a = {
  name:'alice',
  myName:function () {
    console.log(this.name);
    let call = () =>{
    console.log(this.name);
    }
    call()
  },
 call2:() =>{
    console.log(this.name);
  },
  call3:()=>{
    name = 'wtf?'
    console.log(this.name)
  },
}

a.myName();
a.call2();
a.call3()

Ans: alice、alice、tom、wtf? (箭头函式作用域)

6.会依序印出什麽呢~(开始觉得恶心了....)

var name = 'tom';

var obj = {
  x:{
    name:'jam',
    myname:function(){
      console.log(this.name);
      (function(){
        console.log(this.name);
      })();
      setTimeout(function(){
        console.log(this.name);
      },500)
    }
  },
  name:'alice'
}

var a = obj.x.myname();
a;

Ans:jam、tom、tom

7.依序出现什麽答案(恶心更加延伸)

var name = 'tom';

var obj = {
  x:{
    name:'jam',
    myname:function(){
      this.name = 'amy'
      console.log(this.name);
      (function(){
        this.name = 'john'
        console.log(this.name);
      })();
      function final(){
        console.log(this.name)
      };
      setTimeout(function(){
        this.name = 'sam'
        console.log(this.name);
        final()
      },500);
    }
  },
  name:'alice'
}

var a = obj.x.myname();

a;
console.log(obj.x.name)
console.log(this.name)

Ans:amy、john、amy、john、sam、john
参考资源:
竹白笔记、影片、文章、js热门面试题