es6中class类的静态方法、实例方法、实例属性、(静态属性)
关于类有两个概念,1,类自身,;2,类的实例对象
总的来说:静态的是指向类自身,而不是指向实例对象,主要是归属不同,这是静态属性的核心。
难点1:静态方法的理解
class Foo {
static classMethod() {
return 'hello';
}
}
静态方法使用:在方法前加上static关键字
为什么使用静态方法:阻止方法被实例继承,类的内部相当于实例的原型,所有在类中直接定义的方法相当于在原型上定义方法,都会被类的实例继承,但是使用static静态方法定义的不会被实例继承,而且可以被实例直接应用Foo.classMethod(),此时写成new Foo.classMethod()会提示不存在此方法
静态方法中this指向:this指向类而不是类的实例
class Foo {
static bar () {
this.baz();
}
static baz () {
console.log('hello');
}
baz () {
console.log('world');
}
} Foo.bar() // hello
继承相关:静态方法可以被子类继承,也可以被super调用 (要与实例区分开)
-----------------------------------------------------------------------------------------------------------------------
难点2:静态属性的理解,以及和实例属性的区别
理解了静态的本质就知道静态属性是class类自身的属性
相对的实例属性是指类的实例的属性,调用时使用 new Foo().'属性名'
定义实例属性的方法:2种
类的实例属性可以用等式,写入类的定义之中
1,在类中定义
class MyClass {
myProp = 42; constructor() {
console.log(this.myProp); //
}
} //上面代码中,myProp就是MyClass的实例属性。在MyClass的实例上,可以读取这个属性。
2,在constructor中定义(react中经典写法)
class ReactCounter extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
} //等价于
class ReactCounter extends React.Component {
state = {
count: 0
};
}
定义静态属性,
1,就和普通的Object添加属性一样,object.a = a;(目前唯一一种方法)
缺点:老写法的静态属性定义在类的外部。整个类生成以后,再生成静态属性。容易忽略
2,静态属性的提案: 相对于实例方法定义,在定义实例方法的前面加上static关键字,该方法未发布
class MyClass {
static myStaticProp = 42; constructor() {
console.log(MyClass.myStaticProp); //
}
}
下面练习个小例子
class F{
constructor(){//实例化时会被调用
this.a="父类的实例属性";
console.log(this);//指向类本身
}
static fun(){
console.log("父类的静态方法");
console.log(this);//执行类自身
console.log(this.b);//"父类的静态属性"
}
fun2(){
console.log(this);//指向实例
console.log(this.a);
}
}
F.b="父类的静态属性";//给F类加静态方法
F.fun();
var f=new F;
//f.fun();//fun not a function
f.fun2();
es6中class类的静态方法、实例方法、实例属性、(静态属性)的更多相关文章
- koa 基础(十八)es6中的类、静态方法、继承
1.app.js /** * es6中的类.静态方法.继承 */ // 定义Person类 class Person { constructor(name, age) { /*类的构造函数,实例化的时 ...
- Nodejs与ES6系列4:ES6中的类
ES6中的类 4.1.class基本语法 在之前的javascript语法中是不存在class这样的概念,如果要通过构造函数生成一个新对象代码 function Shape(width,height) ...
- ES6中的类
前面的话 大多数面向对象的编程语言都支持类和类继承的特性,而JS却不支持这些特性,只能通过其他方法定义并关联多个相似的对象,这种状态一直延续到了ES5.由于类似的库层出不穷,最终还是在ECMAScri ...
- Es5中的类和静态方法 继承
Es5中的类和静态方法 继承(原型链继承.对象冒充继承.原型链+对象冒充组合继承) // es5里面的类 //1.最简单的类 // function Person(){ // this.name='张 ...
- 160803、如何在ES6中管理类的私有数据
如何在ES6中管理类的私有数据?本文为你介绍四种方法: 在类的构造函数作用域中处理私有数据成员 遵照命名约定(例如前置下划线)标记私有属性 将私有数据保存在WeakMap中 使用Symbol作为私有属 ...
- TypeScript完全解读(26课时)_8.ES6精讲-ES6中的类(进阶)
8.TypeScript完全解读-ES6精讲-类(进阶) 在index.ts内引入 Food创建的实例赋值给Vegetabled这个原型对象,这样使用Vegetables创建实例的时候,就能继承到Fo ...
- koa 基础(十七)原生 JS 中的类、静态方法、继承
1.app.js /** * 原生 JS 中的类.静态方法.继承 * es5中的类和静态方法 */ function Person(name, age) { // 构造函数里面的方法和属性 this. ...
- ES6中的类继承和ES5中的继承模式详解
1.ES5中的继承模式 我们先看ES5中的继承. 既然要实现继承,首先我们得要有一个父类. Animal.prototype.eat = function(food) { console.log(th ...
- es6中class类的全方面理解(一)
传统的javascript中只有对象,没有类的概念.它是基于原型的面向对象语言.原型对象特点就是将自身的属性共享给新对象.这样的写法相对于其它传统面向对象语言来讲,很有一种独树一帜的感脚!非常容易让人 ...
随机推荐
- Spring-Cloud之Ribbon负载均衡-3
一.负载均衡是指将负载分摊到多个执行单元上,常见的负载均衡有两种方式.一种是独立进程单元,通过负载均衡策略,将请求转发到不同的执行单元上,例如 Ngnix .另一种是将负载均衡逻辑以代码的形式封装到服 ...
- 通过Logstash由SQLServer向Elasticsearch同步数据
延用上篇ELK所需环境,新增logstash配置文件 需要数据库链接驱动 Microsoft JDBC driver 6.2 for SQL Server 下载地址: https://www.micr ...
- 1005 继续(3n+1)猜想(C#)
一.题目内容: 卡拉兹(Callatz)猜想已经在1001中给出了描述.在这个题目里,情况稍微有些复杂. 当我们验证卡拉兹猜想的时候,为了避免重复计算,可以记录下递推过程中遇到的每一个数.例如对 n= ...
- Golang中的RegExp正则表达式用法指南
------------------------------------------------------------ Golang中的正则表达式 ------------------------- ...
- C# 的ToString 常用方法
货币 2.5.ToString("C") ¥2.50 D 十进制数 25.ToString("D5") 00025E 科学型 25000.ToString(&q ...
- Python基础知识(五)------字典
Python基础知识(四)------字典 字典 一丶什么是字典 dict关键字 , 以 {} 表示, 以key:value形式保存数据 ,每个逗号分隔 键: 必须是可哈希,(不可变的数据类型 ...
- js中cssText批量修改元素样式
平常编写代码,更改一个元素样式的时候,自己都是用 obj.style.width = "200px"; obj.style.position = "absolute&qu ...
- js 数据类型检测
提起数据类型检测 大多数人首先想起的应该是 typeof 'xxx' == '数据类型' 坦然这种方法对于基本数据类型的检测还是非常方便的,但是当遇到引用数据类型 Object时却爱莫能助,下面就 ...
- springCloud学习3(Netflix Hystrix弹性客户端)
springcloud 总集:https://www.tapme.top/blog/detail/2019-02-28-11-33 本次用到全部代码见文章最下方. 一.为什么要有客户端弹性模式 所 ...
- Flask项目初始化
数据库实现命令初始化 1.实现命令主脚本 # coding=utf-8 from functools import wraps from getpass import getpass import s ...