讓你弄懂 call、apply、bind的應用和區別

遊幕發表於2018-02-28
APP

其實在很多文章都會寫call，apply，bind的應用和區別，但是總感覺不是要的東西，所以自己總結一下，繼續關注我，後續我會仔細講解call，apply，bind的內部實現。喜歡的可以關注

如果出現錯誤，請在評論中指出，我也好自己糾正自己的錯誤

讓你弄懂 call、apply、bind的應用和區別

author： thomaszhou

call、apply、bind使用和區別

1、call()

面試當中幾乎每次都會問到一個js中關於call、apply、bind的問題，比如…

  • 怎麼利用call、apply來求一個陣列中最大或者最小值
  • 如何利用call、apply來做繼承
  • apply、call、bind的區別和主要應用場景

首先，要明白這三個函式的存在意義是什麼？答案是改變函式執行時的上下文，再具體一點就是改變函式執行時的this指向。有了這個認識，接下來我們來看一下,怎麼使用這三個函式。

  let obj = {name: 'tony'};
  
  function Child(name){
    this.name = name;
  }
  
  Child.prototype = {
    constructor: Child,
    showName: function(){
      console.log(this.name);
    }
  }
  var child = new Child('thomas');
  child.showName(); // thomas
  
  //  call,apply,bind使用
  child.showName.call(obj);
  child.showName.apply(obj);
  let bind = child.showName.bind(obj); // 返回一個函式
  bind(); // tony
複製程式碼

我們拿別人的showName方法，並動態改變其上下文幫自己輸出了資訊，說到底就是實現了複用

bind

bind方法是事先把fn的this改變為我們要想要的結果，並且把對應的引數值準備好，以後要用到了，直接的執行即可，也就是說bind同樣可以改變this的指向，但和apply、call不同就是不會馬上的執行（如上一個例子）

注意：bind這個方法在IE6~8下不相容。

區別

上面看起來三個函式的作用差不多，乾的事幾乎是一樣的，那為什麼要存在3個傢伙呢，留一個不就可以。所以其實他們乾的事從本質上講都是一樣的動態的改變this上下文,但是多少還是有一些差別的..

  • call、apply與bind的差別

call和apply改變了函式的this上下文後便執行該函式,而bind則是返回改變了上下文後的一個函式。

  • call、apply的區別

他們倆之間的差別在於引數的區別，call和aplly的第一個引數都是要改變上下文的物件，而call從第二個引數開始以引數列表的形式展現，apply則是把除了改變上下文物件的引數放在一個陣列裡面作為它的第二個引數。

let arr1 = [1, 2, 19, 6];
//例子：求陣列中的最值
console.log(Math.max.call(null, 1,2,19,6)); // 19
console.log(Math.max.call(null, arr1)); // NaN
console.log(Math.max.apply(null, arr1)); //  19 直接可以用arr1傳遞進去
複製程式碼

例子2:

function fn() {
    console.log(this);
}
// apply方法結果同下
fn.call(); // 普通模式下this是window，在嚴格模式下this是undefined
fn.call(null); // 普通模式下this是window，在嚴格模式下this是null
fn.call(undefined); // 普通模式下this是window，在嚴格模式下this是undefined
複製程式碼

應用

  • 將偽陣列轉化為陣列（含有length屬性的物件，dom節點, 函式的引數arguments）

js中的偽陣列(例如通過document.getElementsByTagName獲取的元素、含有length屬性的物件)具有length屬性，並且可以通過0、1、2…下標來訪問其中的元素，但是沒有Array中的push、pop等方法。就可以利用call，apply來轉化成真正的陣列，就可以使用陣列的方法了

case1: dom節點：

<div class="div1">1</div>
<div class="div1">2</div>
<div class="div1">3</div>

let div = document.getElementsByTagName('div');
console.log(div); // HTMLCollection(3) [div.div1, div.div1, div.div1] 裡面包含length屬性

let arr2 = Array.prototype.slice.call(div);
console.log(arr2); // 陣列 [div.div1, div.div1, div.div1]
複製程式碼

但是這個不適用於IE6~8，會報錯：

SCRIPT5014: Array.prototype.slice: 'this' 不是 JavaScript 物件 (報錯)
複製程式碼

那麼在IE6~8下就只能通過迴圈一個個加到陣列中了：

for (var i = 0; i < oLis.length; i++) {
    ary[ary.length] = oLis[i];
}
複製程式碼

基於IE6~8和標準瀏覽器中的區別，抽取出類陣列物件轉換為陣列的工具類：

function listToArray(likeAry) {
    var ary = [];
    try {
        ary = Array.prototype.slice.call(likeAry);
    } catch (e) {
        for (var i = 0; i < likeAry.length; i++) {
            ary[ary.length] = likeAry[i];
        }
    }
    return ary;
}
複製程式碼

case2： fn內的arguments


function fn10() {
    return Array.prototype.slice.call(arguments);
}
console.log(fn10(1,2,3,4,5)); // [1, 2, 3, 4, 5]
複製程式碼

注意：對於arguments借用陣列的方法是不存在任何相容性問題的。

case3: 含有length屬性的物件

let obj4 = {
	0: 1,
	1: 'thomas',
	2: 13,
	length: 3 // 一定要有length屬性
};

console.log(Array.prototype.slice.call(obj4)); // [1, "thomas", 13]
複製程式碼
  • 陣列拼接，新增
let arr1 = [1,2,3];
let arr2 = [4,5,6];

//陣列的concat方法：返回一個新的陣列
let arr3 = arr1.concat(arr2); 
console.log(arr3); // [1, 2, 3, 4, 5, 6]

console.log(arr1); // [1, 2, 3] 不變
console.log(arr2); // [4, 5, 6] 不變
// 用 apply方法
[].push.apply(arr1,arr2);  // 給arr1新增arr2
console.log(arr1); // [1, 2, 3, 4, 5, 6]
console.log(arr2); // 不變
複製程式碼
  • 判斷變數型別
let arr1 = [1,2,3];
let str1 = 'string';
let obj1 = {name: 'thomas'};
//
function isArray(obj) {
  return Object.prototype.toString.call(obj) === '[object Array]';
}
console.log(fn1(arr1)); // true

//  判斷型別的方式，這個最常用語判斷array和object，null(因為typeof null等於object)  
console.log(Object.prototype.toString.call(arr1)); // [object Array]
console.log(Object.prototype.toString.call(str1)); // [object String]
console.log(Object.prototype.toString.call(obj1)); // [object Object]
console.log(Object.prototype.toString.call(null)); // [object Null]
複製程式碼
  • 利用call和apply做繼承
function Animal(name){      
    this.name = name;      
    this.showName = function(){      
        console.log(this.name);      
    }      
}      

function Cat(name){    
    Animal.call(this, name);    
}      

// Animal.call(this) 的意思就是使用this物件代替Animal物件，那麼
// Cat中不就有Animal的所有屬性和方法了嗎，Cat物件就能夠直接呼叫Animal的方法以及屬性了
var cat = new Cat("TONY");     
cat.showName();   //TONY
複製程式碼
  • 多繼承
  function Class1(a,b) {
    this.showclass1 = function(a,b) {
      console.log(`class1: ${a},${b}`);
    }
  }

  function Class2(a,b) {
    this.showclass2 = function(a,b) {
      console.log(`class2: ${a},${b}`);
    }
  }

  function Class3(a,b,c) {
    Class1.call(this);
    Class2.call(this);
  }

  let arr10 = [2,2];
  let demo = new Class3();
  demo.showclass1.call(this,1); // class1: 1,undefined
  demo.showclass1.call(this,1,2); // class1: 1,1
  demo.showclass2.apply(this,arr10); // class2: 2,2
複製程式碼

相關文章