這篇文章跟大家分享了JS基礎內容this指向以及call、apply的相關知識點內容,有興趣的朋友可以學習參考下。
在具體的實際應用中,this 的指向無法在函數定義時確定,而是在函數執行的時候才確定的,根據執行時的環境大致可以分為以下3種:
1、當函數作為普通函數呼叫時,this 指向全域物件
2、當函數作為物件的方法呼叫時,this 指向該物件
3、當函數作為構造當器呼叫時,this 指向新建立的物件
範例一:
window.name = 'myname'; function getName() { console.log(this.name); } getName(); //输出myname
範例二:
var boy = { name: 'Bob', getName: function() { console.log(this.name); } } boy.getName(); //输出Bob
#範例三:
function Boy(name) { this.name = name; } var boy1 = new Boy('Bob'); console.log(boy1.name); //输出Bob
對於範例三,還有一種特殊情況,就是當建構子透過"return" 傳回的是一個物件的時候,這次運算的最終結果返回的就是這個對象,而不是新創建的對象,因此this 在這種情況下並沒有什麼用。
範例四:
function Boy(name) { this.name = name; return { //返回一个对象 name: 'Jack' } } var boy1 = new Boy('Bob'); console.log(boy1.name); //输出Jack
範例五:
function Boy(name) { this.name = name; return 1; //返回非对象 } var boy1 = new Boy('Bob'); console.log(boy1.name); //输出Bob
call 和apply 的作用
apply 接受兩個參數,第一個參數指定了函數體內this 的指向,第二個參數是一個數組或類別數組,用於傳遞被呼叫函數的參數列表。
範例一:
function getInfo() { console.log(this.name+' like '+arguments[0]+' and '+arguments[1]); } var boy1 = { name: 'Bob', age: 12 } getInfo.apply(boy1,['sing','swimming']); //输出Bob like sing and swimming
call 傳入參數的數量是不固定的,跟apply 相同的是,第一個參數也是用來指定函數體內this的指向,從第二個參數開始往後,每個參數依序傳入被呼叫函數。
範例二:
function getInfo() { console.log(this.name+' like '+arguments[0]+' and '+arguments[1]); } var boy1 = { name: 'Bob', age: 12 } getInfo.call(boy1,'sing','shopping'); //输出Bob like sing and shopping
此外,大部分進階瀏覽器也實作了bind 方法,它與call 和apply 的差別在於bind 只是改變函數內部this 的指向,但不會立即執行,你需要顯示呼叫它。
範例三:模擬瀏覽器的bind 方法
Function.prototype.bind = function(obj){ var self = this; return function(){ return self.apply(obj,arguments); } }; var obj = { name: 'Bob', age: 12 }; var func = function(){ console.log(this.name+' like '+arguments[0]+' and '+arguments[1]); }.bind(obj); func('sing','shopping');
遺失的this
##在某些情況下會失去this 的指向,此時,我們就需要藉助call、apply 和bind 來改變this 的指向問題。 範例一:當"getName" 方法作為"boy" 物件的屬性呼叫時,this 指向"boy" 對象,當另外一個變數引用 "getName " 方法時,因為它是作為普通函數調用,所以this 指向全域物件window
var boy = { name: 'Bob', getName: function() { console.log(this.name); } } boy.getName(); //输出Bob var getBoyName = boy.getName; getBoyName(); //输出undefined
var boy1 = { name: 'Bob', age: 12, getInfo: function() { console.log(this.name); function getAge() { console.log(this.age); } getAge(); } } boy1.getInfo(); //Bob //undefined
以上是JS中this的指向以及call、apply的作用_基礎知識的詳細內容。更多資訊請關注PHP中文網其他相關文章!