学习王福朋-深入理解javascript原型和闭包系列笔记(7)

学习王福朋-深入理解javascript原型和闭包系列笔记(7)

原文链接http://www.cnblogs.com/wangfupeng1988/p/3988422.html

this

在函数中this到底取何值，是在函数真正被调用执行的时候确定的，函数定义的时候确定不了。因为this的取值是执行上下文环境的一部分，每次调用函数，都会产生一个新的执行上下文环境。

this的取值，分为4种情况。

情况一：构造函数

使自己的对象多次复制，同时实例根据设置的访问等级可以访问其内部的属性和方法，当对象被实例化后，构造函数会立即执行它所包含的任何代码。构造函数的函数名第一个字母大写！

function Foo() {
    this.name = 'June';
    this.year = 1991;

    console.log(this);  //Foo {name: "June", year: 1991}
}

var f1 = new Foo();
console.log(f1.name);   //June
console.log(f1.year);   //1991

如果函数作为构造函数用，那么其中的this就代表它即将new出来的实例对象。如果直接调用上面的函数如:Foo()，则this指向的是Window

在构造函数的prototype中：

function Fn() {
    this.name = "June";
    this.year = 1991;
}

Fn.prototype.getName = function() {
    console.log(this.name); //June
};

var f1 = new Fn();
f1.getName();

在Fn.prototype.getName函数中，this指向的是f1对象。因此可以通过this.name获取f1.name的值。

其实，不仅仅是构造函数的prototype，即便是在整个原型链中，this代表的也都是当前对象的值。

---

情况二：函数作为对象的一个属性

函数作为对象的一个属性，并且作为对象的一个属性被调用时，函数中的this指向该对象。

var obj = {
    x: 10,
    fn: function() {
        console.log(this);  //Object {x: 10, fn: function}
        console.log(this.x);//10
    }
};
obj.fn();

如果fn函数不作为obj的一个属性被调用。

var obj = {
    x: 10,
    fn: function() {
        console.log(this);  //Window
        console.log(this.x);//undefined
    }
};
var fn1 = obj.fn;
fn1();

fn函数被赋值到了另一个变量中，并没有作为obj的属性被调用，this指向的是Window，Window上没有一个叫x的属性，所以this.x为undefined。

---

情况三：函数用call或者apply调用

著作权归作者所有。
商业转载请联系作者获得授权，非商业转载请注明出处。
作者：赵望野
链接：http://www.zhihu.com/question/20289071/answer/14745394
来源：知乎

call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的，换句话说，就是为了改变函数体内部 this 的指向。因为 JavaScript 的函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。

二者的作用法完全一样，只是接受参数的方式不太一样。

通过 func1.call(this, arg1, arg2); 或者 func1.apply(this, [arg1, arg2]); 来调用。其中 this 是你想指定的上下文，他可以是任何一个 JavaScript 对象(JavaScript 中一切皆对象)，call 需要把参数按顺序传递进去，而 apply 则是把参数放在数组里。

JavaScript 中，某个函数的参数数量是不固定的，因此要说适用条件的话，当你的参数是明确知道数量时，用 call。而不确定的时候，用 apply，然后把参数 push 进数组传递进去。当参数数量不确定时，函数内部也可以通过 arguments 这个数组来便利所有的参数。

当一个函数被call或apply调用时，this执向的是传入的对象。

var obj = {
    x: 10
};

var fn = function() {
    console.log(this);  //Object{x: 10}
    console.log(this.x);    //10
};
fn.call(obj);

---

情况四： 全局&调用普通函数

全局环境下，this永远指向的是window

console.log(this === window); //true

普通函数在调用时候，其中的this指向的也是window

var x = 10;

var fn = function() {
    console.log(this);  //Window
    console.log(this.x);//10
};
fn();

注意以下情况：

var obj = {
    x: 10,
    fn: function() {
        function f() {
            console.log(this);  //Window
            console.log(this.x);//undefined
        }
        f();
    }
};
obj.fn();

函数f虽然在obj.fn内部定义的，但是它任然是一个普通函数，this指向的是window

---

在网上找到一个叫做"JavaScript this决策树(非严格模式下)"图片，通过这个也能理解this