Javascript 不使用匿名函数并有权访问此和e_Javascript_Jquery

Javascript 不使用匿名函数并有权访问此和e

javascript jquery

Javascript 不使用匿名函数并有权访问此和e,javascript,jquery,Javascript,Jquery,我想把脚本放在一个单独函数中的匿名函数中，这样我就可以在不同的元素上使用它，而无需重复代码。脚本需要同时访问this和emyID1在尝试使用单独的函数之前正在使用匿名函数myID2有效，但我觉得这不是首选的方式myID3可以访问this，但我不知道如何访问e。这是怎么做到的 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transi

我想把脚本放在一个单独函数中的匿名函数中，这样我就可以在不同的元素上使用它，而无需重复代码。脚本需要同时访问

this

和

myID1

在尝试使用单独的函数之前正在使用匿名函数

myID2

有效，但我觉得这不是首选的方式

myID3

可以访问

this

，但我不知道如何访问

。这是怎么做到的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> 
        <title>Testing</title>  
        <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> 
        <script type="text/javascript">
        function otherFunction2(e,This){console.log(e,This);} 
        function otherFunction3(){console.log(this);} 
            $(function(){
                $('#myID1').on("click", "a.myClass", function(e){console.log(e,this);});
                $('#myID2').on("click", "a.myClass", function(e){otherFunction2(e,this);});
                $('#myID3').on("click", "a.myClass", otherFunction3); //Can't access e
            });
        </script>
    </head>

    <body>
        <div id="myID1"><a href="javascript:void(0)" class="myClass">Click Me</a></div>
        <div id="myID2"><a href="javascript:void(0)" class="myClass">Click Me</a></div>
        <div id="myID3"><a href="javascript:void(0)" class="myClass">Click Me</a></div>
    </body> 
</html>


测试
函数otherFunction2（e，This）{console.log（e，This）；}
函数otherFunction3（）{console.log（this）；}
$（函数（）{
$（'#myID1'）。在（“单击”，“a.myClass”，函数（e）{console.log（e，this）；}）上；
$（'#myID2'）。on（“单击”，“a.myClass”，函数（e）{otherFunction2（e，this）；}）；
$（'#myID3'）。在（“click”，“a.myClass”，otherFunction3）；//无法访问e
});

传递给上的

的函数（或函数引用）通过一个参数调用：eventObject
。您可以根据需要引用…e
就可以了
然后，隐式定义的this
的值（不是参数）将自动设置为触发事件的元素。因此，如果要传递引用，请按如下方式设置引用：
function someFunction(e) {
    console.log(e, this);
}

您只需设置一个参数，此
自动正确定义
如果要从事件处理程序中调用不同的函数，如使用#myID2
和someFunction2
，则可以显式地传递这些函数（如您所做的），或使用调用

参考资料：

此
：
打开
：
呼叫
：
传递给

上的

的函数（或函数引用）通过一个参数调用：eventObject
。您可以根据需要引用…e
就可以了
然后，隐式定义的this
的值（不是参数）将自动设置为触发事件的元素。因此，如果要传递引用，请按如下方式设置引用：
function someFunction(e) {
    console.log(e, this);
}

您只需设置一个参数，此
自动正确定义
如果要从事件处理程序中调用不同的函数，如使用#myID2
和someFunction2
，则可以显式地传递这些函数（如您所做的），或使用调用

参考资料：

此
：
打开
：
呼叫
：
对于otherFunction3（）
要访问e
，只需在参数列表中声明e
。jQuery会自动传递参数，即使未声明：
function otherFunction3(e) { ... }

对于#myID2
您需要.call（）
其他函数2

：

$('#myID2').on("click", "a.myClass", function(e) {
    otherFunction2.call(this, e);
});

在

otherFunction2

中的哪个点，将像往常一样设置

this

变量，您可以删除传递的

this

参数。

对于

otherFunction3（）

要访问

，只需在参数列表中声明

。jQuery会自动传递参数，即使未声明：

function otherFunction3(e) { ... }

对于

#myID2

您需要

.call（）

其他函数2：

$('#myID2').on("click", "a.myClass", function(e) {
    otherFunction2.call(this, e);
});

此时，

otherFunction2

中的

this

变量将像往常一样设置，您可以删除传递的

this

参数。

JavaScript不允许方法重载。它使用一种不同的方法：每个函数作用域中可用的arguments对象。您可以通过此对象访问函数提供的参数，就像使用数组一样。所以你可以用这个：

function otherFunction3(){console.log(this, arguments[0])}

另外，关于

otherFunction2

，更好的方法是在

函数

“类”的所有实例上使用本机方法。或者，您可以使用。不同之处在于，

call

需要向函数传递无限多的参数，而

apply

只接受2个参数。在这两种情况下，第一个始终是您的

此

范围，所有后续参数都类似于您的参数。Apply将接受一个数组作为第二个参数，其中包含要传递给函数的所有参数

代码如下所示：

$('#myID2').on('click', 'a.myClass', function(e){otherFunction2.call(this, e);});

分别删除

This

参数，并在

控制台.log

调用中将其替换为小写的“等效”。我相信这实际上不需要说明…

function otherFunction3(){console.log(this, arguments[0])}