ES6中的this指向问题

先看这段代码：

class student { 
    constructor (uname,age) {
        this.uname = uname;
        this.age = age;
    }
    get() {
        console.log(uname);
    }
}
var stu = new student('小杰',18);
stu.get();

最后的输出会报错吗？

答案是肯定的，因为get方法里uname没有加this

那么为什么需要加这个this呢

因为uname在get方法里面，get有这个参数么，他没有参数。我们想要的是实例化对象中的uname，也就是stu对象的uname:'小杰'。而this指向的就是我们创建的实例化对象，所以必须加上这个this才能找到实例化对象。

上面这段代码中，我们通过stu对象来手动调用的get方法，那如果想在创建实例化对象的时候就调用它呢？在我们new的同时，就会自动调用constructor构造函数，所以我们可以在constructor里面调用get方法。

class student { 
    constructor (uname,age) {
        this.uname = uname;
        this.age = age;
        get();
    }
    get() {
        console.log(this.uname);
    }
}
var stu = new student('小杰',18);

是像这样直接在constructor里调用吗？答案还是错误的

因为get方法定义在类里，它是属于实例对象的，所以我们需要告诉别人是哪一个对象调用的get方法，所以需要加this,因为this就是指向的我们创建的实例化对象。我们只需要记住一句：类里面的共有的属性和方法一定要加this使用！

如果我们想实现在单击一个按钮的时候，自动调用get方法，应该怎么做呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>点击</button>
    <script>
        class student { // 父类
            constructor (uname,age) {
                this.uname = uname;
                this.age = age;
                this.btn = document.querySelector('button');
                this.btn.onclick = this.get;
            }
            get() {
                console.log(this.uname);
            }
        }
        var stu = new student('小杰',18);
    </script>
</body>
</html>

注意：constructor中在btn和get之前都必须加this。否则是不知道哪一个实例对象调用的。

只不过我们在点击按钮时输出的是undefined，这又是为什么呢？

普通函数this取决于谁调用，谁调用我，this就指向谁，跟如何定义，定义在哪无关

如果我们在下面打印stu.get()的时候，this指向的还是实例对象，当只有我们点击按钮时，get中的this才指向btn

我们在get里面打印this，看看在点击按钮时输出的是什么：

这个get方法里面的this指向的是btn这个按钮，因为是这个按钮调用了它

一句话总结：constructor里面的this指向实例对象，方法里面的this指向这个方法的调用者

最后一个问题：我们就想实现点击按钮时打印'小杰'，应该怎么办呢？

我们可以这样做：

 var that;
class student { // 父类
      constructor (uname,age) {
           that = this;
           this.uname = uname;
           this.age = age;
           this.btn = document.querySelector('button');
           this.btn.onclick = this.get;
      }
      get() {
           console.log(that.uname);
      }
}
var stu = new student('小杰',18);

定义一个全局变量that，然后在构造函数里把this赋给that，这样that里面存储的就是construcotr里面的this了

输出结果：

ES6中的this指向问题

猜你喜欢