12.谈谈this对象的理解

1.谈谈this对象的理解?

2.this指向问题

 

Javascript理解this对象

this是函数运行时自动生成的一个内部对象，只能在函数内部使用，但总指向调用它的对象。

通过以下几个例子加深对this的理解。

（1）作为函数调用

var name = 'Jenny';
function person() {
    return this.name;
}
console.log(person());  //Jenny

　　

上面这个例子在全局作用域中调用person()，此时的调用对象为window，因此this指向window，在window中定义了name变量，因此this.name相当于window.name，为Jenny。

再看下面一个例子：

function a() {
    function b() {
        function c() {
            console.log(this);
        }
        c();
    }
    b();
}
a();    // window

　　

这个例子中，也同为函数调用，因此this指向window。

（2）作为对象的方法调用

var name = 'Jenny';
var obj = {
    name: 'Danny',
    person: function() {
        return this.name;
    }
};
console.log(obj.person());  //Danny

　　

在这个例子中，person()函数在obj对象中定义，调用时是作为obj对象的方法进行调用，因此此时的this指向obj，obj里面定义了name属性，值为Danny，因此this.name = "Danny"。

 

（3）作为构造函数调用

作为构造函数调用和普通函数调用的区别是，构造函数使用new关键字创建一个实例，此时this指向实例对象。

　　

function person() {
    return new person.prototype.init();
}
person.prototype = {
    init: function() {
        return this.name;
    },
    name: 'Brain'
};
console.log(person().name); //undefined

　　

这是一个比较复杂的例子，涉及到了原型。

首先，创建构造函数person，为函数重新定义原型，在原型上定义了两个方法init和name，其中init返回this.name。

调用person函数的name属性，发现返回的是undefined，为什么不是Brain呢？

我们看，调用person，返回person.prototype.init()的一个实例，假设返回的这个实例名为a，那么此时的this指向的就是a，a作为person.prototype.init()的一个实例，那么所有定义在person.prototype.init()中的方法等都可以被a调用，但是name属性定义在person的原型中，而非init函数中，因此返回undefined。

 

（4）apply和call

使用apply()和call()可以改变调用函数的对象，第一个参数为改变后调用这个函数的对象，其中apply()的第二个参数为一个数组，call的第二个参数为每个参数。

function person() {
    return this.name;
}
var obj = {
    name: 'Jenny',
    age: 18
};
console.log(person.apply(obj));  //Jenny

　　

使用apply函数改变了调用person的对象，是在obj对象下面调用person，不再是在window对象下调用了，因此this指向obj，this.name = "Jenny";

 

参考：http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html