apply、call、bind

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

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

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

先來談?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

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

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

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

接下來說一下bind

ECMAScript 5引入了Function.prototype.bind。調(diào)用f.bind(someObject)會產(chǎn)生一個新的函數(shù)對象。在這個新的函數(shù)對象中，this被永久綁定到了bind的第一個參數(shù)上面，無論后期這個新的函數(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, 因為在這個例子中，"this"指向全局對象
 
// 創(chuàng)建一個"this"綁定到module的函數(shù)
var boundGetX = getX.bind(module);
boundGetX(); // 81

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

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

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

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

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

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

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

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

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

LiveVideoStack 2019-08-21 11:20 評論0 收藏0