亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

wind3110991 / 2479人閱讀

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

簡介

JavaScript 中有三個(gè)方法Function.prototype.call()、Function.prototype.apply()和Function.prototype.bind()可以用來指定函數(shù) this 值。call() 和 apply() 類似，都是調(diào)用函數(shù)，并指定函數(shù)的 this 值thisArg和參數(shù)，區(qū)別在于call()傳入?yún)?shù)是通過參數(shù)列表的形式arg1, arg2, ...，apply()傳入?yún)?shù)是通過數(shù)組的形式[arg1, arg2, ...]：

function.call(thisArg, arg1, arg2, ...)
function.apply(thisArg, [arg1, arg2, ...])

bind()方法與前兩個(gè)不同，它創(chuàng)建一個(gè)新的函數(shù)，在調(diào)用新函數(shù)時(shí)，會(huì)調(diào)用原函數(shù)，并指定原函數(shù)的 this 值和參數(shù)。bind() 執(zhí)行的時(shí)候并沒有調(diào)用函數(shù)。bind()傳入?yún)?shù)的方式和call()一樣，都是用參數(shù)列表：

fucntion.bind(thisArg, arg1, arg2, ...)
用法 call()

使用call()調(diào)用父類構(gòu)造函數(shù)來實(shí)現(xiàn)繼承，也可以用apply()，只不過傳參方式略有區(qū)別：

// 使用 call 實(shí)現(xiàn)繼承
var Pet = function (name, age) {
  this.name = name
  this.age = age
}
var Cat = function (name, age, color) {
  Pet.call(this, name, age)
  this.color = color
}
var cat = new Cat("Garfield", 1, "orange")
console.log(cat.name)  // Garfield
console.log(cat.age)  // 1
console.log(cat.color)  // orange

// 使用 apply 實(shí)現(xiàn)繼承：
var Dog = function (name, age, size) {
  Pet.apply(this, [name, age])
  this.size = size
}

當(dāng)調(diào)用一個(gè)對象的方法時(shí)，方法中 this 指向的是對象本身，用call()改變方法的 this 值：

var utils = {
  setName: function (name) {
    this.name = name
  }
}
// 使用 call 指定 setName 中的 this 指向自己
var Person = function (name) {
  utils.setName.call(this, name)
}
var p = new Person("John")
console.log(p.name)  // "John"
apply()

apply()方法除了用來指定函數(shù) this 值，還可以用來傳遞參數(shù)。例如，Math.max()允許傳入多個(gè)參數(shù)，求它們的最大值，可以用apply()方法將數(shù)組元素作為參數(shù)傳遞給Math.max()方法：

// 使用循環(huán)求最大值
var numbers = [1, 0, 0, 8, 6], max = -Infinity
for (var i = 0; i < numbers.length; i++) {
  max = Math.max(numbers[i], max)
}

// 使用 apply 求最大值，代碼更簡潔
var numbers = [1, 0, 0, 8, 6]
max = Math.max.apply(null, numbers)

// 使用 apply 給數(shù)組添加元素
var numbers = [1, 0, 0, 8, 6], arr = []
arr.push.apply(arr, numbers)

另外，因?yàn)?JS 引擎有參數(shù)長度的限制，如果參數(shù)數(shù)組太長，可能會(huì)造成程序異常。所以，對于超長參數(shù)數(shù)組，應(yīng)切分成更小的尺寸，分多次調(diào)用該方法。

bind()

在給setTimeout和setInterval傳入函數(shù)時(shí)，函數(shù)中 this 指向的是全局 window 對象。使用bind()方法，重新指定 this 值：

var Person = function (name) {
  this.name = name
}
Person.prototype.say = function () {
  setTimeout(function () {
    console.log("My name is " + this.name)
  }.bind(this))
}
var p = new Person("John")
p.say()  // My name is John

在給 Dom 對象添加監(jiān)聽函數(shù)時(shí)，監(jiān)聽函數(shù)作為 Dom 對象的一個(gè)方法，函數(shù)中 this 指向的是 Dom 對象。使用bind()方法，重新指定 this 值，使用箭頭函數(shù)也可以達(dá)到同樣的效果：

var fakeDom = { a: "fakeDom" }
var addEvent = function () {
  this.a = "addEvent"
  fakeDom.onClick = function () {
    console.log(this.a)
  }
  fakeDom.onClickBind = function () {
    console.log(this.a)
  }.bind(this)
  fakeDom.onClickArrow = () => {
    console.log(this.a)
  }
}
addEvent()
fakeDom.onClick()  // "fakeDom"
fakeDom.onClickBind()  // "addEvent"
fakeDom.onClickArrow()  // "addEvent"

使用bind()綁定參數(shù)后，新函數(shù)只需要傳入剩余參數(shù)：

var add = function (a, b) {
  return a + b
}
var add5 = add.bind(null, 5)
console.log(add5(3))  // 8

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

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

相關(guān)文章

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

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

    1fe1se 評論0 收藏0

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

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

    lordharrd 評論0 收藏0

  • 理解 JavaScript call()/apply()/bind()

    摘要：理解文章中已經(jīng)比較全面的分析了在中的指向問題，用一句話來總結(jié)就是的指向一定是在執(zhí)行時(shí)決定的，指向被調(diào)用函數(shù)的對象。與和直接執(zhí)行原函數(shù)不同的是，返回的是一個(gè)新函數(shù)。這個(gè)新函數(shù)包裹了原函數(shù)，并且綁定了的指向?yàn)閭魅氲摹? 理解 JavaScript this 文章中已經(jīng)比較全面的分析了 this 在 JavaScript 中的指向問題，用一句話來總結(jié)就是：this 的指向一定是在執(zhí)行時(shí)決定的，...

    duan199226 評論0 收藏0

  • call、apply、bind的用法小結(jié)

    摘要：新手經(jīng)常犯的一個(gè)錯(cuò)誤是將一個(gè)方法從對象中拿出來，然后再調(diào)用，希望方法中的是原來的對象。如果不做特殊處理的話，一般會(huì)丟失原來的對象。 call、apply、bind是JavaScript中Function函數(shù)自帶的方法，主要用于改變this的指向 區(qū)別： call（） 1.語法： fun.call(this, arg1,arg2) 2.this取值的幾點(diǎn)說明： （1）處于非嚴(yán)格模式下，...

    woshicixide 評論0 收藏0

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

    摘要：綁定函數(shù)被調(diào)用時(shí)，也接受預(yù)設(shè)的參數(shù)提供給原函數(shù)。一個(gè)綁定函數(shù)也能使用操作符創(chuàng)建對象這種行為就像把原函數(shù)當(dāng)成構(gòu)造器。 一直很難理解js中的call apply bind，在w3schools,mdn閱讀了，也看了很多相關(guān)的文章，今天我來寫下我理解的call apply bind 首先創(chuàng)建一個(gè)函數(shù) function man(){} man.prototype = { name: ...

    darryrzhong 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<