编程大白话之-this指向

今天我们来说一说this指向，在很多的网站及博客中都可以看到介绍this指向的文章，人们都说：this不是在创建时就决定了的，而是由执行环境决定。
那么什么是执行环境，this又怎样来根据执行环境来决定指向谁的呢？
要我来说其实可以简单地理解为：最后谁调用它this就指向了谁。

• 全局环境中的this指window
• 其他函数中的this指向调用它的对象
• 在setTimeout、setInterval 或无主的匿名函数，将来都是由window调用，所以里面的this都指向了window
• 事件函数的this指向了绑定它的人

根据上面的描述，下面我们分别举几个简单的例子来看一下，请一一进行比较：

function fn() {
            console.log(this);      // window
        }

        fn();

单纯的调用函数，此时this指向了window。

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

        obj.fn();

对象环境中，此时this的指向为obj对象。

var timer = setInterval(function () {
            console.log(this);        // window

            clearInterval(timer);
            timer = null;
        });

无主的匿名函数，将来都是由window调用

从上面的内容我们可以看出，this的指向是改变的，除了执行环境之外，我们也可以通过属性手动的进行更改，下面我们一起来了解一下更改this指向的方法
call apple bind

1. 通过call的方法来改变this指向，立即执行

var szc = {
        name: 'szc',
        say: function (a, b) {
            console.log(this.name, a, b);           // lls 1 2
        }
    }
    var lls = {
        name: 'lls'
    }

    szc.say.call(lls, 1, 2)    

2. 通过apply的方法来改变this指向,以数组的形式传入参数，立即执行

 var szc = {
        name: 'szc',
        say: function (a, b) {
            console.log(this.name, a, b);           // lls 3 4
        }
    }
    var lls = {
        name: 'lls'
    }

    szc.say.apply(lls, [3, 4])    

3. 通过bing的方法来改变this指向,返回一个值，不会立即执行，在需要的时候进行调用执行，改变this指向时或调用返回值时都可以进行传参

 var szc = {
        name: 'szc',
        say: function (a, b, c, d, e) {
            console.log(this.name, a, b, c, d, e);              // lls 6 7 8 9 10
        }
    }
    var lls = {
        name: 'lls'
    }

    var newFn = szc.say.bind(lls, 6, 7);
        newFn(8, 9 ,10);

以上的方法使用起来都非常的简单、方便。但是有没有想过我们自己使用一些原生的方法，自己来封装一下代码，起到和他们相同效果的方法呢？如果你想！那么向下看~！

我们以这两个对象为例子，下面就不重复了，直接写方法：

var szc = {
            name: 'szc',
            say: function (a, b, c, e, f, g) {
                console.log(this.name, a, b, c, e, f, g)
            }
        }

        var wxy = {
            name: 'wxy',
            say: function () {
                
            }

        }

封装模拟call的方法

Function.prototype.myCall = function(that, ...argu) {
        that = that || window;                  // 如果没有传，则默认为window
        var fn = this;                           // this指向了say
        var fnName = this.name + new Date() * 1;    // 为了防止覆盖原有的函数，所以添加一个随机时间，可以区别之前的函数
        that[fnName] = fn;                       // 在that对象上添加一个函数
        that[fnName](...argu);                  // 执行函数(接收参数)
        delete that[fnName];                    // 使用完后删除
    }
    szc.say.myCall(lls, 1, 2);

封装模拟apply的方法

Function.prototype.myApply = function(that, argu) {
           that = that || window;
           var fn = this;
           var fnName = this.name + new Date() * 1;
           that[fnName] = fn;
           that[fnName](...argu);
           delete that[fnName];
       }
       szc.say.myApply(lls, [1, 2]);

封装模拟bind的方法

Function.prototype.myBind = function(that, ...argu) {
            var self = this;
            return function() {
                var newP = argu.concat(...arguments);
                self.myApply(that, newP);                
            }
        }
        var newFn2 = szc.say.myBind(lls, 12, 123);        
        newFn2(5, 6);                           // 返回的函数是由window下来调用，可里面执行的this却是你改变的对象的，是因为在函数内部隐性的调用了一次改变this指向的方法。

以上就是this指向的一些基本的方法，如果有哪些不对的地方还望大神多多指教~！