javascript中this的理解

this在javascript中一直是新手难以理解的一部分。其实并不难，只要清楚几种调用模式，就容易掌握了。

函数调用模式

普通情况

var  name = 'outer';
var fn = function() {
    var name = 'inner';
    console.log(this.name);
}
fn()； // outer

回调函数

无默认绑定

var name = 'outer';
var A = function() {
    console.log(this.name);
};
var B = function(cb) {
    var name = 'inner';
    cb();
}
B(A); // outer

默认绑定

js中的事件机制，会默认绑定this

var name = 'outer';
var d = document.querySelector('div');
div.addEventListener('click', function(e) {
    console.log(this.name); // undifined
}, false)

方法调用模式

var name = 'outer;
var obj = {
    name: 'inner',
    fn: function() {
        console.log(this.name);
    }
}
obj.fn()  // inner

apply、call调用模式

var name = 'outer';
var obj = {
    name: 'inner'
}
var fn = function() {
    console.log(this.name);
}
fn() //  outer;
fn.call(obj) // inner
fn.apply(obj) // inner

构造器调用模式

var name = 'outer';
var Fn = function(name) {
    this.name = name;
}
Fn.prototype.print = function() {
    console.log(this.name)
}
var obj = new Fn('inner');
obj.print() // inner

bind, call优先级

var name = 'outer';
var obj1 = {
    name:　'inner1'
};
var obj2 = {
    name: 'inner2';
};
var fn = function() {
    console.log(this.name);
}
var f = fn.bind(obj1);
f();  // inner1
f.call(obj2)  // inner1

可以看出，bind的优先级是比call要高的，当函数fn的this绑定为obj1后，再执行f.call(obj2)，输出的name值还是name1，即this的值一直绑定为obj1。

es6的箭头函数

箭头函数的好处之一就是让我们省去了每次敲打function这个关键词，好处之二就是this值默认绑定为函数定义时的上下文，而跟调用模式无关。

var name = 'outer';
var obj = {
    name: 'inner',
    fn: ()=> {
        console.log(this.name);
    }
}
obj.fn() // outer

var name = 'outer';
var obj = {
    name: 'inner'
};
var fn = ()=> {
    console.log(this.name);
};
fn.call(obj)  // outer

var name = 'outer';
var obj = {
    name: 'inner'
};
var fn = ()=> {
    console.log(this.name);
};
var f = fn.bind(obj);
f() // outer