从jQuery源码解析JavaScript中call与apply方法的作用域机制

jQuery $.each中的参数来源疑问

在近期使用jQuery的$.each方法时产生了一个疑问：在$.each($(‘div'),function(index,entity){});这一调用中，参数index和entity从何而来？它们看似可选，却能准确提供当前遍历的下标和实体对象。为了解开这个疑惑，查阅了jQuery的源代码，发现其内部实现如下：

从jQuery源码看call方法的使用

在调试过程中，代码执行路径进入了标红的分支，这里使用了callback.call方法。由此联想到《JavaScript高级程序设计》中对此有较为深入的讲解，于是进一步查阅了相关资料。

JavaScript中this关键字与作用域基础

首先需要明确概念：function是一个指向Function对象的引用，而函数名则是指向该函数的指针。在函数体内部，存在一个特定的作用域，即this关键字所指向的环境。

this关键字代表函数运行时所处的作用域。为了更直观地理解，可以参考以下示例：

<script type="text/javascript">
function funcA() {
alert(this);
alert("Function A");
        }
</script>

上述代码中，函数funcA定义在全局环境中。因此，函数体内的this关键字指向的是window对象。

call与apply方法详解及参数传递差异

接下来详细说明call和apply方法。以call为例，其第一个参数用于指定函数内部this的指向（即改变作用域），后续参数则是传递给原函数的具体参数，且数量必须与原函数定义一致。举例说明如下：

<script type="text/javascript">
var testO = { name: "Lily" };
function funcA(a,b) {
alert(this);
alert("Function A");
        }
function funcB(a, b) {
 funcA.call(testO, a, b);
 }
funcB(1,2); //this变成了testO
 </script>

在funcB函数中调用funcA的call方法，改变了funcA中this的指向，由原本指向window变为指向call的第一个参数testO对象。调用call时，若funcA有两个参数，需逐一指出后续参数a和b，或仅传第一个参数。

例如：funcA.call(testO)；或仅传a，即：funcA.call(testO,a);

apply与call的区别在于，apply的第二个参数可为数组形式，无需逐一指出参数，如funcA.apply(testO,[a,b])

扩展函数作用域的实际应用场景

介绍完call与apply的基本用法，接下来讨论其真正的用武之地：扩充函数赖以运行的作用域。

<script type="text/javascript">
window.color = "透明";
var testObj = { color: "红色" };
function testFuc() {
 alert(this.color);
 }
$(function () {
 1.testFuc(); //弹出“透明”
 2.testFuc(this); //弹出“undefined”
 3.testFuc.call(this.parent); //弹出“透明”
 4.testFuc.call(window); //弹出“透明”
 5.testFuc.call(testObj); //弹出“红色”
 });
</script>

上述代码演示了call的作用。第一次函数调用，this指向window，因此弹出window的color属性。

第二次函数调用可能令人困惑，但需明确函数运行在$(function(){});中，即jQuery的函数。

在$(function(){});中，this的作用域指向document，调用testFunc时尝试弹出document的color，结果自然是未定义。

第三次调用将testFunc的this指向了document的父级window，弹出window的color没有问题。

第四次调用更为直接，将window传入。

第五次调用将testFunc的this指向testObj，弹出红色。

至此，用法大家已有所了解，具体如何理解和使用则取决于个人实践。

类比泛型方法的通用扩展思路

我的理解是，这种用法可视为C#或Java中的泛型方法。例如一个C#方法的定义

这样我们就可以实现对方法的扩展，实现通用的目的。

以上都是本人自己的看法和观点，有什么不对之处还请大家指出来共同学习。

复制代码