JavaScript进阶-面向对象（ES6中的类和对象）

最新推荐文章于 2024-10-16 17:24:41 发布

Hello 码上秃

最新推荐文章于 2024-10-16 17:24:41 发布

阅读量118

点赞数

分类专栏： JavaScript笔记文章标签： javascript 前端

本文链接：https://blog.csdn.net/DAZZPNB/article/details/124264334

版权

JavaScript笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文详细讲解了ES6中JavaScript的类和对象创建，包括基本语法、类的继承机制、构造函数的使用以及类和对象的注意事项。通过实例演示了如何创建类、继承父类属性和方法，并讨论了类的变量提升问题以及this指向的复杂性。

摘要由CSDN通过智能技术生成

文章目录

- - 三、JavaScript进阶-面向对象

三、JavaScript进阶-面向对象

ES6中的类和对象

创建类和对象

<!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>Title</title>
</head>
<body>
 <script>
     /**
         * (1) 通过class 关键字创建类, 类名习惯性定义首字母大写
         * (2) constructor() 方法是类的构造函数(默认方法)，用于传递参数,返回实例对象，通过 new 命令生成对象实例时，自动调用该方法。
         * (3) 如果没有显示定义 constructor(), 类内部会自动给我们创建一个constructor()
         * (4) 方法之间不能加逗号分隔，同时方法不需要添加 function 关键字。
         */
        class Star {
            constructor(uname, age) {
                this.uname = uname
                this.age = age
            }

            say() {
                console.log('Hello')
            }
        }

        let ldh = new Star('刘德华', 18)
        console.log(ldh)
        ldh.say()
    </script>
</body>
</html>

类的继承

<!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>Title</title>
</head>
<body>
 <script>
     class Father {
         money() {
             console.log('father赚了100￥')
         }
     }
  	 class Son extends Father { // 这样子类就继承了父类的属性和方法
     }
     let son = new Son()
     son.money()
     /************************ 默认调用父类构造器 ************************/
     class Father2 {
         constructor(x) {
             this.x = x
         }
         money() {
             console.log(`father赚了${100 + this.x}￥`)
         }
     }
     class Son2 extends Father2 {
     }
     let son2 = new Son2(100)
     /** 继承中,如果子类里面没有这个方法,就去查找父类有没有这个方法,如果有,就执行父类的这个方法(就近原则) */
     son2.money()
     /************************ super 关键字 ************************/
     class Father3 {
         constructor(x, y) {
             this.x = x
             this.y = y
         }
         money() {
             console.log(`father赚了${100 + this.x + this.y}￥`)
         }
         say() {
             console.log(`我是father，我自己赚了${100 + this.x + this.y}￥`)
         }
     }
     class Son3 extends Father3 {
         constructor(x, y, n) {
             /** 子类在构造函数中使用super, 必须放到 this 前面  (必须先调用父类的构造方法,在使用子类构造方法) */
             super(x, y) // 调用父类的constructor(x, y)
             this.x = x // 定义子类独有的属性
             this.y = y
             this.sonMoney = n
         }
         say() {
          /** super 关键字用于访问和调用对象父类上的函数。可以调用父类的构造函数，也可以调用父类的普通函数 */
             super.say() // super 调用父类的方法
             console.log(`我是son，我自己赚了${this.x + this.y + this.sonMoney}￥`)
         }
     }
     let son3 = new Son3(100, 100, 100)
     son3.money()
     /** 继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类的 */
     son3.say()
</script>
</body>
</html>

类和对象的注意点

<!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>Title</title>
</head>
<body>
 <button>点击输出</button>
 <script>
     var _that
     class Star {
         constructor(uname, age) {
             _that = this
             /** constructor 里面的this指向实例对象 */
             this.uname = uname
             this.age = age
             /** 类里面的共有属性和方法一定要加this使用 */
             // this.sing()
             this.btn = document.querySelector('button')
             this.btn.onclick = this.sing
         }
         sing() {
          /** 方法里面的this 指向这个方法的调用者 */
             console.log(this.uname) // 输出 undefined ，因为此时 sing() 里面的 this 指向 btn 按钮
             console.log(_that.uname) // 输出 刘德华 ，因为 that 里面存储着 constructor 里面的 this
         }
     }
     /** 在 ES6 中类没有变量提升，所以必须先定义类，才能通过类实例化对象 */
     /** 类里面的this指向实例化对象 */
     let person = new Star('刘德华', 21)
 </script>
</body>
</html>