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

首先創(chuàng)建一個(gè)函數(shù)

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

現(xiàn)在有一個(gè)新的對象Mike，但Mike里沒有say的方法，但是又要使用say方法應(yīng)該怎么辦呢,那就可以用call和apply來調(diào)用James的say方法

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

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

下面的示例，展示了call所傳參數(shù)的形式

通過call來實(shí)現(xiàn)繼承

創(chuàng)建一個(gè)構(gòu)造函數(shù)product

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

再創(chuàng)建一個(gè)構(gòu)造函數(shù)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構(gòu)造函數(shù)創(chuàng)建的對象實(shí)例擁有在country構(gòu)造函數(shù)添加的屬性name和price，但category屬性是在food構(gòu)造函數(shù)中定義的。

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

使用call調(diào)用匿名函數(shù)

創(chuàng)建以下函數(shù)

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) }

此函數(shù)通過call調(diào)用了匿名函數(shù)

apply

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

例1，數(shù)組之間的追加

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

例2，獲取數(shù)組最大最小值

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調(diào)用Math的方法即可
例3，類數(shù)組，偽數(shù)組使用數(shù)組方法

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

bind

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

例子：
創(chuàng)建一個(gè)函數(shù)，使用這個(gè)函數(shù)不論怎么調(diào)用都只有一個(gè)this的值

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

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

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

從hello函數(shù)創(chuàng)建一個(gè)綁定函數(shù)，把this的值綁定到新的函數(shù)上，然后就可以愉快的調(diào)用了

總結(jié)

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。