深入 javascript 之 call函数 用法

深入 javascript 之 call函数 用法

前言

js中有不少比较难以理解的概念，比如 js原型 和 继承 。我曾经很早的时候就看过js原型方面的知识，并在当时写了一篇 博客 作为记录，很显然当时的我只是死记硬背。最近我利用空闲的时间将一些相对比较深入的js概念和用法重新学习，并新建了一个专栏 深入javascript 用于记录和分享。以下来介绍 call函数 的用法：

概念

直接复制MDN

call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。

通俗点来说 call函数 的第一个参数可以改变 一个函数 内部的 this 值，后续的其他参数以参数列表的形式传给 一个函数，好吧下面直接上一个最简单的例子

举个🌰

var name = 'windowName'const obj = {name: 'objName',printName(a, b) {console.log(this.name, a, b);}
}const target = {name: 'targetName'
}obj.printName('foo', 'bar')    // objName foo bar
obj.printName.call(target, 'hello', 'world')    // targetName hello world

以上的例子非常清晰的描述了 call函数 的用法， 其实它的用法就是这么简单，不知道为什么我以前总是记不住😔。

值得注意的，当传给 call函数 的第一个参数是 null、undefined、false 时，它的表现也不同：

obj.printName.call(null, 'Hello', 'World')    // windowName Hello World
obj.printName.call(undefined, 'Hello', 'World')    // windowName Hello World
obj.printName.call(false, 'Hello', 'World')    // undefined "Hello" "World"

如上所示，当传入的参数为 null 和 undefined 时，函数内部的 this 值会变成 window 对象。容我啰嗦一个小tips：只有在全局作用域下使用 var 声明的变量才会成为 window对象 的属性。

当传入的参数为 false 布尔值时，函数内部的 this 值会变成 Boolean 对象，其他的值没试，数值应该是 Number 对象吧……

实战🌰

<ul><li>F</li><li>O</li><li>O</li>
</ul><script>const nodeArr = [].slice.call(document.querySelectorAll('li'))console.log(nodeArr)	// [li, li, li]
</script>

上面的例子是对于 call函数 比较经典的应用了，我会在后续的博文中深度剖析为什么 [].slice.call() 能将 NodeList 转为数组。

总结

call函数 语法虽然简单，只要静下心来研究一下相关知识就能掌握它的用法，但是它还可以用来实现很多高级的技巧，想要真正的玩转它还需要更多的时间去学习探索。