橘子味的心
标题: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), 有两个属性 (firstNamelastName), 和一个方法 (fullName):

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

让我试试

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

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

测试一下! 修改 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 的值, 并调用函数作为现有对象的新方法.


目录

分类