关于JS中this指向问题的探究

写在前面

本篇文章的所有例子来源都是《JS设计模式与开发实践》这本书，写这篇文章之前也去查阅了很多关于this指向问题的探讨，包括但不仅仅有像阮一峰老师，还有很多的博主的帖子，还是决定写这篇文章有以下几个原因，第一，加深自己的理解，重新理一遍关于这方面的知识，第二，我尽可能的使用通俗简单的说辞进行解释
力求让更多的人明白这个东西，第三，this是js中的一个关键字，很有必要单独拿出来写一篇文章。最后一个原因是记录以下拜读这本书的过程！

js中的this

this

this的指向

如果不考虑常用的with和eval的情况下，具体到实际应用中，this的指向大致可以分为下面四类：

• 作为对象的方法调用
• 作为普通函数调用
• 构造器调用
• Function.prototype.call 或者 Function.prototype.apply调用
  下面我们一个一个说

作为对象的方法调用

var obj = {
        a : 1,
        getA:function () {
            console.info(this === obj) // true
            console.info(this.a)   // 1
        }
    }
    obj.getA()

作为普通函数调用

    window.name = "globalName"
    var getName = function () {
        return this.name
    }
    console.info(getName()) //globalName

• 或者这样写

    window.name = "globalName"
    var obj = {
        name: 'seven',
        getName: function () {
            return this.name
        }
    }
    var getName = obj.getName;
    console.info(getName()) //globalName

window.id = "windows"
    document.getElementById('div1').onclick = function () {
        console.info(this.id) //div1
        var callback = function () {
            console.info(this.id) //windows
        }
        callback()
    }

window.id = "windows"
document.getElementById('div1').onclick = function () {
        console.info(this.id) //div1
        var that = this;
        var callback = function () {
            console.info(that.id) //div1
        }
        callback()
    }

作为构造器调用

var myClass = function () {
        this.name = "seven"
    }
    var obj = new myClass()
    console.info(obj.name) //seven

var myClass = function () {
        this.name = "seven"
        return {
            name: "anna"
        }
    }
    var obj = new myClass()
    console.info(obj.name) //anna

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

var obj = {
        name : 'seven',
        getName : function () {
        return this.name
        }
    };
    var obj2 = {
        name : 'anna'
    };
    console.info(obj.getName()) //seven
    console.info(obj.getName.call(obj2)) //anna

this丢失的情况

var obj = {
        myName : 'seven',
        getName : function () {
         return this.myName
        }
    };
    console.info(obj.getName()); //seven
    var getName2 = obj.getName;
    console.info(getName2()) //undefined

• 我们再看一种情况

  var getId = document.getElementById
  getId('div1')

• 修复以后的代码：

document.getElementById = (function (func) {
        return function () {
            return func.apply(document, arguments)
        }
    })(document.getElementById)
    var getId = document.getElementById
    var div = getId('div1')
    console.info(div.id) //div1

最后

其实this指向的问题和JS中很多别的不好理解的概念差不多，用的多了就明白了为什么那么写，很多的时候我们看到一个错，就知道需要使用let that = this类似这样的代码块解决，究其原因是他很理解错误的原因吗？其实是见的比较多了罢了，实践出真知，共勉！