卡卡网

JavaScript 函数调用用于执行函数代码，函数内部的代码在函数被调用时执行。了解如何调用函数以及如何设置this关键字将使你编写更具表现力的代码。在本文中，我将提供一些关于如何调用函数以及如何为每个调用方式确定this关键字的示例。

• 将函数作为函数调用
• 将函数作为方法调用
• 使用函数构造函数调用函数

1、将函数作为函数调用

此方式指的是调用未定义为对象成员的函数。这是定义函数的最基本方式，它包括两个函数声明：

function hello() {
    alert('hello');
}

和函数表达式：

var hello = function() {
    alert('hello');
}

以这种方式调用的函数可以访问this关键字，它的值是全局对象。这可能不是你希望看到的。你可能期望this引用父函数的作用域，但事实并非如此。这是一个例子。

var obj = {};
obj.add = function(val1, val2) {
    var inner = function() {
        this.sum = val1 + val2;
    }
    inner();
}
obj.add(2, 4);

你可能期望obj.sum等于 6，但事实并非如此！

var obj = {};
obj.add = function(val1, val2) {
    var inner = function() {
        this.sum = val1 + val2;
    }
    inner();
}
obj.add(2, 4);
console.log(obj.sum); // undefined

相反，全局对象现在有一个 sum 属性。看一看：

var obj = {};
obj.add = function(val1, val2) {
    var inner = function() {
        this.sum = val1 + val2;
    }
    inner();
}
obj.add(2, 4);
console.log(sum); // 6

在父函数将this值设为新变量

上例中，我们若想 obj.sum=6 成立，那么可以在父函数将this值设为新变量，再在内部函数中使用这个新变量。上面示例代码改为：

var obj = {};
obj.add = function(val1, val2) {
    var that = this;
    var inner = function() {
        that.sum = val1 + val2;
    }
    inner();
}
obj.add(2, 4);

代码多了一行 var that = this; ，这条语法的作用是，将this（指obj对象）的值设置为变量that。然后把 this.sum 改为了 that.sum。

现在在内部函数中，由于this关键字引用全局对象，我们想用它来引用obj对象。现在你可以记录obj.sum并获得你可能期望的结果：

var obj = {};
obj.add = function(val1, val2) {
    var that = this;
    var inner = function() {
        that.sum = val1 + val2;
    }
    inner();
}
obj.add(2, 4);
console.log(obj.sum); // 6

应该记住，在单独调用函数时（而不是作为对象的成员），this将引用全局对象。

2、将函数作为方法调用

在我看来，方法调用方式确实是最自然和预期的——它将this分配给调用它的对象。首先，我们来看一个方法调用的例子：

var sentence = {
    words: [],
    add: function(word) {
        this.words.push(word);
    },
    read: function() {
        var text = this.words.join(' ') + '.';
        console.log(text);
    }
};
sentence.add('The');
sentence.add('end');
sentence.read();

在这个例子中，我们可以使用add方法将单词添加到句子中。该方法是使用方法调用方式调用的，因为它是句子对象的成员。如你所见，add方法使用this引用句子。所以在add和read方法中，使用this.words和使用sentence.words是一样的。上面的代码将记录：

> The end.

这种方式特别好，因为它采用了后期绑定。这意味着this的值是在调用方法时确定的。这使得该方法具有高度可重用性。看看下面的函数：

var set = function(key, val) {
    this[key] = val;
};

如果你使用基本函数调用直接调用此函数，你将把你的键和值添加到全局对象中。

set('name', 'Tyler');
console.log(name);
> Tyler

但是，由于 this 的值是在调用时确定的，因此你可以将此函数分配给对象，以便在对象上设置属性。

var person = {};
person.set = set;
person.set('name', 'Joe');

同样的set函数被添加为person对象的属性。正如上面的示例中所看到的，将set方法作为person对象的成员调用可确保this引用person而不是全局对象。

console.log(person.name);
> Joe

3、使用函数构造函数调用函数

在谈论构造函数调用之前，你应该了解 JavaScript 是一种原型继承语言。一切都是对象，每个对象都是使用其他对象作为原型创建的。这意味着不存在 JavaScript 类之类的东西。但是，由于许多程序员都熟悉并喜欢经典语言，因此 JavaScript 提供了一种创建看起来非常像经典语言的对象的方法。下面是一个 JavaScript 类对象创建的简短示例：

function base() {
}
var child = new base();

这个例子，基本函数什么都不做，但我想演示如何从现有函数创建一个新对象。有关此过程的一些重要细节超出了本文的范围，但出于此目的，你可以看到子对象是使用new base()创建的。

这将创建一个名为child的新对象，其构造方法是base。意思是：

console.log(child.constructor)
> [Function: base]

如果使用new前缀调用函数，则会创建一个新对象，其中包含指向原始函数原型成员值的隐藏链接，并且this将绑定到新创建的对象。为了将其付诸实践，让我们在我们的假类“实例化”时传递一个值。

function base(number) {
    this.number = number;
}
var child = new base(100);

希望现在你可以猜到this在基本函数中指的是什么。

console.log(child.number);
> 100

由于base用作构造函数，因此 this指的是从它创建的任何对象。

打算与新前缀一起使用的函数称为构造函数。

不建议这样做，因为 JavaScript 不是作为经典语言设计的，而是作为原型语言设计的。但是当你阅读更多代码时，你肯定会遇到这种方式。

总结

本文通过示例，介绍了JavaScript函数调用的三种方式，以及this的使用。通过三种方式的了解，我们更倾向推荐使用方法调用函数这种方法，因为这种方法是最自然和预期的。

相关文章

• 【示例】讲解JavaScript IIFE 与函数调用

标签: 函数调用