ES6语法中类（class）的实现原理

原创

伯爵

修改于 2019-10-12 10:41:20

2K0

修改于 2019-10-12 10:41:20

文章被收录于专栏：前端小菜鸟

JavaScript语言不同于其他的类C语言，没有提供类的概念，但是可以提供类似的语法糖来实现JS面向对象的编程范式，本质上不是严格意义上的类

我们创建一个Person对象，包含两个属性name，age和一个普通的方法run()和静态方法say()。

ES6 class

class Person {
     constructor(name, age) {
    	this.name = name;
      	this.age = age;
    }
  
    static run() {
      console.log("run")
    }
    say() {
    	console.log("hello!")
    }
}

Person.run();

通过 static 关键字定义静态方法，静态方法只能通过类本身去调用，不能通过实例来调用。

ES6构造函数

var Person = function () {
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }

    Person.run = function run() {
        console.log("run");
    };

    var _proto = Person.prototype;

    _proto.say = function say() {
        console.log("hello!");
    };
    return Person;
}();

ES5原理

function _defineProperties(target, props) { 
    for (var i = 0; i < props.length; i++) { 
        var descriptor = props[i]; 
        descriptor.enumerable = descriptor.enumerable || false; 
        descriptor.configurable = true; 
        if ("value" in descriptor) descriptor.writable = true; 
        Object.defineProperty(target, descriptor.key, descriptor);
    } 
}

function _createClass(Constructor, protoProps, staticProps) { 
    if (protoProps) _defineProperties(Constructor.prototype, protoProps); 
    if (staticProps) _defineProperties(Constructor, staticProps);
    return Constructor; 
}

var Person = function () {
  function Person(name, age) {
    if(!(this instanceof Person)) {
        throw new TypeError("Cannot call a class as a function")
    }
    this.name = name;
    this.age = age;
  }

  _createClass(Person, [{
    key: "say",
    value: function say() {
      console.log("hello!");
    }
  }], [{
    key: "run",
    value: function run() {
      console.log("run");
    }
  }]);

  return Person;
}();