因為JavaScript 中this 是在運行期進行綁定的,因此JavaScript 中this 關鍵字具備多重含義。
具體在實際應用中,this的指向大致可以分為下面4種。
作為對象的方法調用 和 作為普通函數調用
window.a = 2; var obj = { a:1, getA:function(){ console.log(this.a); } } obj.getA(); //輸出1,作為對象的方法調用,this指向當前對象 var x = obj.getA; x(); //輸出2,作為普通函數調用,this全部指向window對象。
注意,不管x之前是obj.getA,還是其他某個對象的屬性,只要最後是以x(),fun()這種方式調用的,均視為普通函數調用,此時this指向window對象
但是,在ECMAScript5的strict模式下,作為函數調用的 this被規定不會指向全局對象
window.a = 2; var obj = { a:1, getA:function(){ "use strict" console.log(this.a); } } var x = obj.getA; x(); //underfined
通常情況下,構造函數裡的this指向返回的這個對象,但是如果構造器顯示地返回了一個object類型的對象,則this指向這個返回的object對象作為構造函數調用
var Myclass = function(){ this.name = 'beidan'; } var obj = new Myclass(); console.log(obj.name);//beidan var Myclass = function(){ this.name = 'beidan'; return{ //顯示的返回一個對象,注意!既要是顯示,即有return,也要是對象{} name:'test' } } var obj = new Myclass(); console.log(obj.name);//test
作為function.prototype.call或function.prototype.apply調用
call,apply都是為了改變函數體內部 this 的指向。例如,fun1.call()或者fun1.apply() 都是為了改變fun1函數內部的this指向。
二者的作用完全一樣,只是接受參數的方式不太一樣。
func1.call(this, arg1, arg2); //參數列表arg1,arg2 func1.apply(this, [arg1, arg2]); //參數數組 [arg1,arg2] 第一個參數指定那個了函數體內this對象的指向,他可以任何一個 JavaScript 對象(JavaScript 中一切皆對象),如果為null,則函數體內的this會指向默認的宿主對象,在浏覽器中則是window。 第二個參數,call 需要把參數按順序傳遞進去,而 apply 則是把參數放在數組裡。 當你的參數不確定數量時用 apply ,然後把參數 push 進數組傳遞進去。或者也可以通過 arguments來獲取所有的參數。這樣看來,apply的使用率更高。1.修正this的指向 比如,在實際開發中,會出現以下這種問題
document.getElementById('div1').onclick = function(){ console.log(this.id); //div1 var func = function(){ console.log(this.id); } func(); //通過普通函數調用,this指向window,輸出undefined }這時我們可以用call來修正func 函數內this的指向。
document.getElementById('div1').onclick = function(){ console.log(this.id); //div1 var func = function(){ console.log(this.id); } func.call(this); //使用call,使func函數內部的this指向當前的函數對象,輸出div1 }
2.模擬繼承(借用其他對象的方法)
function fruits() {} fruits.prototype = { color: "red", say: function() { console.log("My color is "+ this.color); } } var apple = new fruits; apple.say(); //My color is red但是,如果我們還有其它 2個對象 banana= {color : "yellow"} ,orange = {color:‘orange’},想使用say方法,但是又不想對它們重新定義say方法。 那麼,我們可以用apply或者call 借用 fruit裡面的say方法
banana = { color: "yellow" }; orange = {color:‘orange’}; apple.say.call(banana); //My color is yellow apple.say.apply(orange ); //My color is orange也就是說,當一個 object 沒有某個方法(本例子中banana沒有say方法),但是其他的有(本例子中apple有say方法),我們可以借助call或apply用其它對象的方法來操作。 再看幾個例子鞏固記憶
var numbers = [5, 458 , 120 , -215 ]; var maxInNumbers = Math.max.apply(Math, numbers), //458 maxNumbers = Math.max.call(Math,5, 458 , 120 , -215, 666); //666number 本身沒有 max 方法,但是 Math 有,我們就可以借助 call 或者 apply 使用其方法。
以上就是this在JavaScript中不同情況下的指向。
周末來了,博主又要出去浪了o(∩_∩)o