JavaScript 函数调用中 this 指向的四种规则详解

全局函数调用与this指向

第一种情况是全局函数调用。

function makeArray( arg1, arg2 ){

return [this , arg1 , arg2 ];

这是定义函数最常见的方式，相信大多数JavaScript学习者对此并不陌生。

具体的调用代码如下：

makeArray('one', 'two');

// => [ window, 'one', 'two' ]

这种调用方式被称为全局函数调用。

之所以称之为全局函数，

是因为它实际上是全局对象window的一个方法。

我们可以通过以下方式验证：

alert( typeof window.methodThatDoesntExist );

// => undefined

alert( typeof window.makeArray);

// => function

因此，之前调用 makeArray 的方式与下面这种写法是等价的：

window.makeArray('one', 'two');

// => [ window, 'one', 'two' ]

对象方法调用与函数传递

第二种情况是对象方法调用。

//creating the object

var arrayMaker = {

someProperty: 'some value here',

make: makeArray

arrayMaker.make('one', 'two'); // => [ arrayMaker, 'one', 'two' ]

//或者用下面的方法调用：

arrayMaker['make']('one', 'two'); // => [ arrayMaker, 'one', 'two' ]

看到这里应该能发现与前者的区别：此时 this 的值指向了对象本身。

你可能会疑惑：为什么原始函数定义未变，this 却发生了变化？

提出质疑是非常正确的。这涉及到函数在JavaScript中的传递机制。

在JavaScript中，函数是一种标准的数据类型，

确切地说是一个对象。你可以传递或复制它们。

这就好比整个函数连同参数列表和函数体都被复制，

并赋值给了 arrayMaker 的属性 make，这相当于这样定义 arrayMaker：

var arrayMaker = {

someProperty: 'some value here',

make: function (arg1, arg2) {

return [ this, arg1, arg2 ];

事件处理中的this陷阱

如果不理解第二种调用规则，在编写事件处理代码时经常会遇到各种Bug。举例如下：

<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>

点击第一个按钮会显示“btn1”，因为这是一个方法调用，this 指向所属对象（即按钮元素）。

点击第二个按钮将显示“window”，因为 buttonClicked 是被直接调用的（并非 obj.buttonClicked() 形式），

这与第三个按钮将事件处理函数直接写在标签中的情况相同。因此，点击第三个按钮的结果与第二个一致。

请大家注意：

button1.onclick = buttonClicked;

button2.onclick = function(){

buttonClicked();

这两种写法中 this 的指向是有区别的。

使用apply和call重置上下文

当然，如果使用jQuery库，则无需过多考虑，它会帮助重写 this 的值，确保其包含当前事件源元素的引用。

//使用jQuery

$('#btn1').click( function() {

alert( this.id ); // jQuery ensures 'this' will be the button

那么 jQuery 是如何重载 this 值的呢？

答案是： call()和apply();

随着函数使用的增多，你会发现所需的 this 并不在相同的上下文中，这会导致通信异常困难。

在JavaScript中，函数也是对象，函数对象包含一些预定义方法，其中就有 apply()和 call()，我们可以使用它们来重置 this 的上下文。

<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.call(this); // btn2

< /script>

JavaScript函数调用规则四

构造器调用与new运算符

(1)构造器

我不想深入研究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' ]

other.getArray();

// => [ other, 'first', 'second' ]

一个非常重要且值得注意的点是出现在函数调用前面的 new 运算符。如果没有它，你的函数就像全局函数一样，且我们创建的那些属性都将是创建在全局对象上(window)，而你并不想那样。

另外一点，因为在你的构造器里没有返回值，所以如果你忘记使用 new 运算符，将导致你的一些变量被赋值为 undefined。

所以构造器函数以大写字母开头是一个好的习惯，这可以作为一个提醒，让你在调用的时候不要忘记前面的 new 运算符。

这样初始化函数里的代码和你在其他语言里写的初始化函数是相似的。this 的值将是你将创建的对象