apply和call的效果和异同

最新推荐文章于 2022-05-04 11:39:28 发布

原创最新推荐文章于 2022-05-04 11:39:28 发布 · 382 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #js

收录于

js'随笔专栏收录该内容

19 篇文章

订阅专栏

本文详细对比了JavaScript中apply和call两个方法的相似之处与关键差异。两者均可改变函数调用上下文并传递参数，但apply接收数组形式的参数，而call接收多个独立参数。文章通过实例展示了它们在参数处理上的不同表现。

相同点

1.将第一个传入对象变为函数this的指向，并执行函数

let s = function(){console.log(this)}
let k = {a:123,b:312}

s() //Window 对象
s.apply(k)  // {a:123,b:312} 
s.call(k)   // {a:123,b:312}

2.将传入的第二个参数，传给函数

let c = [1]
let func = function(a){console.log(a)}
func.apply(null,c) //1
func.call(null,c)  //[1]

不同点

1.apply的第二个参数只接受数组,传入对象不显示，传入其他报错(call不受限制)

let c = {a:1}
let b = [1,2,3]
let k = '123'
let func = function(a){console.log(a)}
func.apply(null,c) //undefined
func.apply(null,b) // 1
func.apply(null,k) // error

2.apply会对传入的第二个参数进行分解，call整个传入

let c = [1,2,3,4]
let func = function(){console.log(arguments)}
func.apply(null,c) //[1,2,3,4]
func.call(null,c)  //[[1,2,3,4]]

//更直观一点
let func = function(){console.log(arguments[0])}
func.apply(null,c) //1
func.call(null,c)  //[1,2,3,4]

如果对arguments不了解，再举个不用arguments的栗子

let c = [1,2,3,4]
let func = function(a,b,c,d){console.log(a,b,c,d)}
func.apply(null,c) //1,2,3,4
func.call(null,c)  //[1,2,3,4] undefined undefined undefined