一直很難理解js中的call apply bind，在w3schools,mdn閱讀了，也看了很多相關的文章，今天我來寫下我理解的call apply bind

首先創建一個函數

function man(){}man.prototype = {name: "Jack",love: "Rose",say: function(){console.log(this.name +" love " + this.love)} }var James = new man James.say() //Jack love Rose

現在有一個新的對象Mike，但Mike里沒有say的方法，但是又要使用say方法應該怎么辦呢,那就可以用call和apply來調用James的say方法

var Mike = {name: "唐老鴨",love: "小朋友" }James.say.call(Mike) James.say.apply(Mike)

此處可以看出，call于apply的用法幾乎相同，只有一個區別，就是call()方法接受的是若干個參數的列表，而apply()方法接受的是一個包含多個參數的數組。

下面的示例，展示了call所傳參數的形式

通過call來實現繼承

創建一個構造函數product

function product(name, price){this.name = namethis.price = price }

再創建一個構造函數food，引用product

function food(name, price){product.call(this, name, price)this.category = "food" }var rice = new food("東北大米", "50") rice //food {name: "東北大米", price: "50", category: "food"}

使用food構造函數創建的對象實例擁有在country構造函數添加的屬性name和price，但category屬性是在food構造函數中定義的。

這里也可以看出，call接受的參數第一位是需要傳遞的this對象，在非嚴格模式下，如果不需要對this進行改變，可把第一個值設為null，會自動指定到全局對象。后面的值是函數傳遞進來的參數

使用call調用匿名函數

創建以下函數

var animals = [{species: "Lion", name: "King"},{species: "Whale", name: "Fail"} ]for (var i = 0; i < animals.length; i++) {(function(i) {this.print = function() {console.log('#' + i + ' ' + this.species + ': ' + this.name)}this.print()}).call(animals[i], i) }

此函數通過call調用了匿名函數

apply

apply() 方法調用一個函數, 其具有一個指定的this值，以及作為一個數組（或類似數組的對象）提供的參數。

例1，數組之間的追加

var arr1 = ["hello", "world"] var arr2 = ["animals", "friends"] Array.prototype.push.apply(arr1, arr2)

例2，獲取數組最大最小值

var num = [50, 10, 255, 800] var maxNum = Math.max.apply(Math, num) var minNum = Math.min.apply(Math, num) var maxNum1 = Math.max.call(Math, 50, 10, 255, 800) console.log(maxNum) //800 console.log(minNum) //10

num需要取出最大最小值，使用apply調用Math的方法即可
例3，類數組，偽數組使用數組方法

Array.prototype.slice.apply(document.querySelectorAll("div")) //打印出所有div Array.prototype.slice.apply(document.querySelectorAll("div"), [1, 3]) //打印下標1開始3之前結束的div

bind

bind( ) 函數會創建一個新函數（稱為綁定函數），新函數與被調函數（綁定函數的目標函數）具有相同的函數體（在 ECMAScript 5 規范中內置的call屬性）。當新函數被調用時 this 值綁定到 bind( ) 的第一個參數，該參數不能被重寫。綁定函數被調用時，bind( ) 也接受預設的參數提供給原函數。一個綁定函數也能使用new操作符創建對象：這種行為就像把原函數當成構造器。提供的 this 值被忽略，同時調用時的參數被提供給模擬函數。

例子：
創建一個函數，使用這個函數不論怎么調用都只有一個this的值

this.x = 100 var dog = {x: 10,getX: function() {console.log(this.x)} }dog.getX() //10var hello = dog.getX hello() //100 這里因為this指向全局作用域

這里怎么才能調用dog的getX方法呢？
bind可以幫到你

var bindHello = hello.bind(dog) bindHello() //10

從hello函數創建一個綁定函數，把this的值綁定到新的函數上，然后就可以愉快的調用了

總結

call、apply和bind都是改變函數this對象的指向的，bind返回新的函數，而call和apply會立即執行函數

總結

以上是生活随笔為你收集整理的复习javascript中call,apply,bind的用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。