ES6中类与对象三个注意点

最新推荐文章于 2022-04-03 11:15:36 发布

1oneLee

最新推荐文章于 2022-04-03 11:15:36 发布

阅读量189

点赞数

分类专栏： JavaScript 文章标签： javascript es6

本文链接：https://blog.csdn.net/qq_27575925/article/details/108336662

版权

JavaScript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

ES6中类与对象三个注意点

在ES6中类没有变量提升，所以必须先定义类，才能通过类实例化对象
类里面的共有属性和方法一定要加this使用
注意类里面的this指向问题
总结：constructor里面的this指向的是实例对象，方法里面的this指向这个方法的调用者

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>点击</button>
    <script>
        // 三个注意点：
        // 1. 在ES6中类没有变量提升， 所以必须先定义类， 才能通过类实例化对象
        // 2. 类里面的共有属性和方法一定要加this使用
        // 3. 注意类里面的this指向问题
        // 总结：constructor里面的this指向的是实例对象，方法里面的this指向这个方法的调用者

        var that;
        var _that;
        class Star {
            // constructor 的作用是创建一个实例
            // constructor 里面的 this 指向的是 创建的实例对象
            constructor(uname, age) {
                that = this;
                console.log(this); // constructor里面的this指向的是实例对象(返回Star对象)
                this.uname = uname;
                this.age = age;
                // this.sing();
                // sing(); // 不加this会报错 类里面的共有属性和方法一定要加this使用
                this.btn = document.querySelector('button');
                this.btn.onclick = this.sing; // 注意sing后面不加小括号，我们希望点击之后调用，加了小括号会立即调用
                // 上面一行代码会返回btn、hi、undefined、刘德华
            }
            sing() {
                // 这个sing方法里面的this 指向的是 btn 这个按钮，因为这个按钮调用了这个函数
                console.log(this);
                console.log('hi');
                // console.log(uname); // 会报错，没有加this
                console.log(this.uname); // （返回undefiend）
                console.log(that.uname); // that 是一个全局变量（返回刘德华）
            }
            dance() {
                // 这个dance里面的this 指向的是实例对象 ldh，因为ldh调用了这个函数
                _that = this;
                console.log(this);
            }
        }

        // 下面实例化必须放在类的定义之后 否则会报错
        var ldh = new Star('刘德华');
        // ldh.sing();
        console.log(that === ldh); //返回true
        ldh.dance(); //（返回ldh 这个实例对象）
        console.log(_that === ldh); // 返回true
    </script>
</body>

</html>

控制台的输出结果如下图所示：
在这里插入图片描述