~~~ "use strict"; let fn = function (a, b) { console.log(this); }; let obj = {name: "OBJ"}; // document.onclick = fn;//=>把FN綁定給點擊事件， 點擊的時候執行FN // document.onclick = fn();//=>在綁定的時候,先把FN執行, 把執行的返回值(UNDEFINED)綁定給事件,當點擊的時候執行的是undefined //=>需求：點擊的時候執行FN，讓FN中的THIS是OBJ // document.onclick = fn;//=>this:document // document.onclick = fn.call(obj);//=>雖然this確實改為obj了， 但是綁定的時候就把fn執行了(call是立即執行函數)， 點擊的時候執行的是fn的返回值undefined *** // document.onclick = fn.bind(obj);//=>bind屬于把fn中的this預處理為obj， 此時fn沒有執行，當點擊的時候才會把fn執行 *** /* * CALL中的細節 * 1.非嚴格模式下，如果參數不傳，或者第一個傳遞的是null/undefined， * THIS都指向WINDOW * 2.在嚴格模式下，第一個參數是誰，THIS就指向誰（包括null/undefined）， * 不傳THIS是undefined */ // fn.call(obj, 10, 20);//=>this:obj a=10 b=20 // fn.call(10, 20);//=>this:10 a=20 b=undefined *** // fn.call();//=>this:window a=undefined b=undefined // fn.call(null);//=>this:window a=undefined b=undefined // fn.call(undefined);//=>this:window a=undefined b=undefined 嚴格模式： // fn.call(10, 20);//=>this:10 a=20 b=undefined *** // fn.call();//=>this:undefined a=undefined b=undefined // fn.call(null);//=>this:null a=undefined b=undefined // fn.call(undefined);//=>this:undefined a=undefined b=undefined /* * apply：和call基本上一模一樣，唯一區別在于傳參方式 * fn.call(obj,10,20) * fn.apply(obj,[10,20]) APPLY把需要傳遞給FN的參數放到一個數組 *（或者類數組）中傳遞進去，雖然寫的是一個數組， 但是也相當于給FN一個個的傳遞 */ /* * bind：語法和call一模一樣，唯一的區別在于立即執行還是等待執行 * fn.call(obj,10,20) 改變FN中的THIS,并且把FN立即執行 * fn.bind(obj,10,20) 改變FN中的THIS,此時的FN并沒有執行（不兼容IE6~8） */ ~~~