javascript中的class基础入门(1)

javascript中的class

start

  • 最近在学习：cocos ，准备自己制作小游戏。过程中遇到不少疑问，我计划将这些疑问写成一个系列博客，用以记录。
  • 这篇文章来了解 class

1. 前言

1. 前言

  1. 本文对应版本 Cocos Creator 3.8。
  2. Cocos Creator3.x编写脚本的语言是 TypeScript，在了解 TypeScript 中的语法之前，我们先掌握 javascript 中的 class。
  3. 后面为了方便描述，javascript 我简称为 js，TypeScript 简称为 ts

ts 可以理解为是具有类型语法的js，用大白话说，ts 是基于 js，扩充了类型语法。

  1. 本文仅对 class 主要内容进行说明，更详细说明可参考 阮一峰-ECMAScript 6 入门-class基础语法

2. class 基础介绍

2.1 如何定义class？

// 直接使用 class 关键词定义即可
class Point {}

注意事项：

  1. class 小写；
  2. Point 也就是类名，按规范推荐首字母大写；
  3. 和定义函数不同，定义类，类名后不需要增加小括号；

2.2 如何使用class？

定义一个 class ，结合 new 关键词我们可以创建一个对象（创建出来的对象，我们叫它：实例对象 ）

比如：

class Point {}var p = new Point()
// p 就是一个实例对象

2.3 class 可以看做 es5 中构造函数写法的语法糖

js 中创建实例对象，是有两种方式:

  1. 在早期的代码中，往往会通过构造函数的方式去实现。
  2. 在 es6 中，引入了 class 关键词，通过 class 实现。

class 的绝大部分功能，ES5 都可以做到。因此为了加深印象，在学习 class 关键词的时候，相同代码，我会列出 ES5 中如何实现的。

es6中的“类”

class Point {constructor(x, y) {this.x = x;this.y = y;}toString() {return '(' + this.x + ', ' + this.y + ')';}
}var p = new Point(1, 2)

es5中的“类”

function Point(x, y) {this.x = xthis.y = y
}Point.prototype.toString = function () {return '(' + this.x + ', ' + this.y + ')'
}var p = new Point(1, 2)// 构造函数的形式

在这里插入图片描述

注意事项：

  1. 直接对类使用 new 命令，跟构造函数的用法完全一致；
  2. 类的所有方法都定义在类的 prototype 属性上面；

3. class 中的 constructor() 方法

3.1 基础说明

  • constructor() 方法是类的默认方法，通过 new 命令生成对象实例时，自动调用该方法。

自动调用constructor

  • 一个类必须有 constructor() 方法，如果没有显式定义，一个空的constructor()方法会被默认添加。

  • constructor()方法默认返回实例对象（即this）。除了默认对象，也可以指定返回另外一个对象。

constructor返回非默认对象

3.2 个人理解

简单来说，constructor 对标 ES5 中的构造函数。我们可以在 constructor ，定义 new 输出的实例对象。class 中constructor 必须要有，不写会默认添加。

如下图：

基础的类实现方式 es5-class

4. class 中定义的属性和方法

4.1 实例属性

由上文得知，我们定义实例对象上的属性，需要在 constructor 定义。ES2022为类的实例属性，又规定了一种新写法。

如下：

写法一

// 原来的写法
class Demo {constructor() {this._count = 0;}add() {this._count++;}
}var d = new Demo()
console.log(d) // { _count: 0 }

写法二

// 新的写法
class Demo {_count = 0 // _count会绑定在实例对象上add() {this._count++}
}var d = new Demo()
console.log(d) // { _count: 0 }

这样写，好处非常明显，定义实例对象的属性的时候，可以更加简洁明了。

ps: Cocos Creator3.x 中定义实例属性，就是使用的 写法二 ，更加简洁明了。

注意事项

  • 实例属性顾名思义，定义的属性是实例对象自身的属性，而不是定义在实例对象的原型上面。（参考上方的示例代码。实例属性对应：d上的属性，而不是 Demo.prototype上的属性）

4.2 class中定义的方法

和实例属性不同，class 中直接定义的函数，是定义在实例对象的原型对象上，如下图示例。

在这里插入图片描述

为什么属性和方法有这样的不同？为什么要这么做？

  1. js 中当我们试图访问一个对象的属性时，如果该对象本身没有这个属性，那么 js 会在对象的原型对象上查找这个属性，依次类推，直到找到属性或者达到原型链的顶端。

    这样就保证了我们的函数定义在实例对象的原型上，实例对象是可以访问，调用的。

  2. 所有的实例都可以共享同一个方法，而不是每个实例都存储一份方法的副本。这种做法可以节省内存。

  3. 将方法放在原型上，我们还可以实现方法的继承和重写。子类可以通过在其原型上添加或重写父类的方法来实现继承或重写。

注意事项

  • class 中直接定义的函数，实际上是定义在实例对象的原型对象上

5. 取值函数（getter）和存值函数（setter）

“类”的内部可以使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为。

5.1 如何定义？

class MyClass {constructor() {// ...}get prop() {return 'getter';}set prop(value) {console.log('setter: '+value);}
}let inst = new MyClass();inst.prop = 123;
// setter: 123inst.prop
// 'getter'// prop是一个属性，通过 `get`和`set`关键字，拦截 prop 的存取。
// 能拦截属性的存取，就可以根据我们自身的需求去增加逻辑

7. 静态方法和静态属性 static

函数其实本身也是一个对象，而class定义的类，其实也是一个对象。这个对象本身，是可以存储属性的。这些属性我们就叫它静态方法和静态属性。

在 class 中，为了方便定义一个静态属性，我们可以在属性前，增加关键词 static 用以表示。

ES5 中定义静态方法

function Point(x, y) {}Point.like = 'lazyTomato'Point.say = function () {console.log('我是say方法')
}

ES6 中 class 旧版的定义静态方法

class Point {}
Point.like = 'lazyTomato'
Point.say = function () {console.log('我是say方法')
}

ES6 中 class 使用static关键词定义静态方法

class Point {static like = 'lazyTomato'static say() {console.log('我是say方法')}
}

注意事项：

  1. static 定义的就是静态属性和静态方法；
  2. 因为静态属性和静态方法，直接定义在 class 上的属性和方法，所以可以不用实例化直接调用。

8. 私有属性和私有方法

有时候，我们定义在类上的属性或者方法，仅供类内部使用，不希望被实例对象调用。

这个时候就出现了希望能私有这些属性和方法的方式。

私有，可以理解为就是仅供内部使用。

8.1 早期的实现方式：

class Point {_conut:1_say() {console.log('不希望被实例对象调用的方法')}
}// 通过给属性或者方法增加 `_` (下划线),表示这个属性或者方法是私有的。
// 但是这个方式并不是百分百保险的，外部还是可以调用。

8.2 利用 Symbol 值的唯一性：

const bar = Symbol('bar');
const snaf = Symbol('snaf');export default class myClass{// 公有方法foo(baz) {this[bar](baz);}// 私有方法[bar](baz) {return this[snaf] = baz;}// ...
};

但是使用 Reflect.ownKeys() 依然可获取到这些属性。

const inst = new myClass();Reflect.ownKeys(myClass.prototype)
// [ 'constructor', 'foo', Symbol(bar) ]

8.3 使用 ES6中的

class Foo {#a;#b;constructor(a, b) {this.#a = a;this.#b = b;}#sum() {return this.#a + this.#b;}printSum() {console.log(this.#sum());}
}

9.总结

9.1 总结一下 class 中的一些属性：

名称定义在哪里示例
实例属性实例对象在这里插入图片描述
class中定义的函数定义在实例对象的原型对象上在这里插入图片描述
get和set函数实例对象在这里插入图片描述
静态方法和静态属性类自身在这里插入图片描述
私有属性和私有方法类内部在这里插入图片描述

9.2 不同的属性在谷歌浏览器中的展示效果

1.实例属性，红色高亮

在这里插入图片描述

2.class中定义的函数：红色偏灰

在这里插入图片描述

3.get和set方法：红色更加灰

在这里插入图片描述

4.静态属性和静态方法

在这里插入图片描述

5.私有属性和私有方法

在这里插入图片描述

9.3 为什么 class 中有些属性可以直接通过 this 调用

示例代码一

class Point {num = 1say() {console.log('我是say方法')}test() {console.log(this.num) // 问题1console.log(this.say()) // 问题2}
}

把上面的代码换一种写法

示例代码二

class Point {constructor() {this.num = 1}say() {console.log('我是say方法')}test() {console.log(this.num) // 问题1console.log(this.say()) // 问题2}
}
var p = new Point()
p.test()
问题1： 为什么可以调用 this.num ？

因为谁调用函数，函数this就指向谁，执行 p.test() 时 this 指向 p，p 本身有一个 num 属性，所以可以正常调用。

问题2： 为什么可以调用 this.say()？

执行 p.test() 时 this 指向 p，p 本身没有 say 方法，但是它原型链上存在，所以可以正常调用。

end

  • 目前就class的基础内容就介绍到这里了。
  • 后续再补充 子类，继承 等内容。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/712199.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【Sql server】假设有三个字段a,b,c 以a和b分组，如何查询a和b唯一，但是c不同的记录

【Sql server】假设有三个字段a,b,c 以a和b分组，如何查询a和b唯一，但是c不同的记录

欢迎来到《小5讲堂》，大家好，我是全栈小5。 这是《Sql Server》系列文章，每篇文章将以博主理解的角度展开讲解， 特别是针对知识点的概念进行叙说，大部分文章将会对这些概念进行实际例子验证，以此达到加深对…
阅读更多...
2_SQL

2_SQL

文章目录 SQL数据完整性实体完整性域完整性参照完整性default（默认值）comment（注释） 多表设计一对一一对多多对多数据库三大范式第一范式：原子性第二范式：唯一性第三范式：数据的冗余 多表查询连…
阅读更多...
JQMobile Loader Widget 遮罩层改造

JQMobile Loader Widget 遮罩层改造

最近在用jqmobile 做一个混合APP项目时候用到 jqmobile1.4.3提供的Loader Widget控件,但是这个控件本身是一个loading弹出层,这个弹出层弹出之后,用户还是可以去点击按钮,重复发送请求,为了防止重复提交,我想了两种办法, 1,在loading弹出层弹出之后,让按钮不可用.但是form表单…
阅读更多...
记录SSM项目集成Spring Security 4.X版本 之 加密验证和记住我功能

记录SSM项目集成Spring Security 4.X版本 之 加密验证和记住我功能

目录 前言 一、用户登录密码加密认证 二、记住我功能 前言 本次笔记的记录是接SSM项目集成Spring Security 4.X版本 之 加入DWZ,J-UI框架实现登录和主页菜单显示-CSDN博客https://blog.csdn.net/u011529483/article/details/136255768?spm1001.2014.3001.5502 文章之后补…
阅读更多...
Python列表的合并、重复、判断与切片操作你学会了吗

Python列表的合并、重复、判断与切片操作你学会了吗

1.合并列表 通过 实现 list1 ["佛跳墙", "肠粉", "刀削面", "烤鸭"]list2 [32, 4, 5, 7.43, True]list3 list1 list2print(list3) # [佛跳墙, 肠粉, 刀削面, 烤鸭, 32, 4, 5, 7.43, True] 2.重复输出列表中的元素 通过 * 实…
阅读更多...
vue3 中 主题定制

vue3 中 主题定制

vue3 中 主题定制 背景 做多主题定制，黑/白 ，里面还要再分各种颜色，每次进来都要记住上次的主题设置 效果图 一、目录结构 ├── generated │ ├── theme │ │ └── dark-yellow.ts │ │ └── dark-orange.ts │ │…
阅读更多...
「算法」常见位运算总结

「算法」常见位运算总结

位运算符 异或 按位异或可以实现无进位相加，所谓无进位相加，就是在不考虑进位的情况下将两个数相加（后面有道题需要用到这种操作） 异或的运算律 ①a ^ 0 a ②a ^ a 0 ③a ^ b ^ c a ^ ( b ^ c ) 有符号右移>> 将一个…
阅读更多...
IDEA切换 Springboot初始化 URL

IDEA切换 Springboot初始化 URL

🌹作者主页：青花锁 🌹简介：Java领域优质创作者🏆、Java微服务架构公号作者😄 🌹简历模板、学习资料、面试题库、技术互助 🌹文末获取联系方式 📝 往期热门专栏回顾 专栏…
阅读更多...
云计算 2月20号 （认识操作系统）

云计算 2月20号 （认识操作系统）

1、认识操作系统 计算机系统的组成 知识点1：没有软件系统的计算机称之为"裸机" 知识点2：裸机提供基本的可计算性资源 知识点3：操作系统是最靠近硬件的软件层，负责管理和控制计算机硬件。 计算机硬件组成五大部件 运算器…
阅读更多...
代码随想录算法刷题训练营day29：LeetCode(491)递增子序列、LeetCode(46)全排列、LeetCode(47)全排列 II

代码随想录算法刷题训练营day29：LeetCode(491)递增子序列、LeetCode(46)全排列、LeetCode(47)全排列 II

代码随想录算法刷题训练营day29：LeetCode(491)递增子序列、LeetCode(46)全排列、LeetCode(47)全排列 II LeetCode(491)递增子序列 题目 代码 import java.util.ArrayList; import java.util.Arrays; import java.util.Collections; import java.util.HashSet; im…
阅读更多...
2024年AI全景预测

2024年AI全景预测

欢迎来到 2024 年人工智能和技术的可能性之旅。 在这里，每一个预测都是一个潜在的窗口，通向充满创新、变革、更重要的是类似于 1950 年代工业革命的未来。 20 世纪 50 年代见证了数字计算的兴起，重塑了行业和社会规范。 如今，人工…
阅读更多...
力扣1143. 最长公共子序列（动态规划）

力扣1143. 最长公共子序列（动态规划）

Problem: 1143. 最长公共子序列 文章目录 题目描述思路复杂度Code 题目描述 思路 我们统一标记：str1[i]代表text1表示的字符数组，str2[j]代表text2表示的字符数组；LCS代表最长的公共子序列；（我们易得只有str1[i]和str…
阅读更多...
Flutter中Widget的生命周期

Flutter中Widget的生命周期

Widget生命周期： createState-initState-didChangeDependency-build-deactive-dispose 可通过WidgetsBinding类对widget生命周期的回调进行监控。 createState：StatefulWidget 中用于创建 State； initState：State 的初始化操作&am…
阅读更多...
CLion远程调试C++

CLion远程调试C++

文件映射到 可以右键文件夹选择重新Cmake 编译
阅读更多...
xsslabs第七关

xsslabs第七关

源码 <!DOCTYPE html><!--STATUS OK--><html> <head> <meta http-equiv"content-type" content"text/html;charsetutf-8"> <script> window.alert function() { confirm("完成的不错&#xff01;"…
阅读更多...
【刷题】Leetcode 1609.奇偶树

【刷题】Leetcode 1609.奇偶树

Leetcode 1609.奇偶树 题目描述广度优先搜索&#xff08;BFS&#xff09;深度优先算法&#xff08;DFS&#xff09; 思路一&#xff08;BFS&#xff09;思路二&#xff08;DFS&#xff09;Thanks♪(&#xff65;ω&#xff65;)&#xff89;谢谢阅读&#xff01;&#xff01;&a…
阅读更多...
数字后端——DEF文件格式

数字后端——DEF文件格式

文章目录 MACRO的不同orientationDEF中在macro orientation定义前需要留空格 MACRO的不同orientation DEF中在macro orientation定义前需要留空格 像下图中这种方向和分号之间没有空格的情况&#xff0c;就是有问题的格式。
阅读更多...
数学学习与研究杂志社《数学学习与研究》杂志社编辑部2023年第29期目录

数学学习与研究杂志社《数学学习与研究》杂志社编辑部2023年第29期目录

考试研究 提高高三数学二轮复习质量的思考与实践 佘淮青; 2-4 提升高三数学复习质量的策略探究 王飞; 5-7 核心素养背景下的高中数学命题策略研究 陈明发; 8-10 提升中考数学复习课的有效性研讨 韩兴宏; 11-13 中学教学方法《数学学习与研究》投稿&#xff1a;…
阅读更多...
pyuic生成py文件到指定文件夹

pyuic生成py文件到指定文件夹

pyuic生成py文件到指定文件夹 关于如何在pycharm配置外部工具的方法这里不做赘述&#xff0c;本文主要说明&#xff0c;如何利用pyuic将ui文件生成到指定的项目目录中。 前提条件&#xff1a;已配置的pyuic工具可以正常使用生成文件到目录中。 一、打开外部工具配置页面 打开…
阅读更多...
如何用Python检查时间序列数据是否平稳？

如何用Python检查时间序列数据是否平稳？

时间序列数据通常以其时间性质为特征。这种时间性质为数据增加了趋势或季节性&#xff0c;使其与时间序列分析和预测兼容。如果时间序列数据不随时间变化或没有时间结构&#xff0c;则称其为静态数据。因此&#xff0c;检查数据是否平稳是非常必要的。在时间序列预测中&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023