JS 函数与方法中this指向

首先我们要知道，函数跟方法有什么不同呢？我们平时经常使用的funciton就称为函数，如果我们把这个函数作为一个对象的属性值的时候，就称这个函数为方法。

接下来我们先来看看函数与方法的this指向的区别。

首先这里声明了一个obj对象，show为这个对象属性名，且show的属性值为一个匿名函数，因此我们把这个函数称为方法。接着我们又在这个方法里面声明了一个函数并且调用。

let name = "这是window下的name";

    let obj = {
        name: "Joker",
        show: function () {
            console.log(this);
            console.log(this.name);  // ?

            function whatName() {
                console.log(this);
                console.log(this.name) // ?
            }

            whatName()
        }
    };
    obj.show();

那么方法里面打印的结果跟函数whatName的结果有什么不同呢？

从中我们可以看到，在方法里面的this指向的就是obj对象，而whatName函数中的this指的是window对象。

那我们应该怎么在whatName这个函数里面拿到obj对象中的属性值呢？

1. 我们可以通过将方法下面的this指向赋值给一个常量，然后在函数里面使用这个常量就能访问到外部的this了。

let name = "这是window下的name";

    let obj = {
        name: "Joker",
        show: function () {
            console.log(this);
            console.log(this.name);
            const that = this; //将方法里面的this指向赋值给一个常量

            function whatName() {
                console.log(that);
                console.log(that.name)
            }

            whatName()
        }
    };
    obj.show();

2.除了使用常量赋值的方法之外，我们还能使用箭头函数的方法让whatName函数获取到obj下的name。

let name = "这是window下的name";

    let obj = {
        name: "Joker",
        show: function () {
            console.log(this);
            console.log(this.name);

            let whatName = () => {
                console.log(this);
                console.log(this.name)
            };

            whatName()
        }
    };
    obj.show();

tips：这里我们可以这样理解，箭头函数中的this就是指上一层中的this指向。