JS中call、apply、bind使用指南,帶部分原理。

來源:互聯網
上載者:User

標籤:alert   直接   調用   onclick   obj   關心   slice   []   執行   

為什麼需要這些?主要是因為this,來看看this乾的好事。

 

box.onclick = function(){
  function fn(){
    alert(this);
  }
  fn();
};

我們原本以為這裡面的this指向的是box,然而卻是Window。一般我們這樣解決:

box.onclick = function(){
  var _this = this;
  function fn(){
    alert(_this);
  }
  fn();
};


將this儲存下來。

 

還有一些情況,有時我們想讓偽數組也能夠調用數組的一些方法,這時call、apply、bind就派上用場了。

 

我們先來解決第一個問題修複this指向。


box.onclick = function(){
  function fn(){
    alert(this);
  }
  fn();
};

改成如下:

 

box.onclick = function(){
  function fn(){
    console.log(this);
  }
  fn.call(this);
};

很神奇吧,call的作用就是改變this的指向的,第一個傳的是一個對象,就是你要借用的那個對象。

 

fn.call(this);

 

  這裡的意思是讓this去調用fn這個函數,這裡的this是box,這個沒有意見吧?如果這個你不清楚,很可能你是javscript的新朋友。box調用fn,這句話非常重要,我們知道this它始終指向一個對象,剛好box就是一個對象。那麼fn裡面的this就是box。

 

box.onclick = function(){
  function fn(){
    console.log(this);
  }
  fn.call(this);
};

 

這句話在某些情況下是可以簡寫的,比如:


box.onclick = function(){
  var fn = function(){
    console.log(this); //box
  }.call(this);
};

 

或者這樣:

 

box.onclick = function(){
  (function(){
    console.log(this);
  }.call(this)); //box
};

 

又或者這樣:


var objName = {name:‘JS2016‘};
var obj = {
  name:‘0 _ 0‘,
  sayHello:function(){
    console.log(this.name);
  }.bind(objName)
};
obj.sayHello();//JS2016

 

call和apply、bind但是用來改變this的指向的,但也有一些小小的差別。下面我們來看看它們的差別在哪。

 

function fn(a,b,c,d){
  console.log(a,b,c,d);
}

//call
fn.call(null,1,2,3);

//apply
fn.apply(null,[1,2,3]);

//bind
var f = fn.bind(null,1,2,3);
f(4);

 

結果如下:


1 2 3 undefined
1 2 3 undefined
1 2 3 4

  前面說過第一個參數傳的是一個你要借用的對象,但這麼我們不需要,所有就傳了一個null,當然你也可以傳其他的,反正在這裡沒有用到,除了第一個參數後面的參數將作為實際參數傳入到函數中。

  call就是挨個傳值,apply傳一個數組,bind也是挨個傳值,但和call和apply還有多少不同,使用call和apply會直接執行這個函數,而bind並不會而是將綁定好的this重新返回一個新函數,什麼時候調用由你自己決定。


var objName = {name:‘JS2016‘};
var obj = {
  name:‘0 _ 0‘,
  sayHello:function(){
    console.log(this.name);
  }.bind(objName)
};
obj.sayHello();//JS2016


這裡也就是為什麼我要用bind的原因,如果用call的話就會報錯了。自己想想這個sayHello在obj都已經執行完了,就根本沒有sayHello這個函數了。

 

這幾個方法使用的好的話可以幫你解決不少問題比如:

 

正常情況下Math.max只能這樣用

Math.max(10,6)

但如果你想傳一個數組的話你可以用apply

var arr = [1,2,30,4,5];
console.log(Math.max.apply(null,arr));

又或者你想讓偽數組調用數組的方法

function fn(){
  [].push.call(arguments,3);
  console.log(arguments); //[1, 2, 3]
}
fn(1,2);

再者:

var arr = [‘aaabc‘];
console.log(‘‘.indexOf.call(arr,‘b‘)); //3

牛逼不,簡直偷梁換柱,當然還有很多可以利用的,自己盡情花輝去吧。

 

簡單說一下這種偷梁換柱的原理吧,實際上瀏覽器內部根本就不在乎你是誰,它只關心你傳給我的是不是我能夠啟動並執行,如下:

 

正常情況


var str = ‘aaabc‘;
console.log(str.indexOf(‘b‘));

 

而這種情況其實做的事情和上面一模一樣,看我來拆解。

 

var arr = [‘aaabc‘];
‘‘.indexOf.call(arr);

 

這句話就是說讓arr調用字串的indexOf方法,前面說過了瀏覽器內部不在乎你是誰,所以誰都可以來調用,但不是100%成功,具體看如下。

 

‘‘.indexOf.call(arr,‘b‘)

這裡的arr就是[‘aaabc‘],內部很可能拆成了‘aaabc‘,因此就成了下面的這段代碼。

 

‘aaabc‘.indexOf(‘b‘);

這就是它們的秘密。

 

這裡得說一下bind在某些瀏覽器下不相容。我們來類比一個玩玩。


Function.prototype.$bind = function(obj){
    //儲存當前this
  var _this = this;
    //截取除了第一個以外的所有實際參數
  var a = [].slice.call(arguments,1);
    //返回一個新函數
  return function(){
    //讓當前那個調用的函數的this指向obj,並且把實參傳給它,這裡用了concat是因為,我們可能在綁定以後還傳遞參數,所以才把他們合并起來。如f(4)這個是在綁定以後傳的參數,a這個argument是綁定時的。
    _this.apply(obj,a.concat([].slice.call(arguments)));
  };
};

function fn(a,b,c,d){
  console.log(a,b,c,d);
}

var f = fn.$bind(null,1,2,3);
f(4);

 

這個方法和實際上的bind還是差別很大的,如


var arr = [‘JSS‘];

var index = ‘‘.indexOf.$bind(arr,‘S‘);
console.log(index())

------------------

function fff(){
  [].push.$bind(arguments,1);
  console.log(arguments);
}

fff();

這些都沒法使用,因為技術有限就沒辦法帶大家封裝一個完美的bind了,如果有需要網上搜尋一下吧。

JS中call、apply、bind使用指南,帶部分原理。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.