apply、call、bind

Tikitoo 發(fā)布于2019-08-19 17:13 / 2023人閱讀

摘要：對(duì)象中的指向決定于函數(shù)被調(diào)用的方式。這是我們就需要用到這三個(gè)小家伙了來(lái)改變的指向。在這個(gè)新的函數(shù)對(duì)象中，被永久綁定到了的第一個(gè)參數(shù)上面，無(wú)論后期這個(gè)新的函數(shù)被如何使用。這一點(diǎn)對(duì)三者都適用。

在Javascript中，F(xiàn)unction是一種對(duì)象。Function對(duì)象中的this指向決定于函數(shù)被調(diào)用的方式。
這是我們就需要用到這三個(gè)小家伙了：call、apply、bind來(lái)改變this的指向。

先來(lái)談?wù)勎覀兯熘腸all和apply

function add(c, d){
    return this.a + this.b + c + d;
}
var o = {a:1, b:2};
add.call(o, 3, 4); // 10
add.apply(o, [5, 6]); // 14

需要注意的是，如果傳入的第一個(gè)參數(shù)不是對(duì)象類(lèi)型的，那么這個(gè)參數(shù)會(huì)被自動(dòng)轉(zhuǎn)化為對(duì)象類(lèi)型，例如:

function age() {     
    console.log(
        Object.prototype.toString.call(this)
    );
}

bar.call(7); // [object Number]

接下來(lái)說(shuō)一下bind

ECMAScript 5引入了Function.prototype.bind。調(diào)用f.bind(someObject)會(huì)產(chǎn)生一個(gè)新的函數(shù)對(duì)象。在這個(gè)新的函數(shù)對(duì)象中，this被永久綁定到了bind的第一個(gè)參數(shù)上面，無(wú)論后期這個(gè)新的函數(shù)被如何使用。

function f(){
    return this.a;
}

var g = f.bind({a:"jack"});
console.log(g()); // jack

var o = {a:37, f:f, g:g};
console.log(o.f(), o.g()); // 37, jack


function Person(name){
 this.nickname = name;
 this.distractedGreeting = function() {
 
   setTimeout(function(){
     console.log("Hello, my name is " + this.nickname);
   }, 500);
 }
}
 
var alice = new Person("Alice");
alice.distractedGreeting();
//Hello, my name is undefined


function Person(name){
  this.nickname = name;
  this.distractedGreeting = function() {
    setTimeout(function(){
      console.log("Hello, my name is " + this.nickname);
    }.bind(this), 500); // <-- this line!
  }
}
 
var alice = new Person("Alice");
alice.distractedGreeting();
// after 500ms logs "Hello, my name is Alice"


this.x = 9; 
var module = {
  x: 81,
  getX: function() { return this.x; }
};
 
module.getX(); // 81
 
var getX = module.getX;
getX(); // 9, 因?yàn)樵谶@個(gè)例子中，"this"指向全局對(duì)象
 
// 創(chuàng)建一個(gè)"this"綁定到module的函數(shù)
var boundGetX = getX.bind(module);
boundGetX(); // 81

另外，如果第一個(gè)參數(shù)為null或者undefined的話(huà)，那么，實(shí)際上綁定到的是全局對(duì)象，即global。這一點(diǎn)對(duì)三者都適用。

function age() {     
    console.log(
        Object.prototype.toString.call(this)
    );
}

bar.bind()(); // [object global]
bar.apply();  // [object global]
bar.call();   // [object global]

云服務(wù)器 GPU云服務(wù)器 JS中bind、call和apply的作 apply與call的區(qū)別 js中的call和apply apply()

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/78309.html

相關(guān)文章

前端基礎(chǔ):call,apply,bind的的理解

摘要：和區(qū)別其實(shí)他們的作用是一樣的，只是傳遞的參數(shù)不一樣而已。接受個(gè)參數(shù)，第一個(gè)參數(shù)指定了函數(shù)體內(nèi)對(duì)象的指向，第二個(gè)參數(shù)為數(shù)組或者一個(gè)類(lèi)數(shù)組。看個(gè)栗子一個(gè)有意思的事在中，多次是無(wú)效的。而則會(huì)立即執(zhí)行函數(shù)。背景前兩天在做小程序的需求的時(shí)候用到bind的時(shí)候才想起自己對(duì)這三的東西的了解比較淺薄，這個(gè)時(shí)候用的時(shí)候就有點(diǎn)怕。時(shí)候還是要好好學(xué)習(xí)下，理解下怎么玩。正文先說(shuō)call 和 apply...

netmou 2019-08-20 17:01 評(píng)論0 收藏0
JS中的call、apply、bind方法詳解

摘要：不能應(yīng)用下的等方法。首先我們可以通過(guò)給目標(biāo)函數(shù)指定作用域來(lái)簡(jiǎn)單實(shí)現(xiàn)方法保存，即調(diào)用方法的目標(biāo)函數(shù)考慮到函數(shù)柯里化的情況，我們可以構(gòu)建一個(gè)更加健壯的這次的方法可以綁定對(duì)象，也支持在綁定的時(shí)候傳參。原因是，在中，多次是無(wú)效的。 bind 是返回對(duì)應(yīng)函數(shù)，便于稍后調(diào)用；apply 、call 則是立即調(diào)用。 apply、call 在 javascript 中，call 和 apply 都是...

zombieda 2019-08-23 15:27 評(píng)論0 收藏0
JS基礎(chǔ)篇--call、apply、bind方法詳解

摘要：首先我們可以通過(guò)給目標(biāo)函數(shù)指定作用域來(lái)簡(jiǎn)單實(shí)現(xiàn)方法保存，即調(diào)用方法的目標(biāo)函數(shù)考慮到函數(shù)柯里化的情況，我們可以構(gòu)建一個(gè)更加健壯的這次的方法可以綁定對(duì)象，也支持在綁定的時(shí)候傳參。原因是，在中，多次是無(wú)效的。而則會(huì)立即執(zhí)行函數(shù)。 bind 是返回對(duì)應(yīng)函數(shù)，便于稍后調(diào)用；apply 、call 則是立即調(diào)用。 apply、call 在 javascript 中，call 和 apply 都是...

lastSeries 2019-08-21 12:10 評(píng)論0 收藏0
this總結(jié)【2】—— call/apply和bind

摘要：和概覽我們要將歸為一類(lèi)，單獨(dú)歸為一類(lèi)三者的共同點(diǎn)是都可以指定和都是綁定在的原型上的，所以的實(shí)例都可以調(diào)用這三個(gè)方法至于為什么，看完這篇文章你就懂了如果你不懂什么是實(shí)例的話(huà)，請(qǐng)移步深入淺出面向?qū)ο蠛驮透拍钇钊霚\出面向?qū)ο蠛驮透拍钇谝粋€(gè) 1.call/apply和bind概覽我們要將call/apply歸為一類(lèi)，bind單獨(dú)歸為一類(lèi) 三者的共同點(diǎn)是都可以指定this call/...

wudengzan 2019-08-26 11:48 評(píng)論0 收藏0
理解JavaScript中的call,apply和bind方法

摘要：輸出的作用與和一樣，都是可以改變函數(shù)運(yùn)行時(shí)上下文，區(qū)別是和在調(diào)用函數(shù)之后會(huì)立即執(zhí)行，而方法調(diào)用并改變函數(shù)運(yùn)行時(shí)上下文后，返回一個(gè)新的函數(shù)，供我們需要時(shí)再調(diào)用。前言 js中的call(), apply()和bind()是Function.prototype下的方法，都是用于改變函數(shù)運(yùn)行時(shí)上下文，最終的返回值是你調(diào)用的方法的返回值，若該方法沒(méi)有返回值，則返回undefined。這幾個(gè)方法...

chaosx110 2019-08-26 12:23 評(píng)論0 收藏0
javascript關(guān)于this 以及this的顯示設(shè)置(apply、call、bind)

摘要：如果連續(xù)呢結(jié)果會(huì)是什么結(jié)果還是第一個(gè)原因是，在中，多次是無(wú)效的。更深層次的原因，的實(shí)現(xiàn)，相當(dāng)于使用函數(shù)在內(nèi)部包了一個(gè)，第二次相當(dāng)于再包住第一次故第二次以后的是無(wú)法生效的。 this 1.其實(shí)js中的this沒(méi)那么難理解，當(dāng)找不到this時(shí)記住一句話(huà)：誰(shuí)調(diào)我，我就指誰(shuí)！new 誰(shuí)指誰(shuí) function text1(){ console.log(this); //指wind...

LiveVideoStack 2019-08-21 11:20 評(píng)論0 收藏0