首页 > 编程语言 >JavaScript中的类

JavaScript中的类

时间:2023-12-20 10:35:44浏览次数:37  
标签:return 子类 JavaScript value static msg 构造函数

作用

类是用于创建对象的模板

用法

  1. 声明(具名和匿名两种。函数声明和类声明之间的一个重要区别在于,函数声明会提升,类声明不会。)
  2. 原型方法(constructor() : 一个类只能一个,实例对象的时候会执行,如果没有定义,会自动生成)
  3. 静态方法(关键字为static, 通常用于为一个应用程序创建工具函数【例如:创建或克隆对象】。通过类直接调用,方法中不存在this)
  4. extends (继承)
  5. super (超类) :
  6. Mix-ins (混入)

原因:解决子类无法多重继承的问题

  1. # (私有) 只能在类内部调用

可以搭配 getter 和 setter ,暴露给外界使用

  1. 公有静态字段:

特点:一个类只存一份数据。可以用它存放缓存数据、固定结构数据或者其他你不想在所有实例都复制一份的数据。

  1. 实例字段:

顺序: 在本类构造函数之前添加。
父类实例字段----父类构造函数---子类实例字段---子类构造函数

例子

// 超类
	class Polygon {
		#msg = 'hello world';
		constructor(width, height) {
			this.width = width;
			this.height = height;
			// 类名调用静态方法
			Polygon.staticMethod();
		}
		static baseStaticMethod() {
			return 'base static method output';
		}
		get msg() {
			return this.#msg;
		}
		set msg(value) {
			this.#msg = `hello ${value}`;
		}
		// 静态调静态,用this, 其他都是用类名
		static staticMethod () {
			return 'Static method has been called';
		}
		static anotherStaticMethod() {
			return this.staticMethod();
		}
	}
	
	// 子类 extends
	class Square extends Polygon {
		// 公有静态字段
		static staticField = super.baseStaticMethod();
		// 构造函数
		constructor(length) {
			// 关键字 super
			super(length, length);
		}
		get area() {
			return this.height * this.width;
		}
		set area(value) {
			this._area = value;
		}
	}
	```

标签:return,子类,JavaScript,value,static,msg,构造函数
From: https://www.cnblogs.com/zxn-114477/p/17915919.html

相关文章

  • javascript Pipe方法执行流
    pipe的概念很简单,就是将n个函数组合起来,他是一个从左到右的流,每个函数执行的时候都传入之前函数的结果。下面写一个返回一个人名字的函数:getName=(person)=>person.name;getName({name:"Buckethead"})//返回"Buckethead"接下来写一个将字符串大写的函数uppercase=(......
  • JavaScript中val()、html()、text()区别
    区别在前端开发中,val()、html()、text()三个方法都是用来获取或设置元素的内容。它们的区别在于:val()方法用于获取或设置表单元素的value属性的值。html()方法用于获取或设置元素的HTML内容,包括标签和文本。text()方法用于获取或设置元素的纯文本内容,不包括标签。事......
  • jQuery与JavaScript与ajax三者的区别与联系
    简单总结:1、JS是一门前端语言。2、Ajax是一门技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新。3、jQuery是一个框架,它对JS进行了封装,使其更方便使用。jQuery使得JS与Ajax的使用更方便 关系比喻:若把js比作木头,那么jquery就是......
  • 什么是 JavaScript 闭包?
    什么是JavaScript闭包?在JavaScript中,闭包是指一个函数能够访问在它外部定义的变量。这些变量通常被称为“自由变量”,因为它们不是该函数的局部变量,也不是该函数的参数。闭包可以在函数内部创建,也可以在函数外部创建。JavaScript中的每个函数都是一个闭包,因为它们都能够访问......
  • JavaScript 文件优化指南
    本文将探讨实用的JavaScript文件优化技术、如何处理与JavaScript文件相关的性能问题以及帮助优化过程的工具。你将获得提升web应用程序速度的相关知识,从而为你的用户提供无缝体验。JavaScript文件是web应用程序的重要组成部分,但网站速度和用户体验对网站的成功至关重要。......
  • JavaScript 执行上下文
    一旦整个JavaScript程序运行,就会创建执行上下文。全局执行上下文已创建。它有两个组件,变量环境和变量。执行线程,它分两个阶段创建。第一阶段,是创建阶段。在创建阶段,我们为全局空间内的所有变量和函数分配内存。我们分配了一个未定义的变量。对于函数,我们实际上存储整个函数。这......
  • JavaScript 中 let、var 和 const 的区别及使用建议
    前言JavaScript中的let、var和const是三种不同的变量声明方式。虽然它们都可以用来声明变量,但它们之间有很大的区别。在本篇文章中,我们将深入探讨这三种变量声明方式的区别以及它们在实际开发中的应用。正文内容一、let的用法let是ES6中新增的变量声明方式,它的作用域......
  • JavaScript高频题整理(附答案背诵版)
    1、简述JavaScript中map和foreach的区别?map和forEach都是JavaScript数组的迭代方法,但它们之间存在一些关键区别。返回值:map方法会返回一个新的数组,这个新数组是由原数组通过某个函数处理后的结果组成的。而forEach方法则没有返回值,它仅仅是对数组中的每个元素执行一次给定的函......
  • JavaScript中的现代运算符:?.、?? 和 ??=
    在JavaScript中,?.、??和??=是相对较新的运算符,分别用于可选链、空值合并和空值合并赋值。这些运算符提供了更加简洁和安全的方式来处理未定义(undefined)或空(null)的值。JavaScript的发展一直在不断进步,近年来,ES6及后续版本引入了许多实用的新特性。其中,?.、??和??=这三个运算......
  • 在浏览器中使用 JavaScript 实现截屏并保存图片的完整指南
    前言在现代的Web应用程序中,有时用户需要能够在浏览器中进行截屏并保存截取的内容为图片。本文将详细介绍如何使用JavaScript在浏览器中实现截屏并保存为图片的功能,并提供一个完整的指南以及示例代码。获取屏幕截图使用HTML5的canvas元素在JavaScript中,我们可以使用H......