JavaScript完美调用函数的5种方法

本文详细介绍了javascript中各种函数调用的方法和原理，这对理解JavaScript的功能非常有帮助！


JavaScript，5种调用函数的方法

一次又一次，我发现带有错误的Javascript代码是由于没有真正理解Javascript函数如何工作（顺便说一下，许多代码是由我编写的）引起的。 JavaScript具有函数式编程的功能。当我们选择面对它时，这将阻碍我们的进步。

作为初学者，让我们测试五个函数调用的方法。从表面上看，我们认为这些函数与C＃中的函数非常相似，但是我们可以看到未来仍然存在非常重要的差异，忽略这些差异无疑会导致难以跟踪的错误。首先让我们创建一个稍后将使用的简单函数。此函数只返回this的当前值和两个提供的参数。

<script type="text/javascript">
function makeArray(arg1, arg2){
    return [ this, arg1, arg2 ];
}
</script>

最常见的方法，但不幸的是，全局函数调用，当我们学习Javascript时，我们学习了如何使用上面示例中的语法定义函数。

我们也知道调用这个函数非常简单，我们需要做的就是：

makeArray("one", "two");
// => [ window, "one", "two" ]
Wait a minute. What"s that window
alert( typeof window.methodThatDoesntExist );
// => undefined
alert( typeof window.makeArray);
// =>
window.makeArray("one", "two");
// => [ window, "one", "two" ]

我说最常见的调用方法是不幸的，因为它导致我们声明的函数默认是全局的。我们都知道，全球成员并没有编写最佳实践。在JavaScript中尤其如此，避免在JavaScript中使用全局成员，是没错的。

JavaScript函数调用规则1

在没有显式所有者对象的情况下直接调用的函数（例如myFunction（））将导致此值成为默认对象（浏览器中的窗口）。

函数调用

现在让我们创建一个简单的对象，使用makeArray函数作为它的一个方法，我们将使用json声明一个对象，我们也调用这个方法：

//creating the object
var arrayMaker = {
    someProperty: "some value here",
    make: makeArray
};
//invoke the make() method
arrayMaker.make("one", "two");
// => [ arrayMaker, "one", "two" ]
// alternative syntax, using square brackets
arrayMaker["make"]("one", "two");
// => [ arrayMaker, "one", "two" ]

看到这里的差异，它的价值就变成了对象本身。您可能想知道原始函数定义是否未更改，为什么它不是窗口？好吧，这是函数在JSavacript中传递的方式，函数In JavaScript是一种标准数据类型，特别是一个对象。您可以传递或复制它们。就好像使用参数和函数列表复制整个函数，并将其分配给arrayMaker中的属性make。这就像定义一个这样的arrayMaker：

var arrayMaker = {
    someProperty: "some value here",
    make: function (arg1, arg2) {
        return [ this, arg1, arg2 ];
    }
};

JavaScript函数调用规则2

在方法调用语法中，如obj.myFunction（）或obj"myFunction"，则this的值为obj。

这是事件处理代码中的主要错误来源。看看这些例子。

<input type="button" value="Button 1" id="btn1"  />
<input type="button" value="Button 2" id="btn2"  />
<input type="button" value="Button 3" id="btn3"  onclick="buttonClicked();"/>
<script type="text/javascript">
function buttonClicked(){
    var text = (this === window) ? "window" : this.id;
    alert( text );
}
var button1 = document.getElementById("btn1");
var button2 = document.getElementById("btn2");
button1.onclick = buttonClicked;
button2.onclick = function(){   buttonClicked();   };
</script>

单击第一个按钮将显示“btn”，因为它是一个方法调用，这是它所属的对象（按钮元素）。单击第二个按钮将显示“window”，因为buttonClicked是直接调用的（与obj.buttonClicked（）不同。）这和我们的第三个按钮，事件处理程序直接放在标签中。因此，单击第三个按钮的结果与第二个按钮相同。

使用像jQuery这样的JS库的优点是，当在jQuery中定义事件处理程序时，JS库将帮助覆盖它的值，以确保它包含对当前事件源元素的引用。

//使用jQuery
$("#btn1").click( function() {
    alert( this.id ); // jQuery ensures "this" will be the button
});

jQuery如何重载这个值呢？

另外两个：apply（）和call（）

您使用JavaScript函数的次数越多，您发现需要传递函数并在不同的上下文中调用它们的次数就越多，就像Qjuery在事件处理程序中所做的那样，您经常需要重置它的值。记住我告诉你的，在Javascript函数中也是对象，函数对象包含一些预定义的方法，其中两个是apply（）和call（），我们可以用它来重置它。

var gasGuzzler = { year: 2008, model: "Dodge Bailout" };
makeArray.apply( gasGuzzler, [ "one", "two" ] );
// => [ gasGuzzler, "one" , "two" ]
makeArray.call( gasGuzzler,  "one", "two" );
// => [ gasGuzzler, "one" , "two" ]

这两种方法是相似的。不同之处在于以下参数不同。 Function.apply（）使用数组传递给函数，Function.call（）独立传递。在实践中，您会发现在大多数情况下apply（）更方便。

JSavacript函数调用规则3

如果我们想要在不将函数复制到方法的情况下覆盖它的值，我们可以使用myFunction.apply（obj）或myFunction.call（obj）。

构造函数

我不想深入研究Javascript中类型的定义，但目前我们需要知道Javascript中没有类，任何自定义类型都需要一个使用原型对象的初始化函数（作为初始化函数）来定义你的类型。也是一个不错的，让我们创建一个简单的类型：

function ArrayMaker(arg1, arg2) {
    this.someProperty = "whatever";
    this.theArray = [ this, arg1, arg2 ];
}
// 声明实例化方法
ArrayMaker.prototype = {
    someMethod: function () {
        alert( "someMethod called");
    },
    getArray: function () {
        return this.theArray;
    }
};
var am = new ArrayMaker( "one", "two" );
var other = new ArrayMaker( "first", "second" );
am.getArray();
// => [ am, "one" , "two" ]

一个非常重要且值得注意的是在函数调用之前出现的新运算符。没有它，你的函数就像一个全局函数，我们创建的属性将在全局对象（窗口）上创建，你不想要那个，另一个主题是，因为你的构造函数中没有返回值，所以如果您忘记使用new运算符，则会导致您的某些变量未定义。因此，构造函数是大写的。开始是一个好习惯，这可以作为一个提醒，让你不要忘记以前的新操作员打电话。如此小心，初始化函数中的代码类似于您在其他语言中编写的初始化函数。这个值将是您要创建的对象。

JSavacript函数调用规则4

当您使用函数作为初始化函数（如MyFunction（））时，Javascript运行时将指定此值作为新创建的对象。

我希望了解调用各种函数的不同方法可以使您的Sjavacript代码远离错误。其中一些错误将确保您始终知道这是避免它们的第一步。