JavaScript 函數(shù)call火焰,apply、 bind的區(qū)別

call窍奋,apply荐健、bind的區(qū)別:

bind綁定this的指向之后酱畅,不會(huì)立即調(diào)用當(dāng)前函數(shù),而是將函數(shù)返回江场。
而call纺酸,apply綁定this指向后會(huì)立即調(diào)用。
如果我們?cè)诓恢朗裁磿r(shí)候會(huì)調(diào)用函數(shù)的時(shí)候址否,需要改變this的指向餐蔬,那么只能使用bind。
比如:在定時(shí)器中佑附,我們想改變this的指向樊诺,但是又不能立即執(zhí)行,需要等待2秒音同,這個(gè)時(shí)候只能使用bind來(lái)綁定this词爬。

setInterval(function(){
    // ...
}.bind(this), 2000);

一、Apply

方法重用
通過(guò) apply() 方法权均,您能夠編寫(xiě)用于不同對(duì)象的方法顿膨。

JavaScript apply() 方法
apply() 方法與 call() 方法非常相似:
在本例中,person 的 fullName 方法被應(yīng)用到 person1:
實(shí)例

var person = {
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}
var person1 = {
    firstName: "Bill",
    lastName: "Gates",
}
person.fullName.apply(person1);  // 將返回 "Bill Gates"

二叽赊、call
call函數(shù)
在Function.prototype上掛載一個(gè)newCall函數(shù)表示是對(duì)call的模擬恋沃,具體邏輯看注釋
Function.prototype.newCall = function(context){
// 1 判斷context是否為object,如果是object就代表可能是Object 或者 null必指,如果不是就賦值一個(gè)空對(duì)象

  if (typeof context === 'object') {
    context = context || window //  context 如果是null就會(huì)賦值為window
  } else {
    context = Object.create(null)
  }

// 2 在context下掛載一個(gè)函數(shù)囊咏,函數(shù)所在的key隨機(jī)生成,防止context上已有同名key
var fn = +new Date() + '' + Math.random() // 用時(shí)間戳+隨機(jī)數(shù)拼接成一個(gè)隨機(jī)字符串作為一個(gè)新的key
context[fn] = this
// 3 newCall如果還有其他的參數(shù)傳入也要考慮用到

  var args = []
  for(var i = 1; i < arguments.length; i++) {
    args.push('arguments['+ i + ']')
  }

// 4 重點(diǎn)在這里塔橡,執(zhí)行context[fn]這個(gè)函數(shù)梅割,只能用eval,因?yàn)閚ewCall的入?yún)?shù)不確定
var result = eval('contextfn') // args是一個(gè)數(shù)組谱邪,但是當(dāng)它和字符串相加時(shí)自動(dòng)調(diào)用內(nèi)部的toString方法轉(zhuǎn)成字符串

  delete context[fn] // 用完后從context上刪除這個(gè)函數(shù)
  // 5 返回結(jié)果
  return result
}

原理:
在要掛載的對(duì)象context上臨時(shí)添加一個(gè)方法 f
用eval執(zhí)行這個(gè)臨時(shí)添加的方法f炮捧,并拿到執(zhí)行后的結(jié)果result
刪除這個(gè)額外的方法f庶诡,并返回執(zhí)行結(jié)果result

帶參數(shù)的 apply() 方法
apply() 方法接受數(shù)組中的參數(shù):
實(shí)例

var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"John",
  lastName: "Doe"
}

person.fullName.apply(person1, ["Oslo", "Norway"]);
與 call() 方法對(duì)比:
實(shí)例
var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"John",
  lastName: "Doe"
}

person.fullName.call(person1, "Oslo", "Norway");

在數(shù)組上模擬 max 方法
您可以使用 Math.max() 方法找到(數(shù)字列表中的)最大數(shù)字:
實(shí)例

Math.max(1,2,3);  // 會(huì)返回 3

由于 JavaScript 數(shù)組沒(méi)有 max() 方法惦银,因此您可以應(yīng)用 Math.max() 方法。
實(shí)例

Math.max.apply(null, [1,2,3]); // 也會(huì)返回 3

三末誓、bind方法
bind 是復(fù)制的意思扯俱,也可以改變調(diào)用其的函數(shù)或方法的 this 指向,參數(shù)可以在復(fù)制的時(shí)候傳進(jìn)去喇澡,也可以在復(fù)制之后調(diào)用的時(shí)候傳進(jìn)去迅栅。
使用語(yǔ)法:

1、函數(shù)名.bind(對(duì)象, 參數(shù)1, 參數(shù)2, ...); // 返回值是復(fù)制的這個(gè)函數(shù)
2晴玖、方法名.bind(對(duì)象, 參數(shù)1, 參數(shù)2, ...); // 返回值是復(fù)制的這個(gè)方法

1读存、函數(shù)調(diào)用 bind

function f1(x, y) {
    console.log(x + y + this);
}

// 1.參數(shù)在復(fù)制的時(shí)候傳入

var ff = f1.bind(null,10,20); // 這只是復(fù)制的一份函數(shù)为流,不是調(diào)用,返回值才是
ff();

// 2.參數(shù)在調(diào)用的時(shí)候傳入

var ff = f1.bind(null); // 這只是復(fù)制的一份函數(shù)让簿,不是調(diào)用敬察,返回值才是
ff(10,20);

2、方法調(diào)用 bind

function Person(age) {
    this.age = age;
}

Person.prototype.eat = function () {
    console.log(this.age); // this 指向?qū)嵗龑?duì)象
};

function Student(age) {
    this.age = age;
}

var per = new Person(18);
var stu = new Student(20);

var ff = per.eat.bind(stu);
ff(); // 20
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末尔当,一起剝皮案震驚了整個(gè)濱河市莲祸,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌椭迎,老刑警劉巖锐帜,帶你破解...
    沈念sama閱讀 217,185評(píng)論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異畜号,居然都是意外死亡缴阎,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,652評(píng)論 3 393
  • 文/潘曉璐 我一進(jìn)店門(mén)简软,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)药蜻,“玉大人,你說(shuō)我怎么就攤上這事替饿∮镌螅” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 163,524評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵视卢,是天一觀的道長(zhǎng)踱卵。 經(jīng)常有香客問(wèn)我,道長(zhǎng)据过,這世上最難降的妖魔是什么惋砂? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,339評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮绳锅,結(jié)果婚禮上西饵,老公的妹妹穿的比我還像新娘。我一直安慰自己鳞芙,他們只是感情好眷柔,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,387評(píng)論 6 391
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著原朝,像睡著了一般驯嘱。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上喳坠,一...
    開(kāi)封第一講書(shū)人閱讀 51,287評(píng)論 1 301
  • 那天鞠评,我揣著相機(jī)與錄音,去河邊找鬼壕鹉。 笑死剃幌,一個(gè)胖子當(dāng)著我的面吹牛聋涨,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播负乡,決...
    沈念sama閱讀 40,130評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼牛郑,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了敬鬓?” 一聲冷哼從身側(cè)響起淹朋,我...
    開(kāi)封第一講書(shū)人閱讀 38,985評(píng)論 0 275
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎钉答,沒(méi)想到半個(gè)月后础芍,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,420評(píng)論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡数尿,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,617評(píng)論 3 334
  • 正文 我和宋清朗相戀三年仑性,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片右蹦。...
    茶點(diǎn)故事閱讀 39,779評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡诊杆,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出何陆,到底是詐尸還是另有隱情晨汹,我是刑警寧澤,帶...
    沈念sama閱讀 35,477評(píng)論 5 345
  • 正文 年R本政府宣布贷盲,位于F島的核電站淘这,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏巩剖。R本人自食惡果不足惜铝穷,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,088評(píng)論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望佳魔。 院中可真熱鬧曙聂,春花似錦、人聲如沸鞠鲜。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,716評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)镊尺。三九已至朦佩,卻和暖如春并思,著一層夾襖步出監(jiān)牢的瞬間庐氮,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,857評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工宋彼, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留弄砍,地道東北人仙畦。 一個(gè)月前我還...
    沈念sama閱讀 47,876評(píng)論 2 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像音婶,于是被迫代替她去往敵國(guó)和親慨畸。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,700評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容