一、this原理

this是JavaScript的一個關鍵字，函數調用時才會出現;

因為函數是在一定的環境中運行的，調用函數時肯定需要知道是[誰調用的]?就用到了this進行指向;

那么this到底指向的是什么?

this 既不指向函數自身，也不指函數的詞法作用域，而是調用函數時的對象!

[[314958]]

二、使用場景

(一)普通函數的調用，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