this指向问题

Posted 2020-10-19

在JS中，this一般有四种绑定的方式，但是在确定到底是哪种绑定之前必须先找到函数的调用位置。接下来先介绍其中的三种：

1、默认绑定

　　其实所谓的默认绑定就是函数直接调用（前面没有什么东西来点它），在默认绑定的非严格模式中，this 指向 window 

function test(){
        console.log(a)  // 1
    }
var a = 1
test()

在这个地方可能会有人想问，如果是在另一个函数 foo 中调用函数 test 呢 ？ 其实 this 指向的还是 window 。可以这样想  

test()=window.test()

2、隐士绑定

　　故名思意“你没有看到在哪绑定的”，在这里要考虑的是调用的位置有没有上下文对象，或者是被对象包含之类的

function test(){
        console.log(this.a)
}
var obj = {
    a:1,
    text:test
}
test()  // undefined
obj.text()   // 1

在这个地方可能有人会想不通了。为什么 obj.text() 之后执行的确实函数 test ，其实在这个地方 属性 text 里面放的是函数 test 的引用。在这因为函数调用的上下文对象是 obj ，所以this 指向了 obj。如果有很多层引用，那么this 就是指向最后一个

var b = obj.text
var a = 2
b() // 2

在这个地方 b 其实是拿到了函数 test 的引用，所以还是遵循默认绑定。还有一个值得一提的地方是：向函数传递参数其实是一种隐形赋值，感兴趣的可以去试试

3、new 绑定

　　说到 new 了解过 Java 的人应该都知道，但是 JS 中的 new 和 Java 中的不是一个东西。

new 的作用：

　　　　　　1、构建一个全新的对象（注意是全新）

　　　　　　2、新对象会绑定到函数调用的 this

　　　　　　3、如果 new 的这个函数没有返回对象，那么new之后就会自动返回这个对象

        function test(a){
            console.log(this)   // test{}
            this.a=a
            console.log(this)   // test{a:2}

        }
        console.log(test) // f test(){}
        var b = new test(2)
        console.log(b.a)  //2

其实还可以在 test 函数里面返回一个对象，那样在 b 里面保存的就是这个返回对象

在这里涉及到了原型链就不讲了，等后面专门挑个时间好好写写原型链

其实关于 this 还有 call、apply、bind、箭头函数可写，但是在这就不写了。这个礼拜好好梳理一下这些东西，然后再分享出来，顺便会写到优先级的问题。

第一次写，不喜欢勿喷，如果有什么问题可以留言。我学JS是也从别人那学了很多东西，所以现在把我知道的分享出来，共同进步。2018年加油吧