js中的this。外加 call apply

先來(lái)一句話總結(jié)下,誰(shuí)調(diào)用這個(gè)this就是誰(shuí)。下面是幾個(gè)例子。
call 函數(shù)

function say(content) { console.log("From " + this + ": Hello "+ content); } 
say.call("Bob", "World"); //==> From Bob: Hello World

這里的this指的就是Bob。
Step1: 把第二個(gè)到最后一個(gè)參數(shù)作為函數(shù)執(zhí)行時(shí)要傳入的參數(shù)
Step2: 把函數(shù)執(zhí)行時(shí)的this指向第一個(gè)參數(shù)
Step3: 在上面這個(gè)特殊的上下文中執(zhí)行函數(shù)
說(shuō)白了,call 和 apply都是用來(lái)擴(kuò)充函數(shù)的作用域。

function sum(num1, num2) {
     return num1 + num2;
}
console.log(sum.call(window, 10, 10)); //20
console.log(sum.apply(window,[10,20])); //30

如果不這么搞,那么看下面:

window.firstName = "diz";
window.lastName = "song";
var myObject = { firstName: "my", lastName: "Object" };
function HelloName() {
          console.log("Hello " + this.firstName + " " + this.lastName, " glad to meet you!");
}
HelloName(); //Hello diz song glad to meet you!
myObject.HelloName = HelloName;
myObject.HelloName(); //Hello my Object glad to meet you!
function hello(thing) { 
console.log(this + " says hello " + thing); 
} 
person = { name: "caibirdme" } 
person.hello = hello; 
person.hello("world") // 相當(dāng)于執(zhí)行 person.hello.call(person, "world") //caibirdme says hello world hello("world") // 相當(dāng)于執(zhí)行 hello.call(window, "world") //[object DOMWindow]world
var obj = {
x: 20,
f: function(){ 
console.log(this.x);
} }; 
obj.f(); // obj.f.call(obj) //==> 20 
obj.innerobj = {
x: 30, 
f: function(){ 
console.log(this.x); 
} } 
obj.innerobj.f(); // obj.innerobj.f.call(obj.innerobj) // ==> 30
var x = 10; 
var obj = { 
x: 20, f: function(){ 
console.log(this.x); //this equals obj // ==> 20 
var foo = function(){ 
console.log(this.x); 
} 
foo(); // foo.call(window) //foo中this被指定為window,所以==> 10 } }; obj.f(); // obj.f.call(obj) // ==> 20 10
var x = 10; 
var obj = { 
x: 20, 
f: function(){ 
console.log(this.x); 
var that = this; //使用that保留當(dāng)前函數(shù)執(zhí)行上下文的this 
var foo = function(){ console.log(that.x); } //此時(shí)foo函數(shù)中的this仍然指向window,但我們使用that取得obj foo(); // foo.call(window) } }; 
obj.f(); 
obj.f.call(obj) // ==> 20 20
var x = 10; 
var obj = { 
x: 20,
f: function(){ 
console.log(this.x); 
} }; 
obj.f(); // obj.f.call(obj) // ==> 20 
var fOut = obj.f;
fOut(); // fOut.call(window) //==> 10 
var obj2 = { x: 30, f: obj.f } obj2.f(); // obj2.f.call(obj2) //==> 30

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容