ES5 function & ES6 class & method type

ES5 function & ES6 class & method type

ES5 function

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @created 2020-06-04
 * @modified
 *
 * @description ES5 constructor function
 * @augments
 * @example
 * @link
 *
 */

const log = console.log;

// ES5 constructor function
function Person(name, age) {
  // ES5 property
  this.uuid = `${name}_` + new Date().getTime();
  this.name = name;
  this.age = age;
  // ES5 instance method
  this.getName = function() {
    const name = `name: ${this.name}`;
    log(name)
    return name;
  };
  this.getAge = function() {
    const age = `age: ${this.age}`;
    log(age)
    return age;
  };
  this.getInfos = function(){
    const infos = `name: ${this.name}, age: ${this.age}, gender: ${this.gender}`;
    log(`infos`, infos)
    return infos;
  }
}

// ES5 prototype property
Person.prototype.gender = `man`;

// ES5 prototype method
// Person.prototype.getInfos = function(){
//   const infos = `name: ${this.name}, age: ${this.age}, gender: ${this.gender}`;
//   log(`infos`, infos)
//   return infos;
// }

// static method
Person.getUUID = function(person) {
  // const uuid = this.uuid;
  const uuid = person.uuid;
  log(uuid)
  return uuid;
}

const p = new Person(`elite`, 23);

// call instance method
p.getName();

// call prototype method
p.getInfos();

// call static method
// Person.getUUID();
Person.getUUID(p);

// name: elite
// infos name: elite, age: 23, gender: man
// undefined
// elite_1591279465961

// append after instance & ES5 prototype method
Person.prototype.getGender = function(){
  const gender = `gender: ${this.gender}`;
  log(gender)
  return gender;
}

p.getGender();
// gender: man

// append after instance & ES5 static method
Person.getSex = function(person){
  const sex = `sex: ${person.gender}`;
  log(sex)
  return sex;
}

Person.getSex(p);
// sex: man

ES6 class

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @created 2020-06-04
 * @modified
 *
 * @description ES6 class
 * @augments
 * @example
 * @link
 *
 */

const log = console.log;

// ES6 class
class Person {
  // ES6 constructor method
  constructor(name, age) {
    // ES6 property
    this.uuid = `${name}_` + new Date().getTime();
    this.name = name;
    this.age = age;
  }
  // ES6 instance method
  getName() {
    const name = `name: ${this.name}`;
    log(name)
    return name;
  };
  getAge() {
    const age = `age: ${this.age}`;
    log(age)
    return age;
  };
  // static method
  static getUUID(person) {
    // const uuid = this.uuid;
    const uuid = person.uuid;
    log(uuid)
    return uuid;
  }
  getInfos() {
    const infos = `name: ${this.name}, age: ${this.age}, gender: ${this.gender}`;
    log(`infos`, infos)
    return infos;
  }
}

// ES6 prototype property
Person.prototype.gender = `man`;

// ES6 prototype method
// Person.prototype.getInfos = function() {
//   const infos = `name: ${this.name}, age: ${this.age}, gender: ${this.gender}`;
//   log(`infos`, infos)
//   return infos;
// }

const p = new Person(`elite`, 23);

// call instance method
p.getName();

// call prototype method
p.getInfos();

// call static method
// Person.getUUID();
Person.getUUID(p);

// name: elite
// infos name: elite, age: 23, gender: man
// undefined
// elite_1591280013432

// append after instance & ES6 prototype method
Person.prototype.getGender = function(){
  const gender = `gender: ${this.gender}`;
  log(gender)
  return gender;
}

p.getGender();
// gender: man

// append after instance & ES6 static method
Person.getSex = function(person){
  const sex = `sex: ${person.gender}`;
  log(sex)
  return sex;
}

Person.getSex(p);
// sex: man

method type

es5 constructor & es6 class

1. 静态方法 / static 方法, 直接在 ES5 constructor 或 ES6 class 上添加的方法

2. 实例方法 / property 方法, 直接在 ES5 constructor 或 ES6 class 内添加的方法

3. 原型方法 / prototype 方法, === 实例方法, 直接在 ES5 constructor 或 ES6 class 的 prototype 上添加的方法

4. 私有方法 / private 方法,

5. 保护方法 / protected 方法,

prototype

继承，多态

https://kangax.github.io/compat-table/es6/

refs

---

---

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---