在JavaScript被调用的时候,除了可见的行参被传入方法体之外,this也被隐形地传进去了。所以,从这点也再次说明JavaScript的this的值完全取决于函数被调用时候的上下文,而不是像java的this是在声明的时候确定的。
JavaScript里,this的值随着一个函数被调用情况的不同而不同。而一个函数有4种被调用的情况,也就是说this的值有4种,那先来看看有哪四种调用函数的方法:

1: 作为方法被调用
当一个函数被赋给一个对象的属性,并引用该属性进行调用时,this === the object

var func = function(){
    return this.a;
}
var obj = {
    a: 10,
    name: 'hehe',
    fn: func
}
this.a = 20;
obj.fn();//10

图片描述

当我们执行到func时,在右边的调试工具栏可以看到this是我们的obj这个对象。

2: 作为一个函数被调用
只最常用的用()进行调用的情况,这时候this === Window
先来看一段代码:

var func = function(){
    var a = 10;
    return this.a;
}

var a = 20;
func();//结果是20而不是10

图片描述

当我们执行到func时,这时候的this是全局对象Window,那this.a自然就是全局变量a(20),而不是定义在func内部的a(10)。
其实第二种情况是第一种情况的特例,这里的对象是全局对象Window,这个方法是在Window上调用的,那this自然也就是Window了。

3: 作为构造函数被调用
指用new关键字进行调用生成一个对象实例子的情况,这时候this === 生成的实例对象

function Fruit(){
   this.func = function(){return this}
}
var apple = new Fruit();
var orange = new Fruit();

apple.func() === apple; //true
orange.func() === orange; // ture

在我们用new调用一个构造函数时,发生了三件事:

 1: 创建了一个新的空对象。
 2: 在第一步创建的这个空对象作为this传给这个构造函数。 (每一个函数被调用时,都隐式地传入一个this)
 3: 如果没有显示的返回值,新创建的这个对象,就会作为构造器函数的返回值进行返回。

第三点解释了为什么我们可以在apple上调用func这个方法,第二点解释了为什么appl.func()的执行结果等于apple.

4: 使用apply()和call()方法进行调用


nanaistaken
586 声望43 粉丝