call、apply、bind函數在改變函數運行時this的指向問題的區别

更新時間:2019-07-18 13:45:04點擊次數:229次
首先,call、apply、bind都可以改變函數運行時this的指向問題
<script>
 
var value = "王1";
 
var obj = {
 
value: "開2",
 
friend: {
 
value: "貴3",
 
sayHi: function () {
 
console.log(this.value);
 
}
 
}
 
};
 
obj.friend.sayHi();//打印貴3
 
obj.sayHi = obj.friend.sayHi;
 
//誰調用this就屬于誰
 
obj.sayHi();//打印開2
 
//window
 
var sayHi = obj.friend.sayHi;
 
sayHi();//打印王1
 
console.dir(sayHi);//dir查看結構
 
//call()參數1是你要修改的this
 
var obj2 = { value: "星星" };
 
sayHi.call(obj2);
 
sayHi.apply(obj2);
 
function sayHello(a, b) {
 
console.log(this, "jom", a, b)
 
}
 
sayHello(10, 20);
 
//call:從參數2開始,就是對應原函數的參數
 
sayHello.call(obj2, 96, 72);
 
//apply:參數2是個數組,數組位置對應原函數參數
 
sayHello.apply(obj2, [66, 888]);
 
 
 
//數組元素對應的形參,借助apply
 
var numbers = [9, 1, 20, 30, 100]
 
var min = Math.min.apply(Math, numbers);
 
console.log(min);
 
//es6的解構賦值
 
var min = Math.min(...numbers);
 
console.log(min);
 
//bind函數
 
//bind 方法不會立即執行,而是返回一個改變了上下文 this 後的函數
 
var fn = sayHello.bind(obj, 111, 222);
 
fn();
 
setTimeout(function () {
 
console.log(this);//window
 
}.bind(obj2), 2000);
 
</script>
 

通過上面的例子可以看出call、apply和bind函數存在的區别:

bind方法不會不會立即執行,返回一個改變了上下文的this後的函數, 便于稍後調用; apply, call則是立即執行。

 除此外, 在 ES6 的箭頭函數下, call 和 apply 将失效, 對于箭頭函數來說:

// 箭頭函數體裡面的 this 對象, 是定義時所在的對象, 

// 箭頭函數不能用作構造函數,也就是說不能使用 new 命令

// 箭頭函數不可以使用 arguments 對象

本站文章版權歸原作者及原出處所有 。内容為作者個人觀點, 并不代表本站贊同其觀點和對其真實性負責,本站隻提供參考并不構成任何投資及應用建議。本站是一個個人學習交流的平台,網站上部分文章為轉載,并不用于任何商業目的,我們已經盡可能的對作者和來源進行了通告,但是能力有限或疏忽,造成漏登,請及時聯系我們,我們将根據著作權人的要求,立即更正或者删除有關内容。本站擁有對此聲明的最終解釋權。

  • 項目經理 點擊這裡給我發消息
  • 項目經理 點擊這裡給我發消息
  • 項目經理 點擊這裡給我發消息
  • 項目經理 點擊這裡給我發消息
http://m.juhua485665.cn|http://wap.juhua485665.cn|http://www.juhua485665.cn||http://juhua485665.cn