apply 與 call 介紹
</>復制代碼
function f1(x, y) {
console.log("結果是:" + (x + y) + this);
}
f1(10, 20); //函數的調用
// 結果是:30[object Window]
// 此時的 f1 實際上是當作對象來使用的,對象可以調用方法
f1.apply(); // 結果是:NaN[object Window]
f1.call(); // 結果是:NaN[object Window]
f1.apply(null); // 結果是:NaN[object Window]
f1.call(null); // 結果是:NaN[object Window]
apply 和 call 方法中如果沒有傳入參數,或者傳入的是null,那么調用該方法的函數對象中的 this 就是默認的 window
apply 和 call 都可以讓函數或者方法來調用,傳入參數和函數自己調用的寫法不一樣,但是效果是一樣的。
</>復制代碼
f1.call(null,10,20); // 結果是:30[object Window]
f1.apply(null,[10,20]); // 結果是:30[object Window]
基本使用
</>復制代碼
function f2(x, y ){
console.log("結果:"+(x+y)+" "+ this.age );
}
window.f2(10, 20); //結果:30 undefined
// obj是一個對象
var obj = {
age: 10,
sex: "男"
};
window.f2.apply(obj,[10, 20]); //結果:30 10
window.f2.call(obj,10,20); //結果:30 10
console.dir(obj); // age: 10 sex: "男"
apply與call的作用:改變this的指向
</>復制代碼
apply 和 call可以改變 this 的指向
例子1:用于方法
</>復制代碼
function Person(age, sex){
this.age = age;
this.sex = sex;
}
//通過原型添加方法
Person.prototype.sayHi=function(){
console.log("您好呀:"+this.sex);
}
var per = new Person(10,"男");
per.sayHi(); // 您好呀:男
function Student(name, sex){
this.name = name;
this.sex = sex;
}
var stu=new Student("小明", "女");
per.sayHi.apply(stu); // 您好呀:女
per.sayHi.call(stu); // 您好呀:女
// stu 沒有 sayHi(),但是通過apply或call可以讓它調用per的sayHi().
例子2:用于函數
</>復制代碼
function f(x, y){
console.log("結果是:"+(x+y)+" "+this);
return "此時的this是"+this;
}
// apply和call調用
var r1=f.apply(null,[1,2]); // 此時f中的this是window
console.log(r1);
//結果是:3 [object Window]
// 此時的this是[object Window]
var r2=f.call(null,1,2); // 此時f中的this是window
console.log(r2);
//結果是:3 [object Window]
// 此時的this是[object Window]
// 改變this的指向
var obj={
sex: "男"
}
// 本來f函數是window對象的,但是傳入obj之后,f函數就是obj對象的
var r3=f.apply(obj,[1,2]); // 此時f中的this是obj
console.log(r3);
// 結果是:3 [object Object]
// 此時的this是[object Object]
var r4=f.call(obj,1,2); // 此時f中的this是obj
console.log(r4);
// 結果是:3 [object Object]
// 此時的this是[object Object]
apply和call的使用方法總結
apply的使用方法:
</>復制代碼
函數名字.apply(對象,[參數1,參數2,...]);
方法名字.apply(對象,[參數1,參數2,...]);
call的使用方法:
</>復制代碼
函數名字.call(對象,參數1,參數2,...);
方法名字.call(對象,參數1,參數2,...);
apply與call的不同:
參數傳遞的方式是不一樣的
使用場景</>復制代碼
只要是想使用別的對象的方法,并且希望這個方法是當前對象的,那么就可以使用apply或者是call的方法改變this的指向。
apply和call方法實際上并不在函數這個實例對象中,而是在Function的prototye中。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/103979.html
摘要:設計模式是以面向對象編程為基礎的,的面向對象編程和傳統的的面向對象編程有些差別,這讓我一開始接觸的時候感到十分痛苦,但是這只能靠自己慢慢積累慢慢思考。想繼續了解設計模式必須要先搞懂面向對象編程,否則只會讓你自己更痛苦。 JavaScript 中的構造函數 學習總結。知識只有分享才有存在的意義。 是時候替換你的 for 循環大法了~ 《小分享》JavaScript中數組的那些迭代方法~ ...
摘要:本文總結了的各種情況,并從規范的角度探討了的具體實現,希望對大家理解有所幫助。規范規范里面詳細介紹了的實現細節,通過閱讀規范,我們可以更準確的理解上述四種情況到底是怎么回事。由于本人能力有限,如有理解錯誤的地方還望指出。 this是面向對象編程中的一個概念,它一般指向當前方法調用所在的對象,這一點在java、c++這類比較嚴格的面向對象編程語言里是非常明確的。但是在javascript...
摘要:的作用在中,方法和方法都是為了改變函數運行時上下文而存在的,換句話說就是為了改變函數體內部的指向。歡迎前端大牛糾正錯誤,如有錯誤我會及時改正。 寫在前面: 隔了很長時間了,也不知道寫點什么。最近一直在研究ES6,一直想寫出來的文章能對初學者或者是在學習JS路上有所幫助的。這就是我的初衷。 call、apply的作用 在JavaScript中,call()方法和apply()方法都是為了...
摘要:在全局對象中調用,自然讀取的是全局對象的值構造器調用說明作為構造器調用時,指向返回的這個對象。最直觀的表現就是,去看一些優秀框架的源代碼時,不再是被繞的暈乎乎的。 學習起因: 在之前的JavaScript學習中,this,call,apply總是讓我感到迷惑,但是他們的運用又非常的廣泛。遂專門花了一天,來弄懂JavaScript的this,call,apply。中途參考的書籍也很多,以...
摘要:理解的函數基礎要搞好深入淺出原型使用原型模型,雖然這經常被當作缺點提及,但是只要善于運用,其實基于原型的繼承模型比傳統的類繼承還要強大。中文指南基本操作指南二繼續熟悉的幾對方法,包括,,。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。 怎樣使用 this 因為本人屬于偽前端,因此文中只看懂了 8 成左右,希望能夠給大家帶來幫助....(據說是阿里的前端妹子寫的) this 的值到底...
閱讀 2666·2023-04-25 15:22
閱讀 2837·2021-10-11 10:58
閱讀 1059·2021-08-30 09:48
閱讀 1864·2019-08-30 15:56
閱讀 1740·2019-08-30 15:53
閱讀 1106·2019-08-29 11:16
閱讀 1058·2019-08-23 18:34
閱讀 1649·2019-08-23 18:12
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要