class语法

最新推荐文章于 2024-10-27 11:25:22 发布

多看书少吃饭

最新推荐文章于 2024-10-27 11:25:22 发布

阅读量136

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_56818823/article/details/127480445

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!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>class语法</title>
  </head>
  <body>
    <!--  
      除了JS语言之外, 其他编程语言 以JAVA为首, 都采用的是 class 语法来管理对象相关的操作
      JS独创了原型设计

      呼声: 从其他语言中转型到JS语言的程序员, 希望JS能引入class语法来管理对象
      JS 在ES6的新特性中增加了 class 语法
    -->

    <script>
      // S的原型写法
      function Test(a, b) {
        // let this = {}
        this.a = a
        this.b = b
        // this.__proto__ = Test.prototype
        // return this
      }
      //
      Object.defineProperty(Test.prototype, 'show', {
        value: function () {
          console.log('我是show')
        },
      })

      var a = new Test(10, 20)
      console.log(a)

      ///
      // class语法
      // class中: 同时封装了构造函数 和 原型的方法
      class Demo {
        // 固定名称的属性: constructor
        // new运算符, new Demo() 就会触发此固定名称的方法
        constructor(a, b) {
          this.a = a
          this.b = b
        }

        // class语法中: 相关的原型方法直接写到此处即可
        // 省略 function 前缀
        show() {
          console.log('我是show')
        }
        // 从其他语言转入的人: 都排斥 构造函数.prototype 的语法

        talk() {}
        ab() {}
        cc() {}
      }

      // 可以认为: class语法 就是 原型写法的 语法糖

      var d = new Demo(10, 20)
      console.log(d)
      // d.show: d中没有show, 则到原型中查找使用
      d.show()
    </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>Document</title>
  </head>
  <body>
    <script>
      // 静态属性: 就是对象的属性

      // 遗憾: JAVA中没有下方这种语法
      // var b = { name: 'MIKE' }
      // console.log(b.name)
      // console.log(b)

      class a {
        static name = 'MIKE'
        static age = 29
      }
      // 相当于: JS的 {name:'MIKE', age:29}
      // 但是JAVA的class语法, 需要用 static 标注

      console.dir(a)
      console.log(a.name)
      console.log(a.age)
    </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>
  </head>
  <body>
    <!-- 
      面向对象开发的 三大特征: 封装 继承 多态
      - 封装: 用{}把很多代码括起来,形成一个整体
      - 继承: 在JS中就是原型链特征, 自己没有到原型中找
     -->
    <script>
      var a = { name: 'MIKE', age: 33 }
      console.log(a)
      // 替换对象类型的原型
      // set:设置 prototype:原型  of: ...的
      Object.setPrototypeOf(a, Array.prototype)
      // 把 a 的原型, 换成 Array.prototype

      // 换原型的作用:
      function sum() {
        console.log('arguments:', arguments)
        // 想用数组的高阶函数: reduce 计算
        // arguments:的原型是 Object, 是伪数组, 没有高阶函数
        // 原型换成数组的
        Object.setPrototypeOf(arguments, Array.prototype)
        var t = arguments.reduce((total, value) => total + value, 0)
        console.log(t)
      }

      sum(12, 3, 23, 34, 45, 45, 6, 765)
    </script>

    <script>
      // 创建对象类型时, 指定其原型
      // create: 创建
      // 一个普通对象在创建时, 指定其原型是谁
      // new Array(); new Date(); -- 单一,专业
      // create: 万能方式
      var p = Object.create(Array.prototype)

      var p = Object.create(Date.prototype)

      p.age = 11
      p.sex = 33
      console.log(p)
    </script>

    <script>
      // JAVA中: 类也可以指定 父类(原型)
      class Father {
        constructor() {
          this.a = 3
        }

        show() {}
      }

      // extends: 继承 Father 类, Demo创建出的对象的原型, 就是Father创建的对象
      // 方法在原型中存储, 属性会存到顶层对象里, 即 show 和 a 的差异
      class Demo extends Father {}
      // 继承: 父的东西 都会 传递给子使用

      var d = new Demo()
      console.log(d)
    </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>Document</title>
  </head>
  <body>
    <!-- 
      面向对象的三大特征 
      1. 封装: {}把代码括起来, 形成一个整体 -- 例如 函数的{},对象的{}
      2. 继承: 原型链特征 -- 自己没有的属性, 到原型__proto__中查找
             -- 其他语言中: 爸爸的资源给了儿子用
      3. 多态: 多种状态 -- 同样的方法 在 父子中触发, 效果不同,多种状态
    -->
    <script>
      // 重写: 继承-子可以拥有父类所有的方法和属性, 但是子可以声明 同名的方法和属性, 来代替从父类继承的
      class Father {
        show() {
          console.log('我是父类')
        }
      }
      class Son extends Father {
        // 重写: 父类中的方法, 在子类中声明同名方法, 则使用时优先用自身的重写方法
        show() {
          // 关键词: super  -- 指定调用父类的方法
          // 与this关键词对应,  this代表当前对象
          super.show() //打印出 :  我是父类
          console.log('我是子类')
        }
      }

      var s = new Son()
      console.log(s)

      s.show()
    </script>
  </body>
</html>