ES5 function & ES6 class & method type
2024-08-28 01:59:07
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
静态方法 / static 方法, 直接在
ES5 constructor或ES6 class上添加的方法实例方法 / property 方法, 直接在
ES5 constructor或ES6 class内添加的方法原型方法 / prototype 方法, === 实例方法, 直接在
ES5 constructor或ES6 class的 prototype 上添加的方法私有方法 / private 方法,
保护方法 / protected 方法,
prototype
继承，多态
https://kangax.github.io/compat-table/es6/
refs
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！
最新文章
- 再谈SQL Server中日志的的作用
- linux 常用命令学习记录
- Java学习随笔4：Java的IO操作
- 【Oralce】时间操作
- java控制台输入
- cvc-elt.1: Cannot find the declaration of element 'beans'
- win8 客户端源码
- 集中式（CVS、SVN）VS分布式（Git）
- Unsupported major.minor version 52.0错误解决 Ubuntu JDK8 安装配置
- cas单点登录系统：客户端(client)详细配置
- [ASP.NET MVC] Razor 布局
- 64、django之模型层（model）--建表、查询、删除基础
- SQLite事务与自增深度分析
- Android 实现形态各异的双向侧滑菜单 自定义控件来袭
- 前端js总结
- javascript的ES6学习总结(第二部分)
- vue 用checkbox 做多选，带选中样式
- 【webdriver自动化】整理API框架（主要是关键字，具体例子在本地）
- 【转】Django 图表制作（By Highcharts）
- MDK972-EK开发板裸调试设置和裸机程序烧写（转）