【ES6复习笔记】Class类(15)

devtools/2024/12/28 0:58:20/
class="baidu_pl">
class="article_content clearfix">
class="markdown_views prism-atom-one-dark">

介绍

ES6 提供了更接近传统语言的写法,引入了 Class()这个概念,作为对象的模板。通过 class 关键字,可以定义。基本上,ES6 的 class 可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

class="prism language-js">class="token keyword">class class="token class-name">shouji class="token punctuation">{class="token function">constructorclass="token punctuation">(class="token parameter">brandclass="token punctuation">,priceclass="token punctuation">) class="token punctuation">{class="token keyword">thisclass="token punctuation">.brandclass="token operator">=brandclass="token punctuation">;class="token keyword">thisclass="token punctuation">.priceclass="token operator">=priceclass="token punctuation">}class="token function">callclass="token punctuation">(class="token punctuation">)class="token punctuation">{consoleclass="token punctuation">.class="token function">logclass="token punctuation">(class="token string">'我可以打电话'class="token punctuation">)class="token punctuation">}
class="token punctuation">}class="token keyword">let class="token constant">A class="token operator">= class="token keyword">new class="token class-name">shoujiclass="token punctuation">(class="token string">'1+'class="token punctuation">,class="token number">1999class="token punctuation">)class="token punctuation">;
consoleclass="token punctuation">.class="token function">logclass="token punctuation">(class="token constant">Aclass="token punctuation">)

知识点:

  1. class 声明
  2. constructor 定义构造函数初始化
  3. extends 继承
  4. super 调用父级构造方法
  5. static 定义静态方法和属性
  6. 方法可以重写

静态成员

class="prism language-js">class="token keyword">class class="token class-name">Personclass="token punctuation">{class="token keyword">static nameclass="token operator">=class="token string">'手机'
class="token punctuation">}
class="token keyword">let nokia class="token operator">= class="token keyword">new class="token class-name">Personclass="token punctuation">(class="token punctuation">)class="token punctuation">;
consoleclass="token punctuation">.class="token function">logclass="token punctuation">(nokiaclass="token punctuation">.nameclass="token punctuation">)class="token punctuation">;

构造函数继承

class="prism language-js">class="token keyword">function class="token function">Phoneclass="token punctuation">(class="token parameter">brandclass="token punctuation">,priceclass="token punctuation">)class="token punctuation">{class="token keyword">thisclass="token punctuation">.brandclass="token operator">=brandclass="token punctuation">;class="token keyword">thisclass="token punctuation">.priceclass="token operator">=priceclass="token punctuation">;
class="token punctuation">}
class="token class-name">Phoneclass="token punctuation">.prototypeclass="token punctuation">.class="token function-variable function">callclass="token operator">=class="token keyword">function class="token punctuation">(class="token punctuation">)class="token punctuation">{consoleclass="token punctuation">.class="token function">logclass="token punctuation">(class="token string">"我可以打电话"class="token punctuation">)class="token punctuation">;
class="token punctuation">}
class="token keyword">function class="token function">SmartPhoneclass="token punctuation">(class="token parameter">brandclass="token punctuation">,priceclass="token punctuation">,colorclass="token punctuation">,sizeclass="token punctuation">)class="token punctuation">{class="token function">Phoneclass="token punctuation">.class="token function">callclass="token punctuation">(class="token keyword">thisclass="token punctuation">,brandclass="token punctuation">,priceclass="token punctuation">)class="token punctuation">;class="token keyword">thisclass="token punctuation">.colorclass="token operator">=colorclass="token punctuation">;class="token keyword">thisclass="token punctuation">.sizeclass="token operator">=sizeclass="token punctuation">;
class="token punctuation">}class="token comment">//设置子级构造函数原型
class="token class-name">SmartPhoneclass="token punctuation">.prototypeclass="token operator">=class="token keyword">new class="token class-name">Phoneclass="token punctuation">;
class="token class-name">SmartPhoneclass="token punctuation">.prototypeclass="token punctuation">.constructorclass="token operator">=SmartPhoneclass="token punctuation">;class="token comment">//声明子方法
class="token class-name">SmartPhoneclass="token punctuation">.prototypeclass="token punctuation">.class="token function-variable function">photo class="token operator">= class="token keyword">function class="token punctuation">(class="token punctuation">)class="token punctuation">{consoleclass="token punctuation">.class="token function">logclass="token punctuation">(class="token string">'我可以玩游戏'class="token punctuation">)class="token punctuation">;
class="token punctuation">}
class="token keyword">const chuizi class="token operator">= class="token keyword">new class="token class-name">SmartPhoneclass="token punctuation">(class="token string">'锤子'class="token punctuation">,class="token number">2499class="token punctuation">,class="token string">'黑色'class="token punctuation">,class="token string">'5.5inch'class="token punctuation">)
consoleclass="token punctuation">.class="token function">logclass="token punctuation">(chuiziclass="token punctuation">)class="token punctuation">;

Class 的继承

class="prism language-js">class="token keyword">class class="token class-name">Phoneclass="token punctuation">{class="token function">constructorclass="token punctuation">(class="token parameter">brandclass="token punctuation">,priceclass="token punctuation">) class="token punctuation">{class="token keyword">thisclass="token punctuation">.brandclass="token operator">=brandclass="token punctuation">;class="token keyword">thisclass="token punctuation">.priceclass="token operator">=priceclass="token punctuation">;class="token punctuation">}class="token comment">//父的成员属性class="token function">callclass="token punctuation">(class="token punctuation">)class="token punctuation">{consoleclass="token punctuation">.class="token function">logclass="token punctuation">(class="token string">'我可以打电话'class="token punctuation">)class="token punctuation">}
class="token punctuation">}
class="token keyword">class class="token class-name">SmartPhone class="token keyword">extends class="token class-name">Phoneclass="token punctuation">{class="token function">constructorclass="token punctuation">(class="token parameter">brandclass="token punctuation">,priceclass="token punctuation">,colorclass="token punctuation">,sizeclass="token punctuation">) class="token punctuation">{class="token keyword">superclass="token punctuation">(brandclass="token punctuation">,priceclass="token punctuation">)class="token punctuation">;class="token keyword">thisclass="token punctuation">.colorclass="token operator">=colorclass="token punctuation">;class="token keyword">thisclass="token punctuation">.sizeclass="token operator">=sizeclass="token punctuation">;class="token punctuation">}class="token function">photoclass="token punctuation">(class="token punctuation">)class="token punctuation">{consoleclass="token punctuation">.class="token function">logclass="token punctuation">(class="token string">'拍照'class="token punctuation">)class="token punctuation">;class="token punctuation">}class="token function">playGameclass="token punctuation">(class="token punctuation">)class="token punctuation">{consoleclass="token punctuation">.class="token function">logclass="token punctuation">(class="token string">'打游戏'class="token punctuation">)class="token punctuation">;class="token punctuation">}
class="token punctuation">}
class="token keyword">const xiaomiclass="token operator">=class="token keyword">new class="token class-name">SmartPhoneclass="token punctuation">(class="token string">'小米'class="token punctuation">,class="token number">1999class="token punctuation">,class="token string">'黑色'class="token punctuation">,class="token string">'4.7inch'class="token punctuation">)
class="token function">xiaomiclass="token punctuation">.class="token function">callclass="token punctuation">(class="token punctuation">)class="token punctuation">;
xiaomiclass="token punctuation">.class="token function">photoclass="token punctuation">(class="token punctuation">)class="token punctuation">;
xiaomiclass="token punctuation">.class="token function">playGameclass="token punctuation">(class="token punctuation">)class="token punctuation">;

对父方法的重写

class="prism language-js">class="token keyword">class class="token class-name">Phoneclass="token punctuation">{class="token function">constructorclass="token punctuation">(class="token parameter">brandclass="token punctuation">,priceclass="token punctuation">) class="token punctuation">{class="token keyword">thisclass="token punctuation">.brandclass="token operator">=brandclass="token punctuation">;class="token keyword">thisclass="token punctuation">.priceclass="token operator">=priceclass="token punctuation">;class="token punctuation">}class="token comment">//父的成员属性class="token function">callclass="token punctuation">(class="token punctuation">)class="token punctuation">{consoleclass="token punctuation">.class="token function">logclass="token punctuation">(class="token string">'我可以打电话'class="token punctuation">)class="token punctuation">}
class="token punctuation">}
class="token keyword">class class="token class-name">SmartPhone class="token keyword">extends class="token class-name">Phoneclass="token punctuation">{class="token function">constructorclass="token punctuation">(class="token parameter">brandclass="token punctuation">,priceclass="token punctuation">,colorclass="token punctuation">,sizeclass="token punctuation">) class="token punctuation">{class="token keyword">superclass="token punctuation">(brandclass="token punctuation">,priceclass="token punctuation">)class="token punctuation">;class="token keyword">thisclass="token punctuation">.colorclass="token operator">=colorclass="token punctuation">;class="token keyword">thisclass="token punctuation">.sizeclass="token operator">=sizeclass="token punctuation">;class="token punctuation">}class="token function">photoclass="token punctuation">(class="token punctuation">)class="token punctuation">{consoleclass="token punctuation">.class="token function">logclass="token punctuation">(class="token string">'拍照'class="token punctuation">)class="token punctuation">;class="token punctuation">}class="token function">playGameclass="token punctuation">(class="token punctuation">)class="token punctuation">{consoleclass="token punctuation">.class="token function">logclass="token punctuation">(class="token string">'打游戏'class="token punctuation">)class="token punctuation">;class="token punctuation">}class="token comment">//重写!class="token function">callclass="token punctuation">(class="token punctuation">)class="token punctuation">{consoleclass="token punctuation">.class="token function">logclass="token punctuation">(class="token string">'我可以进行视频通话'class="token punctuation">)class="token punctuation">}
class="token punctuation">}
class="token keyword">const xiaomiclass="token operator">=class="token keyword">new class="token class-name">SmartPhoneclass="token punctuation">(class="token string">'小米'class="token punctuation">,class="token number">1999class="token punctuation">,class="token string">'黑色'class="token punctuation">,class="token string">'4.7inch'class="token punctuation">)
class="token function">xiaomiclass="token punctuation">.class="token function">callclass="token punctuation">(class="token punctuation">)class="token punctuation">;
xiaomiclass="token punctuation">.class="token function">photoclass="token punctuation">(class="token punctuation">)class="token punctuation">;
xiaomiclass="token punctuation">.class="token function">playGameclass="token punctuation">(class="token punctuation">)class="token punctuation">;

get 和 set 设置

class="prism language-js">class="token keyword">class class="token class-name">Phoneclass="token punctuation">{class="token keyword">get class="token function">priceclass="token punctuation">(class="token punctuation">)class="token punctuation">{consoleclass="token punctuation">.class="token function">logclass="token punctuation">(class="token string">"价格被读取了"class="token punctuation">)class="token keyword">return class="token string">'I LOVE YOU'class="token punctuation">}class="token keyword">set class="token function">priceclass="token punctuation">(class="token parameter">valclass="token punctuation">)class="token punctuation">{consoleclass="token punctuation">.class="token function">logclass="token punctuation">(class="token string">'价格被修改了'class="token punctuation">)class="token keyword">return valclass="token punctuation">;class="token punctuation">}
class="token punctuation">}class="token comment">//实例化对象
class="token keyword">let s class="token operator">= class="token keyword">new class="token class-name">Phoneclass="token punctuation">(class="token punctuation">)class="token punctuation">;
sclass="token punctuation">.priceclass="token operator">=class="token number">12  
class="token comment">// console.log(s.price)   //其实是调用price方法

http://www.ppmy.cn/devtools/145972.html

相关文章

mysql 数据库迁移到达梦数据库

1.windows安装达梦数据库,去官网下载 dm8 进行安装,安装后,可以使用管理工具管理数据 使用迁移工具对数据进行迁移; 2.使用php 或者 thinkphp连接达梦数据库 2.1、先PHP开启DM扩展 从达梦数据库安装目录下drivers/php_pdo 复制对…

算法的学习笔记— 圆圈中最后剩下的数(牛客JZ62)

🏠个人主页:尘觉主页 文章目录 62. 圆圈中最后剩下的数题目链接题目描述解题思路Java 实现思考分析😄总结 62. 圆圈中最后剩下的数 题目链接 NowCoder 题目描述 让小朋友们围成一个大圈。然后,随机指定一个数 m,让…

R语言数据分析案例47-上海译文出版社旗舰店图书分析和可视化

一、研究背景 随着数字化时代的发展,图书出版行业面临着日益激烈的市场竞争。上海译文出版社作为一家知名的出版机构,其旗舰店的图书销售数据蕴含着丰富的信息。对最新入库图书进行深入分析和可视化呈现,有助于出版社更好地了解市场动态、读…

重温设计模式--6、享元模式

文章目录 享元模式(Flyweight Pattern)概述享元模式的结构C 代码示例1应用场景C示例代码2 享元模式(Flyweight Pattern)概述 定义: 运用共享技术有效地支持大量细粒度的对象。 享元模式是一种结构型设计模式&#xff0…

Docker完整技术汇总

Docker 背景引入 在实际开发过程中有三个环境,分别是:开发环境、测试环境以及生产环境,假设开发环境中开发人员用的是jdk8,而在测试环境中测试人员用的时jdk7,这就导致程序员开发完系统后将其打成jar包发给测试人员后…

深入了解Linux —— make和makefile自动化构建工具

什么是make/makefile 在之前写代码的过程中,我们都是对一个文件进行编译链接(gcc编译),但是如果一个项目中,源代码文件非常的多,我们总不能一个一个的进行编译链接,这也太麻烦了;所以现在就来学…

前端真实面试题自用

一、写在前面 笔者,经过计算机学硕考研的失败后,想谋求一份前端工作实在是太难了。一方面,确实曾经学习过的东西很久没有拾起,另一方面,对于前端面经还是记忆不深刻,特地写此贴记录笔者在真实前端面试中遇…

Elasticsearch相关知识@1

目录标题 Lucene1. **什么是 Lucene?**2. **Lucene 在 Elasticsearch 中的作用**3. **Lucene 的核心功能**(1) **倒排索引**(2) **分词**(3) **查询解析**(4) **相关性评分** 4. **为什么 Elasticsearch 使用 Lucene?**5. **Lucene 和 Elasticsearch 的区别**6. **总结** 分片…