apply、call、bind

Tikitoo 發布于2019-08-19 17:13 / 2020人閱讀

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

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

先來談談我們所熟知的call和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

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

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

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

接下來說一下bind

ECMAScript 5引入了Function.prototype.bind。調用f.bind(someObject)會產生一個新的函數對象。在這個新的函數對象中，this被永久綁定到了bind的第一個參數上面，無論后期這個新的函數被如何使用。

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"指向全局對象
 
// 創建一個"this"綁定到module的函數
var boundGetX = getX.bind(module);
boundGetX(); // 81

另外，如果第一個參數為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云服務器云服務器 JS中bind、call和apply的作 apply與call的區別 js中的call和apply apply()

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78309.html

前端基礎:call,apply,bind的的理解

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

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

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

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

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

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

摘要：和概覽我們要將歸為一類，單獨歸為一類三者的共同點是都可以指定和都是綁定在的原型上的，所以的實例都可以調用這三個方法至于為什么，看完這篇文章你就懂了如果你不懂什么是實例的話，請移步深入淺出面向對象和原型概念篇深入淺出面向對象和原型概念篇第一個 1.call/apply和bind概覽我們要將call/apply歸為一類，bind單獨歸為一類三者的共同點是都可以指定this call/...

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

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

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

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

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