JavaScript函数调用

JavaScript的函数在4种不同的调用方式.

每一种方法在 this 被初始化的方式上有所不同。

this 关键字

在JavaScript中，所谓 this ，是一个对象，“拥有”当前代码的对象

在函数中使用时，此值是“拥有”函数的对象.

注意，this不是一个变量。this是一个关键词。你不能改变这个值.

调用一个JavaScript函数

你已经认识到，当“某些东西”调用函数时，函数的代码会执行。

函数 定义 时，函数中的代码不会被执行。当函数被 调用 时，它才会执行。

一些人呢使用术语 "call a function" 代替 "invoke a function".

这也是相当常见的说法：“调用一个函数”，“启动一个函数”，或“执行一个函数”。

在本教程, 我们使用 invoke, 因为JavaScript函数被 invoked 而不是 called.

作为函数调用函数

function myFunction(a, b) {
    return a * b;
}
myFunction(10, 2);           // myFunction(10, 2) will return 20

让我试试

以上函数不属于任何对象。但在JavaScript中总是有一个默认的全局对象.

在HTML中默认的全局对象是HTML页面，所以上述功能“属于”HTML页面.

在浏览器中，页面对象是浏览器窗口window。以上函数自动成为窗口window函数.

myFunction() 和 window.myFunction() 是同一个函数:

function myFunction(a, b) {
    return a * b;
}
window.myFunction(10, 2);    // window.myFunction(10, 2) will also return 20

让我试试

这是调用一个JavaScript函数的一种常用方法，但不是一个很好的实践。全局变量、方法或函数可以在全局对象中创建名称冲突和错误.

全局对象

当函数没有所有者对象调用时, this 值属于全局对象.

在Web浏览器中全局对象是浏览器窗口.

此示例返回的 this 为窗口对象:

function myFunction() {
    return this;
}
myFunction();                // Will return the window object

让我试试

将函数作为全局函数调用，会导致这个值成为全局对象。使用窗口对象作为变量可以很容易是你的程序崩溃.

作为方法调用函数

在JavaScript中可以定义函数作为对象的方法.

下面的示例创建对象 (myObject), 有两个属性 (firstName 和 lastName), 和一个方法 (fullName):

var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}
myObject.fullName();         // Will return "John Doe"

让我试试

fullName 方法是函数。函数属于对象. myObject 是函数的所有者。

所谓 this, 是"拥有"JavaScript代码的对象. 在这个实例中 this 是 myObject.

测试一下! 修改 fullName 方法，让它返回一个 this:

var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this;
    }
}
myObject.fullName();          // Will return [object Object] (the owner object)

让我试试

作为对象方法调用函数, this 的值是对象自己.

用函数构造函数调用函数

如果函数调用前面有new关键字，则是构造函数调用.

它看起来像你创建一个新的函数，但由于JavaScript函数对象实际上你创建一个新的对象:

// This is a function constructor:
function myFunction(arg1, arg2) {
    this.firstName = arg1;
    this.lastName  = arg2;
}

// This creates a new object
var x = new myFunction("John", "Doe");
x.firstName;                             // Will return "John"

让我试试

构造函数调用创建新对象。新对象从其构造函数继承属性和方法.

this 关键字在构造函数中没有值。 this 的值将是新创建的对象.

用函数方法调用函数

在JavaScript中，函数对象。JavaScript函数的属性和方法.

call() 和 apply() 是预定义的JavaScript函数方法。这两种方法都可以用来调用函数，并且这两种方法都必须有所有者对象作为第一个参数。

function myFunction(a, b) {
    return a * b;
}
myObject = myFunction.call(myObject, 10, 2);     // Will return 20

让我试试

function myFunction(a, b) {
    return a * b;
}
myArray = [10, 2];
myObject = myFunction.apply(myObject, myArray);  // Will also return 20

让我试试

这两种方法都将所有者对象作为第一个参数.唯一不同的是，call()作为函数参数是分开的，而apply()作为函数的参数是数组。

在JavaScript中严格的模式，第一个参数是在调用函数 this 的值 ，即使参数不是一个对象。

在“非严格”模式中，如果第一个参数的值为null或未定义，则用全局对象替换它.

使用 call() 或者 apply() 你可以设置 this 的值, 并调用函数作为现有对象的新方法.