javascript中call,apply,bind函數用法示例
更新時間：2016年12月19日 08:43:41 作者：鬼畜十三
這篇文章主要介紹了javascript中call,apply,bind函數用法,結合實例形式分析了call,apply,bind函數的功能、使用方法與相關注意事項,需要的朋友可以參考下
本文實例講述了javascript中call,apply,bind函數用法。分享給大家供大家參考，具體如下：
一.call函數
a.call(b);
簡單的理解：把a對象的方法應用到b對象上(a里如果有this，會指向b)
call()的用法：用在函數上面
var Dog=function(){
this.name="汪星人";
this.shout=function(){
alert(this.name);
}
};
var Cat=function(){
this.name="喵星人";
this.shout=function(){
alert(this.name);
}
};
var dog=new Dog();
var cat=new Cat();
dog.shout();
cat.shout();
如果貓函數中沒有shout方法，要達到一樣的效果
var Dog=function(){
this.name="汪星人";
this.shout=function(){
alert(this.name);
}
};
var Cat=function(){
this.name="喵星人";
};
var dog=new Dog();
var cat=new Cat();
dog.shout();
dog.shout.call(cat);
cat.shout();
call的作用：函數可以復用
二、apply函數
var xh=
{
name:"小紅",
job:"前端工程師"
};
var xm=
{
name:"小明",
job:"js工程師"
};
var xw=
{
name:"小王",
job:"html5工程師"
};
function myjob(gender,age,company)
{
alert(this.name+","+gender+",今年"+age+"歲,在"+company+"擔任"+this.job);
}
myjob.call(xh,"女",24,"騰訊");
myjob.call(xm,"男",22,"新浪");
myjob.call(xw,"男",28,"網易");
call函數和apply函數功能一樣，區(qū)別是第二個參數形式不一樣，call傳遞多個參數，任意形式（傳入參數和函數所接受參數一一對應），apply第二個參數必須是數組形式，如a.call(b,2,3); ==> a.apply(b,[2,3]);
var xh=
{
name:"小紅",
job:"前端工程師"
};
var xm=
{
name:"小明",
job:"js工程師"
};
var xw=
{
name:"小王",
job:"html5工程師"
};
function myjob(gender,age,company)
{
alert(this.name+","+gender+",今年"+age+"歲,在"+company+"擔任"+this.job);
}
myjob.apply(xh,["女",24,"騰訊"]);
myjob.apply(xm,["男",22,"新浪"]);
myjob.apply(xw,["男",28,"網易"]);
三、bind函數
call,apply和bind都可以“綁架”this，逼迫其指向其他對象
使用上和call,apply的區(qū)別，如
xw.say.call(xh); //對函數直接調用 xw.say.apply(xh); //對函數直接調用 xw.say.bind(xh)(); //返回的仍然是一個函數，因此后面需要()來調用
傳參時可以像call那樣
xw.say.bind(xh,"中央大學","一年級")();
由于bind返回的仍然是一個函數，所以也可以在調用時再進行傳參
xw.say.bind(xh)("中央大學","一年級");
更多關于JavaScript相關內容可查看本站專題：《javascript面向對象入門教程》、《JavaScript中json操作技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
火狐下table中創(chuàng)建form導致兩個table之間出現空白
js加入form導致兩個table之間出現空白，還有另一種說法在table中創(chuàng)建form表單是不符合DOM標準的，會導致post失效，以及js數據傳輸失效2013-09-09
BootStrap柵格系統(tǒng)可以把我們的container容器劃分為若干等分，如果想要每個部分之間留出一定的空隙，那么應該怎么解決，本文就來介紹一下2021-08-08
瀏覽器目前來說是沒有抗鋸齒效果的(將來不一定哦)，這樣dom元素外觀的改變就被限制在1個像素為最佳效果。2009-09-09
本文是小編給大家日常收集整理的js中常見的10種錯誤，非常不錯，具有參考借鑒價值，需要的朋友參考下2017-01-01
看過黑客帝國的朋友或許都對開頭的字幕效果很熟悉，自從影片播放以來，網頁設計者有不少都在模仿這種文字下落的效果，而且還有文字漸變效果，對我們學習研究JS還是挺有幫助的哦，下面跟著小編一起學習JS 黑客帝國文字下落效果吧2015-09-09
雙向數據綁定指的就是，綁定對象屬性的改變到用戶界面的變化的能力,反之亦然,下面這篇文章主要給大家介紹了關于js項目中雙向數據綁定的簡單實現方法,需要的朋友可以參考下2021-08-08
javascript中的自執(zhí)行匿名函數可以用它創(chuàng)建命名空間，只要把自己所有的代碼都寫在這個特殊的函數包裝內，那么外部就不能訪問，除非你允許2014-09-09
TypeScript中import?type與import的區(qū)別詳析
ES6引入了模塊化,其設計思想是在編譯時就能確定模塊的依賴關系,以及輸入和輸出的變量,下面這篇文章主要給大家介紹了關于TypeScript中import?type與import區(qū)別的相關資料,需要的朋友可以參考下2022-07-07
要通過元素訪問樣式表，那么就應該先確定是哪個元素。直接訪問樣式表在該樣式塊里找相應的樣式規(guī)則，最后在該樣式規(guī)則里找相應的樣式2014-07-07
有時候我們在網頁制作過程中需要彈出窗口，一般情況下，我們更希望窗口可以居中顯示2007-08-08