Easier Way to Understand apply and call in JS

Wildcard 發布于2019-08-23 13:55 / 2949人閱讀

The first time I know apply was when I met this code:

Math.max.apply(null, [1, 2, 3, 4])

As the mdn shows, the syntax is:

function.apply( thisArg , [argsArray] )

Actually, in case above, thisArg has no influence which means code below also works:

Math.max.apply(undefined, [1, 2, 3, 4])
Math.max.apply(Math, [1, 2, 3, 4])

The only effect of apply in the code above is that it can pass the values in array to the function max. So, code above equal

Math.max(1, 2, 3, 4)

Why would I mention this? Because we don"t need this anymore because we already have ... which works like:

Math.max(...[1, 2, 3, 4])

The reason that we still need apply and call is the thisArg. They can help us call some powerful methods.

thisArg in apply and call

I guess you might have seen this code:

Array.prototype.slice.call({ length: 2 })
function fn() {
  console.log(Array.prototype.slice.call(arguments))
}
fn(1, 2, 3, 4) //[1,2,3,4]

Today, we don"t need this either because of Array.from. But I still want to talk about it for explanation. In the case above, call was used because we want to do something like:

let obj = { length: 2 }
obj.slice() //Uncaught TypeError: obj.slice is not a function

It would cause error because slice was defined in Array.prototype. Only Array instance can call that method. But actually in the implementation of slice, it doesn"t need to be called by Array instance and there is a lot of methods like this. So, in this case, call or apply would let non Array instance call these methods which means

Array.prototype.slice.call({ length: 2 })
//help you do
let obj = { length: 2 }
obj.slice = Array.prototype.slice
obj.slice()

And to help it easier to understand , you can remember it like:

method.call(thisArg, ...args)
//works like in most cases
thisArg.method = method
thisArg.method(...args)
//for apply
method.apply(thisArg, args)
//works like in most cases
thisArg.method = method
thisArg.method(...args)

Wasn"t that easy ?

So, let get back to Math.max.apply({}, [1, 2, 3, 4]). You can remember it like:

let thisArg = {}
thisArg.max = Math.max
thisArg.max(...[1, 2, 3, 4])

And more cases:

Object.prototype.toString.call([]) //"[object Array]"
//help you do this
let thisArg = []
thisArg.toString = Object.prototype.toString
thisArg.toString() //"[object Array]"
//while
[].toString()//""

;[" sd ", 1, 3].map(Function.prototype.call, String.prototype.trim) //["sd","1","3"]
//help you do
;[" sd ", 1, 3].map(function(...args) {
  return String.prototype.trim.call(...args)
})
//help you do
;[" sd ", 1, 3].map(function(...args) {
  let thisArg = args[0]
  thisArg.trim = String.prototype.trim
  return thisArg.trim(...args.slice(1)) //Uncaught TypeError: thisArg.trim is not a function
})

In the case above, it will got error because args[0] is Primitive values. You can"t call methods in Primitive values. But it can still help you understand.

More in apply

As apply can accept an array-like object. So, what would happen if coding like:

Array.apply(null, { length: 2 })

Actually, it equals

Array.apply(null, [undefined, undefined])

So, you can understand it like:

let thisArg = {} //set null would get error in code below, also thisArg in above case is not important
thisArg.Array = Array
thisArg.Array(undefined, undefined)

Hope it"s easier to understand apply and call.

Original Post

GPU云服務器云服務器 js中的call和apply JS中bind、call和apply的作 apply與call的區別 way.js mui

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

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

The Power of Ten – Rules for Developing Safety Cri

摘要：探測器的代碼就是寫的，真厲害 New Horizon 探測器的代碼就是 JPL 寫的，真厲害 http://pixelscommander.com/wp-content/uploads/2014/12/P10.pdf Gerard J. Holzmann NASA/JPL Laboratory for Reliable Software Pasadena, CA 91109 Mo...

Muninn 2019-06-24 17:46 評論0 收藏0
promise, async, await, execution order

摘要： async can be transformed to promise. So, if we want to understand async, we have to understand promise first. Promise Normally, promise is easy to understand, especially when using like this: p...

neuSnail 2019-08-23 14:21 評論0 收藏0
《JavaScript Web應用開發》作者Nicolas：恰巧，愛好變職業（圖靈訪談）

摘要：本文僅用于學習和交流目的，不得用于商業目的。今年，我們依然會組織。隨著語言的發展，這種情況將不再適用。本系列主要討論如何獲得這些高度模塊化的應用程序。這一系列內的后續圖書會討論測試及部署等內容。更多精彩，加入圖靈訪談微信本文僅用于學習和交流目的，不得用于商業目的。非商業轉載請注明作譯者、出處，并保留本文的原始鏈接：http://www.ituring.com.cn/art... 訪談...

wawor4827 2019-08-20 18:22 評論0 收藏0
5 ways to find code online

5 Ways to find code online In 2015 google and the university of Nebraska published a research titled How developers search for code: A case study. This research was conducted on real google developers...

_ipo 2019-08-19 18:01 評論0 收藏0
Life of a Pixel 2018

摘要：將操作記錄為一列。在列表上進行操作被稱為光柵化。能夠運行產生位圖的命令加速光柵化注意到此時像素并不在屏幕上。因此，線程將劃分為。根據與的距離確定的優先級。被包裝在一個中，該對象被提交給瀏覽器進程。 This talk is about how Chrome turns web content into pixels. The entire process is called rend...

Miracle 2019-08-23 11:53 評論0 收藏0