轻松搞定javascript中this的指向

　　关于javascript中this指向的问题，现总结以下，若有不正确，欢迎指正。

　　javascript中，this的指向并非在函数定义的时候肯定的，而是在其被调用的时候肯定的。也就是说，函数的调用方式决定了this指向。记住：this 就是一个指针，指向咱们调用函数的对象。

　　在此将javascript中this的调用方式分为如下几种：

一、直接调用：

　　直接调用是指经过 funName(..) 这种方式调用。此时，函数内部的this指向全局变量。

function foo() {
    console.log(this === global);
}
foo(); //true

　　注意：直接调用并非仅仅指在全局做用域下进行调用，而是说在任何做用域下经过funName(..) 这种方式调用。以下两个例子亦是属于直接调用方式：

　　a、使用bind函数改变外层函数的做用域，而后在内层直接调用，其this指向依然是全局变量：

function foo() {
    console.log(this === global);
}

function foo1() {
    foo();
};
var foo2 = foo1.bind({}); //改变foo1函数的做用域
foo2(); //true 依然指向全局变量

　　b、函数表达式，将一个函数赋值给一个变量，而后经过直接调用的调用方式调用此函数，其this指向依然是全局变量：

var obj = {
    foo: function(){
        console.log(this === obj);   //false
        console.log(this === global);//true
    }
}
var f = obj.foo;
f();

二、方法调用：

　　方法调用是指经过对象来调用其方法函数，相似于obj.foo(..)的调用方式。此时，this指向调用该方法的对象，注意，是最终调用该方法的对象。

var obj = {
    foo1: function(){
        console.log(this === obj);
    }
}
obj.foo2 = function() {
    console.log(this === obj);
}
function foo3() {
    console.log(this === obj);
}
obj.foo3 = foo3;
obj.foo1(); // true
obj.foo2(); // true
obj.foo3(); // true

三、new 调用：

　　在es5中，经过 new Constructor() 的形式调用一个构造函数，会建立这个构造函数实例，而这个实例的this指向建立的这个实例。以下例所示，在构造函数内部使用this.name并无改变全局变量name的值。

var name = "全局";
function Person(name){
    this.name = name;
}
var p = new Person("局部");
console.log(p.name);
console.log(name);

上述三种状况是常见的调用方式，如下还有一些特殊的调用方式：如bind、call、apply以及es6中箭头函数。

四、bind函数对this的影响

　　bind函数用于绑定this的指向，而且返回一个绑定函数，此函数绑定了this指向，注意：绑定函数的this指向将不可再次更改。

var obj = {};
function foo1() {
    console.log(this === obj);
}
foo1(); //false  此时属于上述直接调用的方式，所以其this指向global
var foo2 = foo1.bind(obj);
foo2(); //true 绑定函数的this指向其绑定的对象
/**
 * 注意：绑定函数的this指向不可更改
 */
var foo3 = foo2.bind({'a': 1});
foo3(); //true 
foo2.apply({'a': 1}); //true 
foo2.call({'a': 1});  //true

五、apply和call对this指向的影响

　　apply和call亦能够用于改变this指向，而且返回执行结果。关于bind、apply和call的区别以及实现能够参考个人博客：《bind、call、apply的区别与实现》，在此不作重复说明。须要注意的一点是：apply和call不能够改变绑定函数(使用bind返回的函数)的this指向。

var obj = {};
function foo1() {
    console.log(this === obj);
}
var foo2 = foo1.bind({'a': 1});
/**
 * 注意：此处并非绑定函数，所以其返回值依然是ture，即apply改变其this指向。
 */
foo1.apply(obj); //true
/**
 * 注意：此处是绑定函数，所以不可再经过apply和call的形式改变其this指向。
 */
foo2.apply(obj); //false

六、es6箭头函数中的this

　　箭头函数没有本身的this绑定，其使用的this是其直接父级函数的this。也就是说，箭头函数内部的this是由其直接外层函数（方法）决定的，而外层函数中的this是由其调用方式决定的。

const obj = {
    foo: function() {
        const inner = () => {
            console.log(this === obj);
        };
        inner();
    },
    far: function() {
        return () => {
            console.log(this === obj);
        }
    }
}
/**
 * inner()内的this是foo的this，其指向取决于foo的调用方式
 */
obj.foo(); //true
var foo1 = obj.foo;
foo1();    //false 此时应该指向global

const far1 = obj.far();
far1();    //true
const far2 = obj.far;
far2()();  //false 此时应该指向global

6.1 箭头函数常见错误及其解决方案：

1. 在对象上定义函数：

   const test = {
       array: [1, 2, 3],
       sum: () => {
           console.log(this === window); // => true
           return this.array.reduce((result, item) => result + item);
       }
   };
   test.sum();
   // TypeError: Cannot read property 'reduce' of undefined

   缘由就是，箭头函数没有它本身的this值，箭头函数内的this值继承自外围做用域。

   对象方法内的this指向调用这个方法的对象，若是使用箭头函数，this和对象方法在调用的时候所处环境的this值一致。由于 test.sum()是在全局环境下进行调用，此时this指向全局。

   解决方法也很简单，使用函数表达式或者方法简写（ES6 中已经支持）来定义方法，这样能确保 this 是在运行时是由包含它的上下文决定的。

   const test = {
       array: [1, 2, 3],
       sum() {
           console.log(this === test); // => true
           return this.array.reduce((result, item) => result + item);
       }
   };
   test.sum();
   // 6

2. 定义原型方法

   在对象原型上定义函数也是遵循着同样的规则

   function Person(name) {
       this.name = name;
   }
   
   Person.prototype.sayName = () => {
       console.log(this === window); // => true
       return this.name;
   };
   
   const cat = new Person('Mew');
   cat.sayName(); // => undefined

   使用传统的函数表达式就能解决问题

   function Person(name) {
       this.name = name;
   }
   
   Person.prototype.sayName = function() {
       console.log(this === Person); // => true
       return this.name;
   };
   
   const cat = new Person('Mew');
   cat.sayName(); // => Mew

3. 定义事件回调函数

   this是JS中很是强大的特色，他让函数能够根据其调用方式动态的改变上下文，而后箭头函数直接在声明时就绑定了this对象，因此再也不是动态的。

   在客户端，在DOM元素上绑定事件监听函数是很是广泛的行为，在DOM事件被触发时，回调函数中的this指向该DOM，可是，箭头函数在声明的时候就绑定了执行上下文，要动态改变上下文是不可能的，在须要动态上下文的时候它的弊端就凸显出来:

   const button = document.getElementById('myButton');
   button.addEventListener('click', () => {
       console.log(this === window); // => true
       this.innerHTML = 'Clicked button';
   });

   由于这个回调的箭头函数是在全局上下文中被定义的，因此他的this是window。换句话说就是，箭头函数预约义的上下文是不能被修改的，这样 this.innerHTML 就等价于 window.innerHTML，然后者是没有任何意义的。

   使用函数表达式就能够在运行时动态的改变 this：

   const button = document.getElementById('myButton');
   button.addEventListener('click', function() {
       console.log(this === button); // => true
       this.innerHTML = 'Clicked button';
   });

4. 定义构造函数

   若是使用箭头函数会报错。
   显然，箭头函数是不能用来作构造函数。

   const Message = (text) => {
       this.text = text;
   };
   const helloMessage = new Message('Hello World!');
   // Throws "TypeError: Message is not a constructor"

   理论上来讲也是不能这么作的，由于箭头函数在建立时this对象就绑定了，更不会指向对象实例。

箭头函数带来了不少便利。恰当的使用箭头函数可让咱们避免使用早期的.bind()函数或者须要固定上下文的地方而且让代码更加简洁。

箭头函数带来了不少便利。恰当的使用箭头函数可让咱们避免使用早期的.bind()函数或者须要固定上下文的地方而且让代码更加简洁。

　　以上是我的对JavaScript中this的理解，欢迎您的留言。
欢迎访问个人我的博客了解更多信息。

参考文献：
一、《JavaScript 的 this 指向问题深度解析》
二、《ES6使用箭头函数注意点》