--- tags : 六角-vue直播班 --- # this運作 ### ==一個函式中包含多少參數== ```javascript= // #1 一個函式中包含多少參數 var a = '全域' function fn(params) { console.log(params, this, window, arguments); debugger; } fn(); ``` * 在未傳入 params 值前,params及arguments都為空的狀態 ![](https://i.imgur.com/LuTOdF0.png) > 這時fn 函式傳入參數值 ```javascript= fn(1,2,3,4); ``` * params因為只有一個凾式參數,所以只有一個值、arguments比較像傳統凾式可帶入參數內所有的值。 ![](https://i.imgur.com/DxtY0HI.png) * 那this 此時指向為windos 全域變數 ![](https://i.imgur.com/Yyit1Y1.png) * windos全域變數還是指向自己 ![](https://i.imgur.com/1bZMP7x.png) ### ==this 的指向為何== * 傳統函式中的 this 只與調用方式有關 * 這種呼叫 凾式的方式 統稱為 **simple call** ```javascript= var someone = '全域'; function callSomeone() { console.log(this.someone); } //simple callcj 呼叫方式 callSomeone(); //顯示 全域 ``` * 若凾式前面有指向物件時指向就會指向物件本身 ```javascript= var obj = { someone: '物件', callSomeone() { console.log(this.someone); } } obj.callSomeone(); //顯示 物件 ``` * 例如調用了callSomeone方式,但凾式物件指向了 obj2 物件,所以顯示還是會指向obj2裡面的someone 顯示 物件2 ```javascript= var obj2 = { someone: '物件2', callSomeone } obj2.callSomeone(); //顯示 物件2 ``` ### ==物件包物件的調用== * 常見的物件包物件的調用方式,指向都會是往凾式的上一個物件指向 ```javascript= var wrapObj = { someone: '外層物件', callSomeone, nnerObj: { someone: '內層物件', callSomeone, } } // 調用第一層時 wrapObj.callSomeone(); // 顯示 外層物件 // 調用第二層時 wrapObj.innerObj.callSomeone(); // 顯示 內層物件 ``` ### ==this避免的調用方式== * 通常this 前面沒有物件時,指向就會向外找尋 ```javascript= var obj3 = { someone: '物件 3', fn() { callSomeone(); // 通常平常不會這樣去取用 this } } //因為調用指向為凾式 並非物件所以就向外找尋 obj3.fn(); //顯示 全域 ``` * 在使用 callback function時,也盡量避免調用到this,因為this指向還是會向外找尋全域變數 ```javascript= var obj4 = { someone: '物件 4', fn() { setTimeout(function() { console.log(this.someone); }); } } obj4.fn(); // 顯示 全域 ```