扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > 其他 >es6中的class有没有静态属性
  • 445

0
分享到

es6中的class有没有静态属性

ES6class 2023-05-14 22:05:16 445人浏览 八月长安
摘要

本教程操作环境：windows7系统、ECMAScript 6版、Dell G3电脑。在es6中，class (类)作为对象的模板被引入，可以通过 class 关键字定义类。class 的本质是 function。它可以看作一个语法糖，让对

es6中的class有没有静态属性

本教程操作环境：windows7系统、ECMAScript 6版、Dell G3电脑。

在es6中，class (类)作为对象的模板被引入，可以通过 class 关键字定义类。

class 的本质是 function。

它可以看作一个语法糖，让对象原型的写法更加清晰、更像面向对象编程的语法。

ES6 Class 静态方法、属性和实例属性

类相当于实例的原型， 所有在类中定义的方法， 都会被实例继承。 如果在一个方法前， 加上static关键字， 就表示该方法不会被实例继承， 而是直接通过类来调用， 这就称为“ 静态方法”。

class Foo {
	static claSSMethod() {
		return 'hello';
	}
}
Foo.classMethod() // 'hello'
var foo = new Foo();
foo.classMethod()
	// TypeError: foo.classMethod is not a function

上面代码中， Foo类的classMethod方法前有static关键字， 表明该方法是一个静态方法， 可以直接在Foo类上调用（ Foo.classMethod()）， 而不是在Foo类的实例上调用。 如果在实例上调用静态方法， 会抛出一个错误， 表示不存在该方法。
父类的静态方法， 可以被子类继承。

class Foo {
	static classMethod() {
		return 'hello';
	}
}
class Bar extends Foo {}
Bar.classMethod(); // 'hello'

上面代码中， 父类Foo有一个静态方法， 子类Bar可以调用这个方法。

静态方法也是可以从super对象上调用的。

class Foo {
	static classMethod() {
		return 'hello';
	}
}
class Bar extends Foo {
	static classMethod() {
		return super.classMethod() + ', too';
	}
}
Bar.classMethod();

静态属性

静态属性指的是 Class 本身的属性， 即Class.propname， 而不是定义在实例对象（ this） 上的属性。

class Foo {}
Foo.prop = 1;
Foo.prop // 1

上面的写法为Foo类定义了一个静态属性prop。

目前， 只有这种写法可行， 因为 ES6 明确规定， Class 内部只有静态方法， 没有静态属性。

//  以下两种写法都无效
class Foo {
	//  写法一
	prop: 2
		//  写法二
	static prop: 2
}
Foo.prop // undefined

ES7 有一个静态属性的提案， 目前 Babel 转码器支持。

这个提案对实例属性和静态属性， 都规定了新的写法。

（ 1） 类的实例属性

类的实例属性可以用等式， 写入类的定义之中。

class MyClass {
	myProp = 42;
	constructor() {
		console.log(this.myProp); // 42
	}
}

上面代码中， myProp就是MyClass的实例属性。 在MyClass的实例上， 可以读取这个属性。
以前， 我们定义实例属性， 只能写在类的constructor方法里面。

class ReactCounter extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			count: 0
		};
	}
}

上面代码中， 构造方法constructor里面， 定义了this.state属性。
有了新的写法以后， 可以不在constructor方法里面定义。

class ReactCounter extends React.Component {
	state = {
		count: 0
	};
}

这种写法比以前更清晰。

为了可读性的目的， 对于那些在constructor里面已经定义的实例属性， 新写法允许直接列出。

class ReactCounter extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			count: 0
		};
	}
	state;
}

（2） 类的静态属性

类的静态属性只要在上面的实例属性写法前面， 加上static关键字就可以了。

class MyClass {
static myStaticProp = 42;
constructor() {
console.log(MyClass.myProp); // 42
}
}

同样的， 这个新写法大大方便了静态属性的表达。

//  老写法
class Foo {}
Foo.prop = 1;
//  新写法
class Foo {
	static prop = 1;
}

上面代码中， 老写法的静态属性定义在类的外部。 整个类生成以后， 再生成静态属性。 这样让人很容易忽略这个静态属性， 也不符合相关代码应该放在一起的代码组织原则。 另外， 新写法是显式声明（ declarative）， 而不是赋值处理， 语义更好。

以上就是es6中的class有没有静态属性的详细内容，更多请关注编程网其它相关文章！

--结束END--

本文标题: es6中的class有没有静态属性

本文链接: https://lsjlt.com/news/207018.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • es6中的class有没有静态属性
    本教程操作环境：windows7系统、ECMAScript 6版、Dell G3电脑。在ES6中，class (类)作为对象的模板被引入，可以通过 class 关键字定义类。class 的本质是 function。它可以看作一个语法糖，让对...
    99+
    2023-05-14
    ES6 class
  • es6中的class有静态属性吗
    这篇文章主要介绍“es6中的class有静态属性吗”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“es6中的class有静态属性吗”文章能帮助大家解决问题。es6中的class没有静态属性。静态属性是...
    99+
    2023-07-05
  • es6中class类静态方法，静态属性，实例属性，实例方法的示例分析
    这篇文章主要为大家展示了“es6中class类静态方法，静态属性，实例属性，实例方法的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“es6中class类...
    99+
    2024-04-02
  • es6静态属性和实例属性的区别有哪些
    这篇文章主要介绍“es6静态属性和实例属性的区别有哪些”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“es6静态属性和实例属性的区别有哪些”文章能帮助大家解决问题。 ...
    99+
    2024-04-02
  • JS中关于Class类的静态属性和静态方法
    目录一、类的两个概念二、对象的两个部分1、属性 2、方法三、静态方法使用：在方法前加上static关键字1、为什么使用静态方法三、总结1、静态属性和非静态属性的区别2.使用...
    99+
    2022-11-13
    JS中Class类 Class类静态属性 Class类静态方法
  • es6如何判断对象有没有某属性
    这篇“es6如何判断对象有没有某属性”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“es6如...
    99+
    2024-04-02
  • ES6中如何实现Class类的静态方法
    这篇文章给大家分享的是有关ES6中如何实现Class类的静态方法的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个...
    99+
    2024-04-02
  • java中静态属性与动态属性的区别
    为什么static不用创建对象就可以被调用？在未创建对象之前，所有静态属性或方法都放在元数据区里，静态的可通过类名调用。例如：public class Cat{ public static String name;//静态的，不创建...
    99+
    2020-07-14
    java入门 java 静态属性 动态属性 区别
  • es6中有没有继承
    本篇内容主要讲解“es6中有没有继承”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“es6中有没有继承”吧! es6中有继承。es6中...
    99+
    2024-04-02
  • php中的静态属性和静态方法是什么
    本教程操作环境：windows7系统、PHP7.1版、DELL G3电脑在 PHP 中，通过 static 关键字修饰的成员属性和成员方法被称为静态属性和静态方法，这里可以将它们统称为静态成员，类中的静态成员与类中的一般成员不同，静态成员不...
    99+
    2021-03-06
    php 静态属性 静态方法
  • php中的静态属性和静态方法怎么用
    这篇文章主要介绍“php中的静态属性和静态方法怎么用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“php中的静态属性和静态方法怎么用”文章能帮助大家解决问题。在php中，通过static关键字修饰的...
    99+
    2023-06-26
  • es6的class有什么用
    这篇文章主要介绍了es6的class有什么用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇es6的class有什么用文章都会有所收获，下面我们一起来看看吧。es6的class关键字用于快速地定义“类”；clas...
    99+
    2023-07-04
  • es6中有没有&符号
    本教程操作环境：windows7系统、ECMAScript 6版、Dell G3电脑。es6中有&符号，“&&”是逻辑与运算符。逻辑与运算&&逻辑与运算（&&）是 AND 布尔操作。只...
    99+
    2022-11-22
    javascript ES6
  • ES6中Class和Module有什么用
    小编给大家分享一下ES6中Class和Module有什么用，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！一、ClassES6引入了Class（类）这个概念，作为对象的模板。通过class关...
    99+
    2024-04-02
  • ES6中的class类知识点有哪些
    这篇文章主要介绍了ES6中的class类知识点有哪些的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇ES6中的class类知识点有哪些文章都会有所收获，下面我们一起来看看吧。cl...
    99+
    2024-04-02
  • css3有没有图片缩小属性
    这篇文章主要介绍“css3有没有图片缩小属性”，在日常操作中，相信很多人在css3有没有图片缩小属性问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”css3有没有图片缩小属性”...
    99+
    2024-04-02
  • JavaScript中Class私有属性与私有方法的示例分析
    小编给大家分享一下JavaScript中Class私有属性与私有方法的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！pr...
    99+
    2024-04-02
  • java中的静态属性与静态方法可以被继承么
    结论：java中静态属性和静态方法可以被继承，但是没有被重写(overwrite)，而是被隐藏。原因分析：静态方法和属性是属于类的，调用的时候可以直接通过类名.方法名完成，不需要继承机制便可以调用。如果子类里面定义了静态方法和属性，那么这时...
    99+
    2016-02-05
    java 静态属性 静态方法 继承
  • HTML5里面class属性有什么用
    这篇“HTML5里面class属性有什么用”文章，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要参考一下，对于“HTML5里面class属性有什么用”，小编整理了以下知识点，请大家跟着小编的步伐一步一步的慢慢理解，接...
    99+
    2023-06-06
  • es6的class有变量提升吗
    本文小编为大家详细介绍“es6的class有变量提升吗”，内容详细，步骤清晰，细节处理妥当，希望这篇“es6的class有变量提升吗”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。es6的class没有变量提升。在...
    99+
    2023-06-29
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作