使用模擬實現的方式探究call 和 apply 的原理

whlong 發布于2019-08-23 11:32 / 1405人閱讀

摘要：使用模擬實現的方式探究和的原理作用方法就是在使用一個指定值和若干個指定的參數值的前提下調用某個函數或者方法。如果不對進行綁定執行會返回也就是說改變了的指向到了。

使用模擬實現的方式探究call 和 apply 的原理 call

作用：

call() 方法就是在使用一個指定 this 值和若干個指定的參數值的前提下調用某個函數或者方法。

var foo = {
    value : 1
}
function bar() {
    console.log(this.value)
}
// 如果不對this進行綁定執行bar() 會返回undefined
bar.call(foo) // 1

也就是說call()改變了 this 的指向到了 foo 。

下面進行一下模擬實現

試想當調用 call 的時候，也就是類似于

var foo = {
    value: 1,
    bar: function() {
        console.log(this.value)
    }
}
foo.bar() // 1

這樣就把 this 指向到了 foo 上，但是這樣給 foo 對象加了一個屬性，有些瑕疵，不過不要緊，執行完刪除這個屬性就可以完美實現了。

也就是說步驟可以是這樣：

將函數設為對象的屬性

執行這個函數

刪除這個函數

下面就試著去實現一下：

Function.prototype.call2 = function(context) {
    context.fn = this // this 也就是調用call的函數
    var result = context.fn()
    delete context.fn()
    return result
}

var foo = {
    value: 1
}
function bar() {
    console.log(this.value)
}
bar.call2(foo) // 1

但是這樣有一個小缺陷就是call() 不僅能指定this到函數，還能傳入給定參數執行函數比如：

var foo = {
    value: 1
}
function bar(name, age) {
    console.log(name)
    console.log(age)
    console.log(this.value)
}
bar.call(foo, "black", "18")
// black
// 18
// 1

特別要注意的一點是，傳入的參數的數量是不確定的，所以我們要使用arguments 對象，取出除去第一個之外的參數，放到一個數組里：

Function.prototype.call2 = function(context) {
    context.fn = this // this 也就是調用call的函數
    var args = [...arguments].slice(1)
    var result = context.fn(...args)
    delete context.fn()
    return result
}

var foo = {
    value: 1
}
function bar(name, age) {
    console.log(name)
    console.log(age)
    console.log(this.value);
}
bar.call2(foo, "black", "18") // black 18 1

還有一點需要注意的是，如果不傳入參數，默認指向為 window，所以最終版代碼：

Function.prototype.call2 = function(context) {
    var context = context || window
    context.fn = this // this 也就是調用call的函數
    var args = [...arguments].slice(1)
    var result = context.fn(...args)
    delete context.fn()
    return result
}
var value = 1
function bar() {
    console.log(this.value)
}
bar.call2()

apply

apply的方法和 call 方法的實現類似，只不過是如果有參數，以數組形式進行傳遞，直接上代碼：

Function.prototype.apply2 = function(context) {
    var context = context || window
    context.fn = this // this 也就是調用apply的函數
    var result
    // 判斷是否有第二個參數
    if(arguments[1]) {
        result = context.fn(...arguments[1])
    } else {
        result = context.fn()
    }
    delete context.fn()
    return result
}

var foo = {
    value: 1
}
function bar(name, age) {
    console.log(name)
    console.log(age)
    console.log(this.value);
}
bar.apply2(foo, ["black", "18"]) // black 18 1

GPU云服務器云服務器 apply與call的區別 js中的call和apply JS中bind、call和apply的作 volatile的實現原理

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

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

我們不背誦 API，只實現 API

摘要：接下來，我們換一種思路，用一個相對較新的來實現方法。從這道題目看出，相比考察死記硬背，這樣的實現更有意義。對數組的操作我們不能陌生，其中方法更要做到駕輕就熟。最后，我們再看下社區上著名的和的實現。有不少剛入行的同學跟我說：JavaScript 很多 API 記不清楚怎么辦？數組的這方法、那方法總是傻傻分不清楚，該如何是好？操作 DOM 的方式今天記，明天忘，真讓人奔潰！甚至有的開發...

wudengzan 2019-08-26 13:55 評論0 收藏0
我們不背誦 API，只實現 API

摘要：接下來，我們換一種思路，用一個相對較新的來實現方法。從這道題目看出，相比考察死記硬背，這樣的實現更有意義。對數組的操作我們不能陌生，其中方法更要做到駕輕就熟。最后，我們再看下社區上著名的和的實現。有不少剛入行的同學跟我說：JavaScript 很多 API 記不清楚怎么辦？數組的這方法、那方法總是傻傻分不清楚，該如何是好？操作 DOM 的方式今天記，明天忘，真讓人奔潰！甚至有的開發...

wayneli 2019-08-02 15:09 評論0 收藏0
探究call 和 apply 的原理

建議看這片文章時可以點擊音樂

qqlcbb 2019-08-23 15:17 評論0 收藏0
javasscript - 收藏集 - 掘金

摘要：跨域請求詳解從繁至簡前端掘金什么是為什么要用是的一種使用模式，可用于解決主流瀏覽器的跨域數據訪問的問題。異步編程入門道典型的面試題前端掘金在界中，開發人員的需求量一直居高不下。 jsonp 跨域請求詳解——從繁至簡 - 前端 - 掘金什么是jsonp？為什么要用jsonp?JSONP(JSON with Padding)是JSON的一種使用模式，可用于解決主流瀏覽器的跨域數據訪問的問題...

Rango 2019-08-20 17:15 評論0 收藏0