关于JavaScript中this的指向问题

标签：

JavaScript中设计最出色的就是它的函数实现，函数是JS的基本单元，而this又是函数里面特别重要的一个属性。

this和其他的语言指向不太一样，在JavaScript中this的值取决于调用的模式。

在JavaScript中一共有4种调用模式：方法调用模式、函数调用模式、构造器调用模式和apply调用模式。不同的模式在如何初始化this上存在差异。

先说下方法调用模式和函数调用模式的区别：当一个函数被保存为对象的一个属性时，我们称他为一个方法。当一个函数并非一个对象的属性时，那么它就是被当作一个函数来调用的。

一、方法调用模式

当一个方法被调用时，this被绑定到该对象上面。如果调用方式包含一个提取属性的动作（包含一个.点表达式或者[subscript]下标表达式），那么它就是被当作一个方法来调用。

//创建myObject对象，它有一个value属性和一个incurement方法
//incremtnt方法接受一个可选的参数。如果参数不是数字，那么默认使用数字1；
var myObject = {
    value: 0,
    increment: function(inc){
        this.value += typeof inc === ‘number‘ ? inc : 1;
    }
};
myObject.increment();
document.wirteln(myObject.value);    //1

myObject.increment(2);
document.wirteln(myObject.value);    //3

this指向的为调用该方法的对象。

二、函数调用模式

当一个函数并非一个对象的属性时，那么它就是被当作一个函数来调用的：

var sum = add(3,4);    //sum 的值为7

此模式下调用函数，this被绑定到全局对象。页面上的话全局对象就是window对象。node下应该是global对象。

特此强调：即使在函数内部调用，只要属于函数调用模式，this也是指向window对象。例子如下：

var value = 5;
var myObject = {
    value : 3,
    showValue: function(){
        var value = 4;
        var helper = function(){
            console.log(this.value);
        };
        helper();        //5
    }
}
myObject.showValue();

在执行helper函数的时候，其中的this并不是指向它的外部函数showValue,也没有指向myObject对象，而是全局对象。

三、构造器调用模式

构造器调用简单点讲就是指构造函数的创建，就是new一个对象。js每一个函数即是普通的函数，也是一个构造函数，可以直接使用new关键字创建一个实例对象。

var my = function(value){
    this.value = value;
    this.fun = function(){
        console.log(this.value);
    }
}

var myObj = new my(‘first‘);
myObj.value = ‘second‘;
myObj.fun();        //‘second‘

new 在实例化一个对象的时候，会经历以下4个步骤：

1、创建一个新对象

2、讲构造函数的作用域赋给新对象（就是将this指向了这个新对象）

3、执行构造函数中的代码（为这个新对象添加属性）

4、返回这个新对象

所以，该模式下this指向的是实例化的对象。

四、Apply调用模式

因为JavaScript是一门函数式的面向对象编程语言，所以函数可以拥有方法。

apply方法接受两个参数，第一个是要绑定的this的值，第二个是一个参数数组。

当一个方法调用apply方法的时候，首先是用apply的第一个参数替换调用方法的this对象，

然后用apply的第二个参数代替该方法的参数。

关于JavaScript中this的指向问题

标签：

原文地址：http://www.cnblogs.com/YJua/p/5003711.html