復習javascript中call,apply,bind的用法

darryrzhong 發布于2019-08-26 11:30 / 1695人閱讀

摘要：綁定函數被調用時，也接受預設的參數提供給原函數。一個綁定函數也能使用操作符創建對象這種行為就像把原函數當成構造器。

一直很難理解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 = name
    this.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()  //10

var 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會立即執行函數

GPU云服務器云服務器 JS中bind、call和apply的作 javascript_bind用法 apply與call的區別 javascript中apply

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107021.html

復習 JavaScript 關鍵字 this

摘要：方法調用當一個函數作為一個對象的屬性調用時候下標表達式或者點表達式稱之為方法調用，此時指向這個對象。作為構造函數調用的方式稱為的構造函數，的過程中構造函數的對象的屬性和方法將被加到新對象的屬性上。 this this是js的一個關鍵字，只能在函數內部使用，在函數運行時候自動生成的內部對象，代表函數運行時候的作用域指向，使用頻率極高！常用的用法與作用域指向函數調用：js里面規定當...

godiscoder 2019-08-20 12:12 評論0 收藏0
把玩 JavaScript 中的 bind

摘要：此模式調用函數的時候，被綁定到全局對象。構造器調用模式如果在一個函數前面帶上來調用，那么背地里將會創建一個連接到該函數的成員的新對象，同時會被綁定到新對象上。前言今天閑著無聊隨便逛了逛MDN，忽而看到一個方法Function.prototype.bind(),突然發現除了使用這個方法之外都沒有仔細琢磨過這個方法。于是乎，找到了kill time的事情-寫博客。基礎知識簡介 ...

shenhualong 2019-08-21 10:33 評論0 收藏0
JavaScript 中 call、apply、bind 用法和區別

摘要：和類似，都是調用函數，并指定函數的值和參數，區別在于傳入參數是通過參數列表的形式，傳入參數是通過數組的形式方法與前兩個不同，它創建一個新的函數，在調用新函數時，會調用原函數，并指定原函數的值和參數。執行的時候并沒有調用函數。簡介 JavaScript 中有三個方法Function.prototype.call()、Function.prototype.apply()和Function...

wind3110991 2019-08-23 16:06 評論0 收藏0
關于javascript中的bind、call、apply等函數的用法

摘要：其實它們都很簡單，但是在處理一些與相關的函數的時候，用來改變函數中的指向，卻是必不可少的工具，所以必須掌握好它們的用法。關于javascript中的bind、call、apply等函數的用法我GitHub上的菜鳥倉庫地址：點擊跳轉查看其他相關文章文章在我的博客上的地址：點擊跳轉 ? ? ? ? 前面的文章已經說到this的指向了，那么這篇文章就要說一說和this相關的三個...

lordharrd 2019-08-22 10:53 評論0 收藏0
JavaScript 函數作用域、執行環境(this)、call、apply、bind 的用法

摘要：什么是函數的作用域函數作用域在中，作用域為可訪問變量，對象，函數的集合。函數作用域作用域在函數內修改。與函數又有什么關系呢對象是在運行時基于函數的執行環境綁定的。什么是函數的作用域函數作用域：在 JavaScript 中，作用域為可訪問變量，對象，函數的集合。JavaScript 函數作用域: 作用域在函數內修改。 this 與函數又有什么關系呢？ this對象是在運行時基于函數的...

1fe1se 2019-08-26 13:47 評論0 收藏0