静态属性与静态方法

1. 不会被类实例所拥有的属性与方法 只是类自身拥有
2. 只能通过类调用

静态方法与普通方法重名,不会冲突
static 关键字(静态方法)

静态属性
类名.属性名 = 属性值;

1、静态属性的声明,应该在类外部,使用“类名.属性名”的方式声明。

2、静态方法的调用,应该直接在类上调用,而不是在类的实例上调用。


静态属性应用举例:

    //职业类
class Profession{ } class Character {
constructor(pfs) {
this.pfs = pfs;
}
}
// 静态属性做配置
Character.config = {
profession: {
'咒术师': 1,
'弓箭手': 2
}
}
// 创建类的实例
new Character(Character.config.profession['咒术师']);

静态方法应用举例

    class Person {
// 静态方法
static format(programmer) {
programmer.haveGirlFriend = true;
programmer.hair = true;
}
}
// 程序员类
class Programmer {
constructor() {
this.haveGirlFriend = false;
this.hair = false;
}
}
// 将程序员类的实例转为了普通类
const programmer = new Programmer();
Person.format(programmer);
console.log(programmer);

类的表达式
P只能在类的内部被访问到
就是类的自身

    const Person = class P {
constructor() {
P.a = 1;
console.log(P===Person);
console.log('我是鸽手!!咕咕咕!!');
}
} new Person(); // 自动执行
const Person1 = new class P {
constructor() {
P.a = 1;
console.log('我是鸽手!!咕咕咕!!');
}
}();

getter setter
类似于给属性提供钩子
在获取属性值和设置属性值的时候做一些额外的事情


ES5 getter/setter
1. 在对象字面量中书写get/set方法

    const obj = {
_name: '', get name() {
console.log('123');
return this._name;
}, set name(val) {
this._name = val;
}
}
obj.name = 222;
console.log(obj);

2. Object.defineProperty

    var obj = {
_name: ''
};
Object.defineProperty(obj, 'name', {
get: function() {
console.log('正在访问name');
return this._name;
},
set: function(val) {
console.log('正在修改name');
this._name = val;
}
});
obj.name = 10;
console.log(obj.name);

ES6写法:

    class Person {
constructor() {
this._name = '';
}
get name() {
console.log('正在访问name'); return `我的名字是${ this._name }`;
}
set name(val) {
console.log('正在修改name'); this._name = val;
}
}
const person = new Person();
person.name = '鸽王';
console.log(person.name);
    class AudioPlayer {
constructor() {
this._status = 0;
this.status = 0;
this.init();
}
init() {
const audio = new Audio();
audio.src = '....';
audio.oncanplay = () => {
audio.play();
this.status = 1;
}
}
get status() {
return this._status;
}
set status(val) {
const STATUS_MAP = {
0: '暂停',
1: '播放',
2: '加载中'
};
//改变按钮中的文案
document.querySelector('#app .play-btn').innerText = STATUS_MAP[val];
this._status = val;
}
}
const audio = new AudioPlayer();

name 类名

如果类表达式中,类是有名字的,name是类的名字;类没有名字的话,会是表达式中变量或者常量的名称

    class Humen {

    }
console.log(Humen.name);//Humen const Humen = class P{ }
console.log(Humen.name);//P

new.target 指向new关键字后面的类

    class Car {
constructor() {
console.log(new.target);
}
}
new Car();

语法糖

    function Car() {
if (!(this instanceof Car)) {
throw Error('必须使用new关键字调用Car');
}
}
new Car();

在es5中模拟类:
构造函数
1. 创建一个空的对象
2. 把构造函数的prototype属性 作为空对象的原型
3. this赋值为这个空对象
4. 执行函数
5. 如果函数没有返回值 则返回this[返回之前那个空对象]

    function Person(name, age) {
this.name = name;
this.age = age;
}
console.log(new Person('张三', 11));
    function Constructor(fn, args) {
// 创建的对象以fn作为原型
var _this = Object.create(fn.prototype);
// 执行函数并传递参数
var res = fn.apply(_this, args);
return res ? res : _this;
}
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.say = function() {
console.log('我叫' + this.name);
}
var person = Constructor(Person, ['张三', 12]);
console.log(person);

ES6 class(基本语法+方法)的更多相关文章

  1. [js高手之路] es6系列教程 - new.target属性与es5改造es6的类语法

    es5的构造函数前面如果不用new调用,this指向window,对象的属性就得不到值了,所以以前我们都要在构造函数中通过判断this是否使用了new关键字来确保普通的函数调用方式都能让对象复制到属性 ...

  2. Java 8新特性:新语法方法引用和Lambda表达式及全新的Stream API

    新语法 方法引用Method references Lambda语法 Lambda语法在AndroidStudio中报错 Stream API 我正参加2016CSDN博客之星的比赛 希望您能投下宝贵 ...

  3. ES6使用的一些方法

    查找数组中符合条件的所有记录 var list=[ {id:1,name:"张三"}, {id:2,name:"李四"}, {id:3,name:"王 ...

  4. ES6中Object.assign() 方法

    ES6中Object.assign() 方法 1. 对象合并Object.assign 方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象上.如下代码演示: var targ ...

  5. JavaScript(ES6之前)数组方法总结

    一.数组的创建 1.使用 Array 构造函数 var arr1 = new Array(); // 创建一个空数组 var arr2 = new Array(20); // 创建一个包含20项的数组 ...

  6. es6的常用语法

    最常用的ES6特性 let, const, class, extends, super, arrow functions, template string, destructuring, defaul ...

  7. ECMA Script 6_模块加载方案 ES6 Module 模块语法_import_export

    1. 模块加载方案 commonJS 背景: 历史上,JavaScript 一直没有模块(module)体系, 无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来. 其他语言都有这项功能: ...

  8. es6 和 python 语法比较

    http://www.linchaoqun.com/html/cms/content.jsp?id=1509528630774 Python3笔记:Python与ECMAScript部分语法对比 ht ...

  9. es6 class 中 constructor 方法 和 super

    首先,ES6 的 class 属于一种“语法糖”,所以只是写法更加优雅,更加像面对对象的编程,其思想和 ES5 是一致的. <1>constructor function Point(x, ...

随机推荐

  1. Codeforces_803

    A. 填k个1,使矩阵主对角线对称,相同情况选择上面1数量多的. #include<bits/stdc++.h> using namespace std; ][] = {}; int ma ...

  2. Nginx总结(八)启用Nginx Status及状态参数详解

    前面讲了如何配置Nginx虚拟主机,大家可以去这里看看nginx系列文章:https://www.cnblogs.com/zhangweizhong/category/1529997.html 今天简 ...

  3. SNMP协议交互学习-获取udp的udpindatagrams

    MIB的组织结构,如下左图,对于udp来说1.3.6.1.2.1.7,组织如下右图,包括4个标量和1个表格 udp节点在LwIP中的定义如下: ] = { , , , , }; ] = { (stru ...

  4. 自动化运维利器 Fabric

    Fabric 主要用在应用部署与系统管理等任务的自动化,简单轻量级,提供有丰富的 SSH 扩展接口.在 Fabric 1.x 版本中,它混杂了本地及远程两类功能:但自 Fabric 2.x 版本起,它 ...

  5. day13 JS Dom

    js两种存在形式 1:文件 2:块 放到body标签底部 防止加载js超时页面反应慢的问题 声明变量 name = "sb"; //全局变量 var age=18; //局部变量 ...

  6. Linux 报错:syntax error "C" 解决办法(此处选择bash系统)

    出现此问题的原因,是由系统的兼容性引起的,linux下默认了指向dash而非bash. linux下Dash改Bash: 1.先查看是使用哪个shell ls -al /bin/sh 2.#如果是Da ...

  7. jsplumb 常用事件

    1. jsPlumb.getAllConnections() 获取所有连接线2. jsPlumb.deleteEveryConnection(); 清空所有连接线3. jsPlumb.deleteCo ...

  8. 浮动和包含框的关系,伪元素after解决高度塌陷

    浮动会使元素尽量向左或向右移动,直到碰到包含框或另外一个浮动元素的盒子模型的边缘 包含框并不会改变里面浮动元素的宽高,浮动元素宽高不会限制在包含块以内 <!DOCTYPE html> &l ...

  9. Win10的Python3.8升级与安装

    一.前言 1.说明 博主电脑Python3.6用了有3年多了,正好疫情期间有时间,给更新到3.8版本,边安装边记录下安装流程,希望对读者有帮助 2.系统环境 联想电脑,系统Win10,上一个Pytho ...

  10. python网络爬虫(二)requests库的基本介绍和使用

    一.requests库的七个重要方法 (1)最常用方法:requests.get(url,params=None,**kwargs)//对应HTTP协议的GET()操作 (请求获得URL位置的资源) ...