this指向

1默认绑定

直接执行一个普通函数的时候，this默认指向window

function a1 () {
    let user = '张三';
    console.log(this.user);//undefined
    console.log(this);//window
}
a1()

上面这个和下面这个都是window触发的，只不过上面这个没有写出来

function a1 () {
    let user = '张三';
    console.log(this.user);//undefined
    console.log(this);//window
}
window.a1()

2默认绑定——注意

function a1() {
    let user = '张三';
    console.log(this);//window
    a2()
}
a1()
function a2() {
    console.log(this.user);//undefined
    console.log(this)//window
}

上面这个例子，在没有了解this之前，我还以为a2里面的this.user会打印出来'张三'

但是，仔细想一下，a1里this指向window，那a2不就是window.a2()，还是指向window，太蠢了

3隐式绑定

var obj = {
    name:'张三',
    a3: function () {
        console.log(this)//这里this指向对象obj
        console.log(this.name)//张三
    }
}
obj.a3()
//window.obj.a3()

这里肯定有不少疑问，为啥没有指向window，这里的写法和上面的也没啥区别

var obj = {
    name: '张三',
    obj2: {
        name: '李四',
        a3: function () {
            console.log(this)//这里this指向对象obj2
            console.log(this.name)//李四
        }
    }
}
obj.obj2.a3()

这里可以看出来，如果这个函数是直接调用，没有经过父级，那么这个函数的this就是window

如果经过了父级调用，那么this就是他的父级

4隐式绑定——注意

var obj = {
    name: '李四',
    a1: function () {
        console.log(this)//Window 
        console.log(this.name)// 李四
    }
}
var j = obj.a1;
j();

把这个和上面比较一下会发现有点不同，没有指向父级

那是因为通过j声明了一下，并没有直接执行a1这个函数,这里要注意一下

this是谁最终执行这个函数，这个函数的this就指向谁

5.显式绑定

    var obj1 = {
        name:'张三'
    }
    function text () {
        console.log(this)//window
    }
    text()

    var obj1 = {
        name:'张三'
    }
    function text () {
        console.log(this)//{name: "张三"}
    }
    text.call(obj1)

通过call方法把函数text的this改为obj1

6. 构造函数

function text() {
    this.user = "张三";
    this.age = 20;
    console.log(this)//{user: "张三", age: 20}
}
var a = new text();//这里通过new创建了对象a
console.log(a.user); //张三
console.log(a.age); //20

得到的a就和对象一样，可以正常使用

7.总结

this指向是一个比较复杂的东西，不是那么容易理解，在日常工作中，其实通过作用域就可以实现绝大部分需求

在这里推荐一本书《你不知道的JavaScript（上卷)》。这本书对this的讲解是挺详细的

最后编辑于：2020.08.31 18:00:37