ES6 Class 与 ES5 构造函数对比(Babel编译)

栏目: JavaScript · 发布时间: 5年前

内容简介:注意:name、age不是定义在原型上的属性实例属性新写法

User 类被编译以后转化为构造函数。被编译后生成了 _classCallCheck , _instanceof 方法。

class User{

}
const user = new User();
console.log(user); // {}

//↑↑↑↑↑↑↑↑↑↑↑↑↑ ES6 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑
//↓↓↓↓↓↓↓↓↓↓↓↓↓ ES5 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓

"use strict";

function _instanceof(left, right) {
  if (
    right != null &&
    typeof Symbol !== "undefined" &&
    right[Symbol.hasInstance]
  ) {
    return right[Symbol.hasInstance](left);
  } else {
    return left instanceof right;
  }
}

function _classCallCheck(instance, Constructor) {
  if (!_instanceof(instance, Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

var User = function User() {
  _classCallCheck(this, User);
};

var user = new User();
console.log(user); // {}

复制代码

普通属性

User 类有 name、age、address 三个属性, name、age 属性采用 Object.defineProperty 的方式定义属性。 虽然与 address 赋值方式不一样,但是最终的效果是一致的。

注意:name、age不是定义在原型上的属性实例属性新写法

class User{
    name = "jason";
    age = 18;
    constructor(){
        this.address = "shanxi";
    }
}

const user = new User();
console.log(user); //{ name: 'jason', age: 18, address: 'shanxi' }

//↑↑↑↑↑↑↑↑↑↑↑↑↑ ES6 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑
//↓↓↓↓↓↓↓↓↓↓↓↓↓ ES5 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }
  return obj;
}

var User = function User() {
  _classCallCheck(this, User);

  _defineProperty(this, "name", "jason");

  _defineProperty(this, "age", 18);

  this.address = "shanxi";
};
复制代码

以下代码省略了 _defineProperty , _classCallCheck , _instanceof 等公用的方法。

普通函数

sayName 函数在构造函数的原型上 调用了 _defineProperties(Constructor.prototype, protoProps);

class User{
  name = "jason";
  sayName(){
    console.log(this.name);
  }
}

const user = new User();
user.sayName()

//↑↑↑↑↑↑↑↑↑↑↑↑↑ ES6 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑
//↓↓↓↓↓↓↓↓↓↓↓↓↓ 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 User =
  (function() {
    function User() {
      _classCallCheck(this, User);

      _defineProperty(this, "name", "jason");
    }

    _createClass(User, [
      {
        key: "sayName",
        value: function sayName() {
          console.log(this.name);
        }
      }
    ]);

    return User;
  })();

var user = new User();
user.sayName()
复制代码

箭头函数

箭头函数在编译后对this做了绑定

class User{
  name = "jason";
  sayName = () => {
    console.log(this.name);
  }
}

//↑↑↑↑↑↑↑↑↑↑↑↑↑ ES6 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑
//↓↓↓↓↓↓↓↓↓↓↓↓↓ ES5 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓

var User = function User() {
  var _this = this;

  _classCallCheck(this, User);

  _defineProperty(this, "name", "jason");

  _defineProperty(this, "sayName", function() {
    console.log(_this.name);
  });
};
复制代码

静态属性

静态属性作为 构造函数 的一个属性存在

class User{
  static name = "jason";
}

//↑↑↑↑↑↑↑↑↑↑↑↑↑ ES6 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑
//↓↓↓↓↓↓↓↓↓↓↓↓↓ ES5 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓

var User = function User() {
  _classCallCheck(this, User);
};

//省略_defineProperty方法源码
//静态属性 被编译后 第一个参数是User,而普通属性则是this
_defineProperty(User, "name", "jason");
复制代码

静态方法

静态方法 sayName 作为 构造函数 的一个属性存在

class User {
  name = "jason"
  static sayName() {

  }
}

//↑↑↑↑↑↑↑↑↑↑↑↑↑ ES6 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑
//↓↓↓↓↓↓↓↓↓↓↓↓↓ 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 User =
/*#__PURE__*/
function () {
  function User() {
    _classCallCheck(this, User);

    _defineProperty(this, "name", "jason");
  }
  //静态函数编译后,第二个参数设置为null
  _createClass(User, null, [{
    key: "sayName",
    value: function sayName() {}
  }]);

  return User;
}();
复制代码

以上所述就是小编给大家介绍的《ES6 Class 与 ES5 构造函数对比(Babel编译)》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Scrum精髓

Scrum精髓

Kenneth Rubin / 姜信宝、米全喜、左洪斌、(审校)徐毅 / 清华大学出版社 / 2014-6-1 / CNY 79.00

短短几年时间,Scrum跃升为敏捷首选方法,在全球各地得以普遍应用。针对如何用好、用巧这个看似简单的框架,本书以通俗易懂的语言、条理清晰的脉络阐述和提炼出Scrum的精髓。全书共4部分23章,阐述了七大核心概念:Scrum框架,敏捷原则,冲刺,需求和用户故事,产品列表,估算与速率,技术债;三大角色:产品负责人,ScrumMaster,开发团队以及Scrum团队构成:Scrum规划原则及四大规划活动......一起来看看 《Scrum精髓》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具