ES5、ES6类的定义

 ES5定义类

1、类名首字母一般都是大写 

2、可以当成普通函数调用,但一般都通过new关键字调用,通过关键字调用会生成一个新的对象

3、通过new关键字创建的对象,给当前的this绑定成新创建的对象

4、给当前类定义一个方法,通常绑定在原型上

    <script>
      function Person(name, age) {
        this.name = name;
        this.age = age;
      }
      Person.prototype.running = function () {
        console.log(this.age, this.name, "running");
      };
      var p = new Person("why", 18);
      console.log(p.name, p.age);
      p.running();
    </script>

 ES6定义类

1、想要给类中传值,在ES6里面所有的类都可以实现一个方法 constructor(构造方法)

2、类中定义方法直接写在类里面,与ES5中原型绑定方法效果是一致的

类的定义: 

      // ES6定义类
      class Person {
        // 构造方法:在创建类的时候会创建一个方法
        // 通过new关键字创建实例的时候会被执行
        constructor(name, age) {
          this.name = name;
          this.age = age;
        }
        // 定义方法
        running() {
          console.log(this.name, this.age, "running");
        }
      }
      const p = new Person("why", 18);
      p.running();

      // this绑定
      // call 可以主动给一个函数绑定this
      let func = p.running;
      var obj = {
        name: "edit",
        age: 1,
      };
      // func.call(obj);
      func = func.bind(obj);
      func();

类的继承

 面向对象有三大特性

1、封装

2、继承

        (1)减少重复代码

        (2)多态的前提(弱类型语言鸭子类型)

3、多态

    <script>
      class Person {
        constructor(name, age) {
          this.name = name;
          this.age = age;
        }
        running() {
          console.log("running");
        }
      }

      class Student extends Person {
        constructor(name, age, sno) {
          // 构造器中如果有继承需要初始化父类对象,父类中才会有相关东西,才能调用this,  super必须调用
          super(name, age);
          this.sno = sno;
        }
      }
      const stu = new Student("why", 18, 151);
      console.log(stu.age, stu.name, stu.sno);
      stu.running();

      class Student extends Person {
        constructor(name, age, title) {
          super(name, age);
          this.title = title;
        }
      }
    </script>

相关推荐

  1. ES5ES6定义

    2024-04-25 13:18:02       31 阅读
  2. es6es5es6 class 有什么区别

    2024-04-25 13:18:02       45 阅读
  3. ES6ES5区别?

    2024-04-25 13:18:02       51 阅读
  4. es5es6 区别?

    2024-04-25 13:18:02       56 阅读
  5. es5es6区别

    2024-04-25 13:18:02       52 阅读
  6. Es6Es5区别?

    2024-04-25 13:18:02       27 阅读
  7. ES6 扩展

    2024-04-25 13:18:02       42 阅读
  8. this在Es5Es6区别

    2024-04-25 13:18:02       54 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-25 13:18:02       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-25 13:18:02       101 阅读
  3. 在Django里面运行非项目文件

    2024-04-25 13:18:02       82 阅读
  4. Python语言-面向对象

    2024-04-25 13:18:02       91 阅读

热门阅读

  1. stm32程序死机怎么回事

    2024-04-25 13:18:02       38 阅读
  2. 大数的指数运算

    2024-04-25 13:18:02       33 阅读
  3. 设备驱动-随记

    2024-04-25 13:18:02       29 阅读
  4. 电力电子技术——整流电路详解

    2024-04-25 13:18:02       31 阅读
  5. 在Visual Studio Code中配置C++编译器的一般步骤

    2024-04-25 13:18:02       40 阅读
  6. flutter 设置全屏 和隐藏状态栏和导航栏

    2024-04-25 13:18:02       38 阅读
  7. 2024-04-24 游戏开发-区块链游戏-记录

    2024-04-25 13:18:02       37 阅读