彻底搞懂JavaScript 之 ES6新特性class(类)

重整旗鼓的程序猿

已于 2023-07-18 18:53:52 修改

阅读量83

点赞数

文章标签： javascript es6 前端

于 2023-02-24 11:42:39 首次发布

本文链接：https://blog.csdn.net/m0_56063262/article/details/129197557

版权

文章对比了ES5中的构造函数和ES6中的Class语法，说明了Class是如何从构造函数进化而来的。在ES5中，通过function定义构造函数，而在ES6的Class中，构造函数被重构成constructor方法，属性和方法的定义更加简洁。Class的语法主要是对构造函数和方法定义的语法糖改进。

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

其实很容易理解这个class，它就是ES5的构造函数进化而来的。

ES5构造函数

// ES5
function Person(name, age) {
  this.name = name
  this.age = age
  this.sing = function(musicName) {
    consloe.log("musicName", musicName);
  }
}

const person = new Person('刘德华', 22)
console.log(person.name)  // 刘德华
console.log(person.age)  // 22
person.sing('开心的马骝') // 开心的马骝

ES6---class（类）

// ES6
class Stack {
      constructor(name, age) {
        this.name = name;
        this.age = age;
        this.arr = [];
      }
      in(value) {
        this.arr.push(value);
      }
      top() {
        console.log(this.arr[0]);
      }
      out() {
        console.log(this.arr.shift());
      }
      size() {
        console.log(this.arr.length);
      }
}


const obj = new Stack();
    obj.in('x') 
    obj.in('y')
    obj.in('z')
    obj.top() // Z
    obj.size() // 3
    obj.out() // Z
    obj.top() // y
    obj.size() // 2

对比之后你不难发现，其实就是把ES5的Person(name, age)抽到ES6的constructor（name, age）{}函数中。构造函数中除了属性为函数之外的属性都放到constructor函数中去定义。悟：ES6class中constructor（）方法就是new一个实例需要传的参数，也可以传函数作为参数。