200211-學習紀錄 函式的綁定物件this進階

參考網站:

JavaScript 網頁前端工程進階：函式的綁定物件 this - 進階篇


函式呼叫 1.基本呼叫: 函式名稱(參數資料) 2.使用apply呼叫函式: 函式名稱.apply(綁定物件,[參數資料,...]) 3.使用call呼叫函式 函式名稱.call(綁定物件,參數資料...)

this代表函式的”綁定物件”，通常在函式中使用
不同的程式碼脈絡下，”綁定函式”代表不同的東西

基礎:了解綁定物件在不同基本脈絡下的變化
情況一:獨立的函式
情況二:物件的方法
情況三:事件處理函式
情況四:建構函式

進階:自訂的綁定物件

---

使用 bind 重新綁定物件

function test(){
    console.log("綁定物件",this);
}
test();      //此時this綁定物件為window
let test2=test.bind({x:3});
test2();     //重新綁定後舊物件會被覆蓋  此時this綁定物件為{x:3}  
let test3=test.bind(document);
test3();     //重新綁定後舊物件會被覆蓋  此時this綁定物件為document

使用 apply 呼叫函式，可自己設定綁定物件

function add(n1, n2){
     console.log("結果", n1+n2);    //結果7
     console.log("綁定物件", this);    //綁定物件window
}
add(3,4);    //基本的函式呼叫，無法自己設定綁定物件
add.apply({y:4},[4, 5]); //{y:4}為綁定物件，[4, 5]為陣列，代表原來參數，4放到n1，5放到n2
add.apply(document, [5, 6]);   //綁定物件為document,n1為5,n2為6

使用 call 呼叫函式，可自己設定綁定物件

//call與apply的差別在於給予參數部分 apply用陣列給予參數，call用傳統寫法給予參數
add.call({z:10}, 3, 4);   //綁定物件為{z:10},n1為3,n2為4