javascript中this的指向问题

 this存在于哪里？

this是一个很特别的关键字，被自动定义在所有函数的作用域中。

 

为什么要使用this，好处是什么？

能将“显式”传参转化为“隐式”传参。更简洁且易于复用。

function say1(){
            let message = "Hello,My name is " + this.name; 
            console.log(message);
        }
           var I = {name: "Mary"};
           var You = {name: "Lily"};
           say1.apply(I);    //Hello,My name is Mary
           say1.apply(You);        //Hello,My name is Lily

           //对比:
           function say2(obj){
            let message = "Hello,My name is " + obj.name; 
            console.log(message);
        }
        var I = {name: "Mary"};
           var You = {name: "Lily"};
           say2(I);        //Hello,My name is Mary
           say2(You);        //Hello,My name is Lily

这么好。该如何使用，又有什么难点呢？

 

我们对this有什么误解呢？

　1、认为this指向函数自身

foo.count = 0;
var count = 0;
function foo(num){
console.log("foo: "+num);
console.log(this);
this.count++;
}

for(let i=0;i<5;i++){
if(i>2){
foo(i); //foo: 3 foo: 4
}
}
//与我们设想的结果不一样,显然，this并不是指向函数自身
console.log(foo.count); //0
console.log(count); // 2  （增加数量的是window下的count）

        //解决方法1：（回避this问题）
        bar.count = 0;
        function bar(num){
            console.log("bar: "+num);
            bar.count++;
        }

        for(let i=0;i<5;i++){
            if(i>2){
                bar(i);        //bar: 3      bar: 4
            }
        }
        console.log(bar.count);        //2

        //解决方法2：修改this的指向
        baz.count = 0;
        function baz(num){
            console.log("baz: "+num);
            this.count++;
        }
        for(let i=0;i<5;i++){
            if(i>2){
                baz.call(baz,i);        //baz: 3      baz: 4
            }
        }
        console.log(baz.count);        //2

　　2、认为this指向该函数的作用域。

var a = 454;
function foo(){
var a = 2;
bar();
}

function bar(){
console.log(this.a);
}
//bar() 中的this 是无法访问到foo() 词法作用域中的变量a的
foo(); //454 （访问到的是最外层window下的变量a）

那么，

this的指向是什么呢？

this 的原理类似于我们之前在  作用域  里面提到的动态作用域，是在运行时才进行绑定的，也就是说它的指向完全取决于函数在哪里被调用。

//当前 调用位置 是 当前调用栈 的上一级
        function foo(){
            //当前调用栈是：foo ； 当前调用位置是：全局作用域
            console.log('foo');
            bar();
        }
        function bar(){
            //当前调用栈是：foo>bar ； 当前调用位置是：foo
            console.log('bar');
            baz();
        }
        function baz(){
            //当前调用栈是：foo>bar>baz ； 当前调用位置是：foo>bar
            console.log('baz');
        }
        
        foo();    

 

this的绑定规则是什么呢？有没有什么规律

有四种，分别是 ： 默认规则、隐式绑定、显示绑定、new绑定。

1、默认绑定：直接使用不带任何修饰的函数引用进行调用，才使用默认绑定，指向全局对象。（注意：严格模式下，不能使用）

function foo(){
            console.log(this.a);
        }
        var a = 2;
        foo();        //2

        //严格模式下不能使用默认模式
        function bar(){
            "use strict";
            console.log(this.a);
        }
        var a = 2;

        bar();        //Cannot read property 'a' of undefined 

2、隐式绑定：

对象属性引用链：最后一层控制this上下文。常出现的问题（通常出现在调用函数别名和调用回调函数）是隐式丢失，使用了默认规则

function foo(){
            console.log(this.a);
        }
        const obj1 = {
            a: 1,
            foo: foo
        };
        const obj2 = {
            a: 2,
            foo: obj1.foo,
            bar:obj1
        };

        var a = 3;
        obj2.foo();        //2
        obj2.bar.foo();        //1

        var baz = obj1.foo;
        //隐式丢失(调用函数别名)，使用默认规则，这时的this指向全局对象
        baz();    //3
        //对比：此时使用的隐式规则
        obj1.foo();        //1

        function doFun(fn){
            fn();
        }
        //隐式丢失（调用回调函数），使用默认规则，这时的this指向全局对象
        doFun(obj1.foo);    //3

3、显式绑定

与原型有关，可以通过call() 和 apply() 来修改this的指向

function foo(b,c){
            console.log(this.a);
            console.log(b,c);
        }

        var a = 0;
        foo(2,3);        //0     2 3   
        var obj = {
            a:'obj',
            b:'foo-a',
            c:'foo-b'
        };
        //call() 和 apply() 只有参数格式不同的区别
        foo.call(obj,obj.b,obj.c);    //obj     foo-a foo-b
        foo.apply(obj,[obj.b,obj.c]);    //obj     foo-a foo-b

call() 的实现原理：

Function.prototype.myCall = function(context,...args){
            let cxt = context || window;
            //将当前被调用的方法定义在cxt.func上.(为了能以对象调用形式绑定this)
            //新建一个唯一的Symbol变量避免重复
            let func = Symbol();
            console.dir(this);  //getName()  ---> 这里是隐式绑定，
            cxt[func] = this;
            args = args ? args : []
            //以对象调用形式调用func,此时this指向cxt 也就是传入的需要绑定的this指向
            const res = args.length > 0 ? cxt[func](...args) : cxt[func]();
            //删除该方法，不然会对传入对象造成污染（添加该方法）
            delete cxt[func];
            return res;
        }

        let obj = {
            name: "obj",
            getName(){
                console.log(this.name);
            }
        };
        let obj1 = {
            name: "obj1"
        };

        obj.getName.myCall(obj1);  // obj1

3.1 显式绑定的变种（硬绑定）能解决前面的隐式丢失的问题

var a = 1;
        function foo(b=''){
            console.log(this.a,b);
        }
        var obj1 = {
            a: 2,
            foo:foo
        };
        var obj2 = {
            a: 3,
            b:obj1.foo,
            c:obj1
        };
        
        //隐式规则
        obj2.b();    //3
        obj2.c.foo();    //2
        //默认规则
        foo();        //1

        //隐式丢失的两种情况： 函数别名 和 回调函数
        var bar = obj2.b;
        bar();   //1

        setTimeout(obj2.c.foo,100);        //1

        //解决方法：硬绑定
        var bar1 = function(){
            obj2.b.call(obj2,arguments[0]);
        }
        bar1('bar1');        //3 "bar1"

        var bar2 = function(){
            obj2.c.foo.call(obj1,arguments[0]);
        }
        bar2('bar2');        //2 "bar2"

4、new 绑定

使用new操作符调用的函数被我们称之为  “构造函数 ”。它与普通函数并没有什么区别，只是被new操作符调用而已。发生构造函数调用时，会自动执行下面的操作：

　　（1）创建（或者说构造）一个全新的对象。

　　（2）这个新对象会被执行【原型】连接。

　　（3）这个新对象会绑定到函数调用的this。

　　（4）如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象。

function foo(){
            this.a = 2;
        }
        
        bar = new foo();
        console.log(bar.a);        //2

 

上面这四种规则的优先级是什么呢？

new绑定 > 显示规则 > 隐式规则 > 默认规则

function foo(){
            console.log(this.a);
        }
        var obj1 = {
            a: 1,
            foo: foo,
            baz:baz
        };
        var a = 2;
        //隐式
        obj1.foo();        //1
        //显示
        obj1.foo.call(window);        //2
        //结论：显式 > 隐式

        function baz(num){
            this.a = num;
        }
        obj1.baz('隐式规则');
        console.log(obj1.a);        //隐式规则
        var bar = new obj1.baz("new模式");
        console.log(obj1.a);        //隐式规则
        console.log(bar.a);        //new模式
        //结论： new模式 > 隐式
        
        console.log("..........");
        var fn = baz.bind(window);
        fn(3);
        console.log(a);        //3
        var obj = new fn(100);
        //等价于
        var obj1 = new (baz.bind(window))(100);
        console.log(obj1.a);    //100
        console.log(obj.a);        //100
        //结论： new模式 > 显式

 

规则以外的意外

万事总有例外，并不总是遵循上面 的规则。如一下情况：

1、被忽略的this

　　在调用call 或 apply 时， 第一参数传入了null 或 undefined 来进行this 的绑定，此时使用的是默认规则。 一般这么做，只是占位而已，函数中都不会调用到this，但不排除某些函数用到了this。所以为了安全起见，还是传入一个空的对象更好。

//通常的情况
        function foo(a,b){
            console.log(`${a}...........${b}`);
        }
        foo.call(null,3,4);        //3...........4

        //最好使用
        var NONE = Object.create(null);
        foo.call(NONE,3,4);        //3...........4

2、es6中的箭头函数

　　不适用上面的四个规则，是根据外层的作用域来确定 this 的，用更常见的词法作用域来代替传统的this机制。

var a = 1;
        function fun(fn){
            fn();
        }
        function foo(){
            fun(()=> {
                console.log(this.a);
            });
        }
        var obj = {
            a: 2
        };
        //这里的箭头函数跟外层的 foo() 指向一致
        foo();        //1
        foo.call(obj);        //2

        //等价于(定义变量替换this，绕过this机制)
        function foo1(){
            var self = this;
            fun(function (){
                console.log(self.a);
            });
        }
        //等价于（使用bind()修改this指向）
        function foo2(){
            fun(function (){
                console.log(this.a);
            }.bind(foo2));
        }
        //效果跟上面的箭头函数是一样的
        foo1();        //1
        foo1.call(obj);        //2
        foo2();        //1
        foo2.call(obj);        //2

3、隐式丢失

　　在前文介绍隐式规则的时候已经有提到了，这里就不再多说。

 

总结

　　this的内容大概就这么多。重点是看函数运行时来确定this 的绑定，绑定的规则有：new绑定（使用new关键字生成的实例） > 显式规则 （通过call() 、apply()、bind()等方法来修改this的指向）> 隐式规则（通过对象属性的引用，由最后一层控制this的指向） > 默认规则（其他规则都不适用时，使用默认规则，一直都指向全局对象）。不过有些this的绑定并不遵守上面的规则，例如：ES6中的箭头函数、使用函数别名和回调函数后出现的隐式丢失等情况。