Javascript-apply、call、bind

alexnevsky 發布于2019-08-23 12:10 / 1984人閱讀

摘要：的作用在中，三者作用是改變某個函數的執行上下文，具體作用是改變函數體內部的指向。

apply、call、bind的作用

在javascript中，三者作用是改變某個函數的執行上下文（Execution Context），具體作用是改變函數體內部this的指向。

舉個栗子：

function example() {}
example.prototype = {
    name: "will",
    say: function() {
        console.log("hi," + this.name + "!")
    }
}
var e = new example()
e.say() // hi,will!

var obj = {
    name: "lucky"
}
e.say.apply(obj) // hi,lucky! 此時this.name是lucky
e.say.call(obj) // hi,lucky! 此時this.name是lucky
e.say.bind(obj)() // hi,lucky! 此時this.name是lucky

apply、call、bind的區別

apply、call只是接受參數的方式不太一樣，而且會立即執行，bind會產生一個新函數，需要再次調用才會執行

舉個栗子：

function func(arg1, arg2) {
    console.log(arg1 + arg2)
}
func.apply(this, [1, 2]) // apply接受的參數，第一個是對象，第二個是數組
func.call(this, 1, 2) // call接受的參數，第一個是對象，后面一個接一個

簡單舉幾個apply、call、bind的應用場景 偽數組轉標準數組

var obj = {
    0: 1,
    1: 2,
    length: 2
}
var arr1 = Array.prototype.slice.call(obj) // [1, 2]
var arr2 = Array.prototype.slice.apply(obj) // [1, 2]

取數組中的最大值或者最小值

var arr = [1, 2, 3, 4]

//取最大值
console.log(Math.max.apply(Math, arr)) // 4
console.log(Math.max.call(Math, ...arr)) // 4

//取最小值
console.log(Math.min.apply(Math, arr)) // 1
console.log(Math.min.call(Math, ...arr)) // 1

檢驗是否是數組

function isArray(obj) {
    return Object.prototype.toString.call(obj) === "[object Array]"
}
isArray([1]) // true
isArray({}) // false

React中使用bind使函數可以獲取到props

class MyCircle extends Component {
    constructor(props) {
        super(props)
        this.func = this.func.bind(this)
    }
    func() {
        ...
    }
    ...
}

等等... 總結

三者作用都是改變函數this的指向
三者第一個傳參都是要this要指向的對象
apply、call是立即執行函數，bind需要再次調用

GPU云服務器云服務器 JS中bind、call和apply的作 called Calls call

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

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

JS中的call、apply、bind方法詳解

摘要：不能應用下的等方法。首先我們可以通過給目標函數指定作用域來簡單實現方法保存，即調用方法的目標函數考慮到函數柯里化的情況，我們可以構建一個更加健壯的這次的方法可以綁定對象，也支持在綁定的時候傳參。原因是，在中，多次是無效的。 bind 是返回對應函數，便于稍后調用；apply 、call 則是立即調用。 apply、call 在 javascript 中，call 和 apply 都是...

zombieda 2019-08-23 15:27 評論0 收藏0
JS基礎篇--call、apply、bind方法詳解

摘要：首先我們可以通過給目標函數指定作用域來簡單實現方法保存，即調用方法的目標函數考慮到函數柯里化的情況，我們可以構建一個更加健壯的這次的方法可以綁定對象，也支持在綁定的時候傳參。原因是，在中，多次是無效的。而則會立即執行函數。 bind 是返回對應函數，便于稍后調用；apply 、call 則是立即調用。 apply、call 在 javascript 中，call 和 apply 都是...

lastSeries 2019-08-21 12:10 評論0 收藏0
前端基礎:call,apply,bind的的理解

摘要：和區別其實他們的作用是一樣的，只是傳遞的參數不一樣而已。接受個參數，第一個參數指定了函數體內對象的指向，第二個參數為數組或者一個類數組。看個栗子一個有意思的事在中，多次是無效的。而則會立即執行函數。背景前兩天在做小程序的需求的時候用到bind的時候才想起自己對這三的東西的了解比較淺薄，這個時候用的時候就有點怕。時候還是要好好學習下，理解下怎么玩。正文先說call 和 apply...

netmou 2019-08-20 17:01 評論0 收藏0
JS系列之call & apply & bind

摘要：參考鏈接在中，和是對象自帶的三個方法，都是為了改變函數體內部的指向。返回值是函數方法不會立即執行，而是返回一個改變了上下文后的函數。而原函數中的并沒有被改變，依舊指向全局對象。原因是，在中，多次是無效的。參考鏈接：https://juejin.im/post/59bfe8... 在JavaScript中，call、apply和bind是Function對象自帶的三個方法，都是為了改變...

xiaochao 2019-08-23 13:09 評論0 收藏0
理解 JavaScript call()/apply()/bind()

摘要：理解文章中已經比較全面的分析了在中的指向問題，用一句話來總結就是的指向一定是在執行時決定的，指向被調用函數的對象。與和直接執行原函數不同的是，返回的是一個新函數。這個新函數包裹了原函數，并且綁定了的指向為傳入的。理解 JavaScript this 文章中已經比較全面的分析了 this 在 JavaScript 中的指向問題，用一句話來總結就是：this 的指向一定是在執行時決定的，...

duan199226 2019-08-23 14:27 評論0 收藏0