一、this原理

this是JavaScript的一個關鍵字，函式呼叫時才會出現；
因為函式是在一定的環境中執行的，呼叫函式時肯定需要知道是[誰呼叫的]？就用到了this進行指向；
那麼this到底指向的是什麼？
this 既不指向函式自身，也不指函式的詞法作用域，而是呼叫函式時的物件！

二、使用場景

（一）普通函式的呼叫，this指向的是Window

var name = '卡卡';
function cat(){
  var name = '有魚';
  console.log(this.name);//卡卡
  console.log(this);//Window {frames: Window,postMessage: ƒ,blur: ƒ,focus: ƒ,close: ƒ,…}
}
cat();

這裡大家可能有疑問，不是說this指向的是呼叫函式的物件嗎？cat()並沒有物件出現啊，這個是因為在全域性作用域中，window是根目錄，一般可以省略，例如：alert()其實是 window.alert();

（二）物件的方法，this指的是該物件

1、一層作用域鏈時，this指的該物件

var name = '卡卡';
var cat = {
  name:'有魚',eat:function(){
    console.log(this.name);//有魚
  }
}
cat.eat();

因為函式eat是由cat物件呼叫的，所以this指向的是cat本身，所以cat.name=有魚；

2、多層作用域鏈時，this指的是距離方法最近的一層物件

var name = '卡卡';
var cat = {
  name:'有魚',eat1:{
    name:'年年',eat2:function(){
      console.log(this.name);//年年
    }
  }
}
cat.eat1.eat2();

eat2方法包含在兩個物件cat、eat1中，但是緊挨著的eat1物件，所以this.name指的是eat1的屬性name，即[年年]

這裡需要注意一個情況，如果cat.eat1.eat2這個結果賦值給一個變數eat3，則eat3()的值是多少呢？

var eat3 = cat.eat1.eat2;
eat3(); // 卡卡

答案是[卡卡]，這個是因為經過賦值操作時，並未發起函式呼叫，eat3()這個才是真正的呼叫，而發起這個呼叫的是根物件window，所以this指的就是window，this.name=卡卡

（三）建構函式的呼叫，this指的是例項化的新物件

var name = '卡卡';
function Cat(){
  this.name = '有魚';
  this.type = '英短藍貓';
}
var cat1 = new Cat();
console.log(cat1);// 例項化新物件 Cat {name: "有魚",type: "英短藍貓"}
console.log(cat1.name);// 有魚

（四）apply和call呼叫時，this指向引數中的物件

var name = '有魚';
function eat(){
  console.log(this.name);
}
var cat = {
  name:'年年',}
var dog = {
  name:'高飛',}

eat.call(cat);// 年年
eat.call(dog);// 高飛

apply方法和call方法相當於改變了顯式的修改了prototype原型

（五）匿名函式呼叫，指向的是全域性物件

var name = '卡卡';
var cat = {
  name:'有魚',eat:(function(){
    console.log(this.name);//卡卡
  })()
}
cat.eat;

這裡提一下匿名函式呼叫方式，常用的有三種方法：

//①先用()包起來,然後再後面跟 (引數) 
(function(data){
  console.log(data);
})("222");

//②先後面跟(引數),然後再()包起來
(function(data){
  console.log(data);
}("333"));

//③正常函式格式，前面加 !
!function(data){
  console.log(data);
}("444");

（六）定時器中呼叫，指向的是全域性變數
常用的定時器有setInterval和setTimeout，拿setInterval舉例子：

var name = '卡卡';
var cat = setInterval(function(){
  var name = '有魚';
  console.log(this.name);// 卡卡
  clearInterval(cat);
},500);

其實定時器的本質，也是一種匿名函式的形式。

總結：
①普通函式的呼叫，this指向的是window
②物件方法的呼叫，this指的是該物件，且是最近的物件
③建構函式的呼叫，this指的是例項化的新物件
④apply和call呼叫，this指向引數中的物件
⑤匿名函式的呼叫，this指向的是全域性物件window
⑥定時器中的呼叫，this指向的是全域性變數window

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。