JavaScript中的this用法总结

this在javascript中是一个非常容易让人迷惑的知识点，在前端开发过程中很多很低级的错误都是误解this的指向对象造成的，结果常常是debug了好久才发现function中使用的变量值为undefined，然后加一个bind(this)不了了之。

为了尽量减少这种低级错误，特意抽时间总结了下this在一些常见用法中this的指向对象。

先放出结论

this指向于调用该函数的对象

    obj.function();
    //function内部的this指向obj
    function();
    //function内部的this指向window(浏览器),GLOBAL(nodejs)

下面用几个例子来加深印象:

一、obj中的this

1.1简单对象

    var person = {
        name:'xiaoming',
        say:function(){
            alert(this.name)
        }
    }
    person.say();//xiaoming

调用say函数的对象是person，故this指向person

1.2window对象

    var person = {
        name:'xiaoming',
        say:function(){
            alert(this.name)
        }
    }
    var name = 'teacher';
    var test = person.say;
    test();//teacher

test前面没有对象，即调用它的是window对象，所以this指向window

1.3内部函数(常见误区)

    var name = 'window';
    var person = {
        name:'xiaoming',
        say:function(){
            var test = function(){
                alert(this.name)
            }
            test();
        }
    }
    person.say();//window

这一个是最容易让人迷惑的，由于在执行test的时候，前面是没有obj的，所以this自动指向了全局对象window

1.4借用函数

    var name = 'window';
    var person = {
        name:'xiaoming',
        say:function(){
            alert(this.name);
        }
    }
    var cat = {
        name:'Tom',
        say:person.say    
    }
    cat.say();//Tom

say:person.say这行代码实际上是把person.say所指向的函数直接赋值给了cat.say，cat.say()的时候say指向的对象是cat，所以结果为Tom

1.4.2借用函数（错误示例）

    var name = 'window';
    var person = {
        name:'xiaoming',
        say:function(){
            alert(this.name);
        }
    }
    var cat = {
        name:'Tom',
        say:person.say()    
    }
    cat.say;//xiaoming

为了跟借用函数做对比，给person.say后面加上括号，同时把cat.say()的括号去掉，这时输出的值变成了xiaoming。原因就是此时的cat.say不在是一个函数，而是执行person.say这个函数的命令

1.5与作用域链对比

//作用域链
    var name = 'window';
    var person = {
        say:function(){
            alert(name);
        }
    }
    person.say();//window
//obj链
    var name = 'window';
    var person = {
        name:'xiaoming',
        say:{
            test:function(){
                alert(this.name);
            }
        }
    }
    person.say.test();//undefinded

举这个例子只是为了说明，存在作用域链，即在当前作用域下找不到某个变量的时候，会沿着作用域链往上查找。而不存在obj链（事实上根本就没听过这种说法），但是有时候会直觉认为obj链是存在的。事实是当前的obj没有某个属性时，使用this.name并不会自动调用上一级obj的name属性，而是返回undefinded

二、构造函数中的this

2.1简单构造函数

    var Person = function(){
        this.name = 'xiaoming';
        this.say = function(){
            alert(this.name);
        }
    }
    var test = new Person();
    test.say();//'xiaoming'

跟obj中的一样test在new的时候有了name这个属性

2.2跟window的区别

    var Person = function(){
        var name = 'xiaoming';
        this.say = function(){
            alert(this.name);
        }
    }
    var test = new Person();
    test.say();//'undefinded'

在全局中使用var 定义一个变量name。可以用this.name 或者 window.name 访问到这个变量，但是在对象的构造函数中使用var 定义一个变量name，使用this.name是无论如何也不能访问到的（使用var实际上是一个临时变量，当构造函数结束就被销毁了，而this.name可以在外部访问到，不会被销毁）

2.3内部函数

    var name = 'window';
    var Person = function(){
        this.name='xiaoming';
        var test = function(){
            alert(this.name);
        }
        this.say = function(){
            test(); 
        }
    }
    var p = new Person();
    p.say();//window

又是一个坑，test()前面没有obj，所以是全局对象window

回调函数

callback函数內的this会指向于调用该callback的函数中this所指向之对象

3.1

放大招

如果还是搞不清楚this到底指向的对象是谁，就只好这样了

var name = 'window';
console.log(this);
console.log(this.name);
var person = {
    name:'xiaoming',
    say:function(){
        console.log(this);
        console.log(this.name);
        var test = function(){
            console.log(this);
            console.log(this.name);
        }
        test();
    }
}
var cat = {
    name : 'Tom',
    say : person.say
}
person.say();
cat.say();

自己chrome右键慢慢看吧。

参考资料：
阮一峰-Javascript的this用法
this用法整理