Article 十一月 28, 2020

深入 javascript 之 call函数用法

Words count 2.7k Reading time 2 mins. Read count 0

前言

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函数 的第一个参数是 nullundefinedfalse 时,它的表现也不同:

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"

如上所示,当传入的参数为 nullundefined 时,函数内部的 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函数 语法虽然简单,只要静下心来研究一下相关知识就能掌握它的用法,但是它还可以用来实现很多高级的技巧,想要真正的玩转它还需要更多的时间去学习探索。

0%