徹底搞清函數中的this指向
阿新 • • 發佈:2017-05-22
指向 重新 全局 pan code 一個 返回 log 改變
近日閱讀《javascript設計模式與開發實踐》
書中的apply和call調用函數層出不窮,很多妙用;
函數中的this是根據調用方式來決定的
函數調用方式有4中
1、直接調用 a(...arg); 函數a中的this總是綁定的window /嚴格模式下綁定的undefined
2、方法調用 a.b(...arg); 方法函數b會返回當前執行上下文的對象a;如果a.b.c(); 那麽此時返回的就是b
3、構造器調用 new a(...arg);構造器不會引用任何上下文的內容,只是單純的根據自己生成一個對象並且返回;
4、使用call/apply調用 a.call(this,...arg);
function add(){ this.a = "add-a"; console.log(this) } add(); //控制臺:window; //數據改變:此時會多一個全局變量a;window.a="add-a"; var obj = { a:1, b:{ a:2, c:add } } obj.b.c(); //控制臺:obj.b指向的對象 {a:"add-a",c:function add()...}//數據改變:直接調用類似,add會改變上下文的屬性值;obj.b.a==="add-a" new obj.b.c(); //控制臺:通過構造器調用,不會改變obj.b.a;所以此時obj.b.a依然等於"add-a" //數據改變:無 obj.b.c.call(); //控制臺:window; //數據改變:window.a的值會重新被賦值"add-a" //不傳入參數或者傳入undefined、null時,add中的this就會是全局對象 //否則傳入什麽對象、運行時的this就是傳入的對象 //註意:這裏其他的數據類型 String Number Boolean Object也會當做一個對象進行處理//例如: obj.b.c.call(1); //控制臺: Number {a: "add-a", [[PrimitiveValue]]: 1} obj.b.c.call(false); //控制臺:Boolean {a: "add-a", [[PrimitiveValue]]: false}
徹底搞清函數中的this指向