成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

復(fù)習(xí)javascript中call,apply,bind的用法

darryrzhong / 1703人閱讀

摘要：綁定函數(shù)被調(diào)用時，也接受預(yù)設(shè)的參數(shù)提供給原函數(shù)。一個綁定函數(shù)也能使用操作符創(chuàng)建對象這種行為就像把原函數(shù)當(dāng)成構(gòu)造器。

一直很難理解js中的call apply bind，在w3schools,mdn閱讀了，也看了很多相關(guān)的文章，今天我來寫下我理解的call apply bind
首先創(chuàng)建一個函數(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)在有一個新的對象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的用法幾乎相同，只有一個區(qū)別，就是call()方法接受的是若干個參數(shù)的列表，而apply()方法接受的是一個包含多個參數(shù)的數(shù)組。

下面的示例，展示了call所傳參數(shù)的形式 通過call來實現(xiàn)繼承

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

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

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

這里也可以看出，call接受的參數(shù)第一位是需要傳遞的this對象，在非嚴(yán)格模式下，如果不需要對this進行改變，可把第一個值設(shè)為null，會自動指定到全局對象。后面的值是函數(shù)傳遞進來的參數(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)用一個函數(shù), 其具有一個指定的this值，以及作為一個數(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)建一個新函數(shù)（稱為綁定函數(shù)），新函數(shù)與被調(diào)函數(shù)（綁定函數(shù)的目標(biāo)函數(shù)）具有相同的函數(shù)體（在 ECMAScript 5 規(guī)范中內(nèi)置的call屬性）。當(dāng)新函數(shù)被調(diào)用時 this 值綁定到 bind( ) 的第一個參數(shù)，該參數(shù)不能被重寫。綁定函數(shù)被調(diào)用時，bind( ) 也接受預(yù)設(shè)的參數(shù)提供給原函數(shù)。一個綁定函數(shù)也能使用new操作符創(chuàng)建對象：這種行為就像把原函數(shù)當(dāng)成構(gòu)造器。提供的 this 值被忽略，同時調(diào)用時的參數(shù)被提供給模擬函數(shù)。

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

this.x = 100
var dog = {
    x: 10,
    getX: function() {
        console.log(this.x)
    }
}

dog.getX()  //10

var hello = dog.getX
hello()  //100 這里因為this指向全局作用域

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

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

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

總結(jié)

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/107021.html

相關(guān)文章

  • 復(fù)習(xí) JavaScript 關(guān)鍵字 this

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

    godiscoder 評論0 收藏0

  • 把玩 JavaScript 中的 bind

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

    shenhualong 評論0 收藏0

  • JavaScript 中 call、apply、bind 用法和區(qū)別

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

    wind3110991 評論0 收藏0

  • 關(guān)于javascript中的bind、call、apply等函數(shù)的用法

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

    lordharrd 評論0 收藏0

  • JavaScript 函數(shù)作用域、執(zhí)行環(huán)境(this)、call、apply、bind 的用法

    摘要：什么是函數(shù)的作用域函數(shù)作用域在中，作用域為可訪問變量，對象，函數(shù)的集合。函數(shù)作用域作用域在函數(shù)內(nèi)修改。與函數(shù)又有什么關(guān)系呢對象是在運行時基于函數(shù)的執(zhí)行環(huán)境綁定的。 什么是函數(shù)的作用域 函數(shù)作用域：在 JavaScript 中，作用域為可訪問變量，對象，函數(shù)的集合。JavaScript 函數(shù)作用域: 作用域在函數(shù)內(nèi)修改。 this 與函數(shù)又有什么關(guān)系呢？ this對象是在運行時基于函數(shù)的...

    1fe1se 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<