ES5、ES6类的定义

简介: ES5和ES6都支持类的定义,但ES6引入了更简洁的语法。在ES5中,类是函数,方法绑定在原型上;而ES6使用`class`关键字,构造方法为`constructor`,方法直接定义在类内。ES6的类继承使用`extends`关键字,子类需调用`super`初始化父类属性。示例展示了Person类及其Student子类的定义和方法调用。

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();

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);

类的继承

面向对象有三大特性

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;
    }
  }
相关文章
|
6月前
|
JavaScript
es5和es6的区别
es5和es6的区别
55 0
|
6月前
|
存储 JavaScript 前端开发
ES6学习(10)ES6的继承
ES6学习(10)ES6的继承
|
1月前
|
安全
ES5/ES6 的继承除了写法以外还有什么区别
ES5 和 ES6 的继承主要区别在于实现机制和语法糖。ES5 通过原型链和构造函数模拟类的继承,而 ES6 引入了 class 关键字,使继承更加直观和简洁,支持 super 调用父类方法,提升了代码可读性和维护性。
|
6月前
|
前端开发
es6的一些方法
es6的一些方法
33 0
|
6月前
ES6学习之对象
ES6学习之对象
|
6月前
|
前端开发 JavaScript API
ES6和ES5的区别
ES6和ES5的区别
47 0
ES5的继承和ES6的继承有什么区别
ES5的继承和ES6的继承有什么区别
69 0