分享点干货（此this非彼this）this的详细解读

在javascript编程中，this关键字经常让初学者感到迷惑，这里，针对此this根据查阅的资料和个人的理解分享一下，纯手打，大神勿喷。

首先先说一下this的指向，大致可以分为以下四种。

1.作为对象的方法调用。

2.作为普通函数调用。

3.构造器调用。

4.Function.prototype.call或者是Function.prototype.apply调用。

这四种调用很重要，如果能彻底理解了，应该不会再对这个this感到迷惑了。

1.作为对象的方法调用

        var obj = {
            value: 1,
            getValue: function() {
                console.log(this === obj);//输出 true
                console.log(this.value); //输出 1
            }
        };
        obj.getValue();

2.作为普通函数调用

当函数不作为对象的属性被调用时，也就是普通的函数调用方式，通常来讲，this是指向全局对象的，在浏览器里，也就是window对象。

        window.name = "michael";
        var obj = {
            name:"tom",
            getName:function() {
                return this.name;
            }
        };
        var getName = obj.getName;
        console.log(getName()); //输出  michael

 

 3.构造器调用

除了宿主提供的一些内置函数，大部分的javascript函数可以当构造器来使用，它和普通函数的区别在于被调用的方式。当使用new来调用的时候，通常是返回一个对象，构造器里的this就指向这个返回的对象。

        var myClass = function(){
            this.name = "michael";
        };
        var obj = new myClass();
        console.log(obj.name);// 输出michael

 

但是，使用new调用的时候，还需要注意这样一个问题，如果构造器显式返回一个object类型的对象的时候，那么这次最终返回的是这个对象，而不是this.

        var myClass = function(){
            this.name = "michael";
            return {//显式返回一个对象
                name:"tom"
            };
        };
        var obj = new myClass();
        console.log(obj.name);// 输出tom

 

上述情况需要特殊注意.

4.Function.prototype.call或者是Function.prototype.apply调用

 与第二种普通函数调用相比，call或者apply可以动态改变this的指向，听着蛮高大上的。

        var obj = {
            name:"michael",
            getName:function() {
                return this.name;
            }
        };
        var obj2 = {
            name:"tom"
        };
        console.log(obj.getName()); //输出  michael
        console.log(obj.getName.call(obj2)); //输出  tom

 

通过代码分析来看，显然this的指向已经人为的改变了。

以上就是关于this的一点小小的分享。

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。