ECMAScript 6+ 新特性 ( 二 )

2.12. class类

ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过 class 关键字,可以定义类。

ES6 的 class 可以看作只是一个语法糖,它的绝大部分功能ES5 都可以做到,新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

// ES 5
// 人员 : 相当于 构造方法
function Person(name, sex){this.name = name;this.sex = sex;
}//添加方法
Person.prototype.sayHi = function(){console.log("大家好!!");
}//实例化对象
let wang = new Person('王小二', '男');
wang.sayHi();
console.log(wang);// ES 6
//class
class Emp{//构造方法 名字不能修改constructor(name, sex){this.name = name;this.sex = sex;}//方法必须使用该语法sayHi(){console.log("大家好!!");}
}let li = new Emp("李小三", '女');
li.sayHi()
console.log(li);

2.12.1.set/get 方法

在name属性之前添加了get和set关键字,这样就创建了一个名为name的访问器属性。get方法用于获取该属性的值,set方法用于设置新的值。

需要注意的是,使用属性访问器时,实际的属性名会在内部使用一个带下划线的变量名来存储。这是一种常见的命名约定,用于区分属性访问器和实际存储属性的变量。

 class Stu {constructor(name) {this._name = name;}get name() {console.log('读取 name 属性')return this._name;}set name(newName) {console.log('修改 name 属性');this._name = newName;}}const stu = new Stu('王小二');
console.log(stu.name); // 输出 "王小二"stu.name = '李小三';
console.log(stu.name); // 输出 "李小三"

2.12.2.静态

static 属于 类不属于 对象

// ES 5// function Stu(){
//
// }// 下面定义的属性方法属性 Stu , 相当于 静态的
// name 属性 , 比较特殊 为  Stu
// Stu.age = 12;
// Stu.sayHello = function(){
//     console.log("hello, 我是王小二");
// }
// console.log(Stu.age)
// Stu.sayHello();// Stu.prototype.sex = '男';
//
// let wang = new Stu();
// //  这些属性是属于 Phone 的, 而不是属于 wang 的
// console.log(wang.name);
// wang.sayHello();
// console.log(wang.sex);// ES 6
class Stu{//静态属性static name = '李小三';static sayHello(){console.log("hello, 我是李小三");}
}let li = new Stu();
console.log(li.name);
// li.sayHello();
console.log(Stu.name);
Stu.sayHello();

2.12.3.继承

2.12.3.1.ES 5 构造继承
// ES 5
// 人员 父类
function Person(name, sex){this.name = name;this.sex = sex;
}//添加方法
Person.prototype.sayHi = function(){console.log("大家好!!");
}//员工 子类 , 增加了 salary 薪水 属性
function Employee(name, sex, salary){// 调用父类的构造函数, 将自己及属性值 传入Person.call(this, name, sex);this.salary = salary;
}//设置子级构造函数的原型
Employee.prototype = new Person;
Employee.prototype.constructor = Employee;//声明子类的方法
Employee.prototype.eat = function(){console.log("去食堂")
}const wang = new Employee('王小二', '男',6499 );console.log(wang);
console.log(wang.name);
console.log(wang.sex);
console.log(wang.salary);
wang.sayHi();
wang.eat()

在这段代码中,EmployeePerson 的子类。以下是这两句代码的含义:

  1. Employee.prototype = new Person; 这行代码的作用是将 Person 构造函数的一个实例赋值给 Employee 原型对象。通过这样做,所有 Employee 类的实例都将继承 Person 类的所有方法和属性(通过原型链)。在这里调用 new Person 时并没有传入参数,因此新创建的 Person 实例的 namesex 属性将是 undefined。不过,在接下来的 Employee 构造函数内部已经通过 Person.call(this, name, sex) 正确地设置了这些属性。
  2. Employee.prototype.constructor = Employee; 在 JavaScript 中,每个构造函数的原型对象都有一个内置的 constructor 属性,它指向该构造函数本身。但是,当执行了 Employee.prototype = new Person 后,Employee 原型对象的 constructor 被修改为指向 Person。为了修复这一问题,并确保 Employee 的实例能够正确识别其构造函数,需要手动设置 Employee.prototype.constructorEmployee。这样做的目的是在后续可能涉及检查对象构造函数的场景下(如 instanceof 操作符或 .constructor 属性),能正确识别出对象是由哪个构造函数创建的。
2.12.3.2.ES 6 构造继承
// ES 6
class Person {//构造方法constructor(name, sex){this.name = name;this.sex = sex;}//父类的成员方法sayHi(){console.log("大家好!!");}
}class Employee extends Person {//构造方法constructor(name, sex, salary) {super(name, sex);// Phone.call(this, brand, price)this.salary = salary;}eat() {console.log("去食堂")}// sayHi(){//     console.log("大家好!!我转正了");// }
}const li = new Employee('李小三', '女', 5799 );
console.log(li);
console.log(li.name);
console.log(li.sex);
console.log(li.salary);
li.sayHi();
li.eat()

2.12.4.( ES 11 )私有属性

通过 在属性前加 # 来设置私有的属性,

在内部可以直接使用( 如: info() ),

在外部直接调用 会报错 , Uncaught SyntaxError: Private field ‘#age’ must be declared in an enclosing class

class Person{//公有属性name;//私有属性#age;#weight;//构造方法constructor(name, age, weight){this.name = name;this.#age = age;this.#weight = weight;}info(){console.log(this.name);console.log(this.#age);console.log(this.#weight);}}//实例化
const girl = new Person('李小三', 18, '45kg');console.log(girl.name); // 李小三
console.log(girl.#age); // Uncaught SyntaxError: Private field '#age' must be declared in an enclosing class
console.log(girl.#weight); // Uncaught SyntaxError: Private field '#weight' must be declared in an enclosing classgirl.info();

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

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

相关文章

五种多目标优化算法(MOGWO、MOJS、NSWOA、MOPSO、MOAHA)性能对比(提供MATLAB代码)

一、5种多目标优化算法简介 1.1MOGWO 1.2MOJS 1.3NSWOA 1.4MOPSO 1.5MOAHA 二、5种多目标优化算法性能对比 为了测试5种算法的性能将其求解9个多目标测试函数(zdt1、zdt2 、zdt3、 zdt4、 zdt6 、Schaffer、 Kursawe 、Viennet2、 Viennet3)&#xff0…

安装python开发包管理环境miniconda

Python 管理 —— Conda Python 环境管理的价值在于将同一个 Python 版本的不同需求分开,比如:项目 A 和 项目 B 都需要 Python 3.10.11 这个版本,都用到了 requests 包,但是项目 A 需要 requests 2.1,而项目 B 需要 …

RPA岗位介绍 - RPA业务分析师

岗位描述 RPA业务分析师是连接IT部门与业务部门的关键角色,他们的主要职责是与团队合作梳理、识别、分析和理解业务流程,识别潜在的自动化机会,并将其转化为机器人流程自动化(RPA)的解决方案。 岗位职责 与业务部门合作,采集、梳理和分析业务需求,识别适用于自动化改造…

JDBC实现增删改查

此篇文章的基础来自https://blog.csdn.net/weixin_39038328/article/details/136197311?spm1001.2014.3001.5501 一、 数据查询 public static void search() {try {Class.forName("com.mysql.jdbc.Driver"); // 1.加载驱动//2.建立连接Connection connection (C…

day 21 (重点程序 )

先整理程序 文件拷贝 1.fgetc/fputc 1 #include<stdio.h>2 int main(void)3 {4 FILE *fsrc NULL;5 FILE *fdst NULL;6 char ch 0;7 fsrc fopen("src.txt","r");8 if(NULL fsrc)9 {10 perror("fail to f…

leetcode1049:最后一块石头的重量二

解题思路&#xff1a; 把石头堆分割成差不多的两堆&#xff0c;使得两堆差值最小 dp数组的含义&#xff1a; dp[j]:背包容量为j的背包最大重量(价值)为dp[j] dp[j] max(dp[j],dp[j-stones[i]] stones[i]) 初始化&#xff1a;&#xff08;dp数组的大小根据题目进行定义&a…

vue2中vuex的各项的各种调用方式,部分对比vue3的pinia

首先vuex的实例化比较特别&#xff0c;通过 导入Vue和Vuex&#xff0c;先Vue.use(Vuex)再 new Vuex.store()的方式来实例化仓库&#xff0c; 模块则是通过创建modules文件夹&#xff0c;在新建的文件中export符合规范的对象&#xff0c;这样约定俗成的方式来创建&#xff0c…

网络安全--网鼎杯2018漏洞复现(二次注入)

一、环境&#xff1a;在线测试平台 BUUCTF在线评测 (buuoj.cn) 二、进入界面先尝试万能账号 1or11# 换格式 hais1bux1 11or11# 三、万能的不行那我们就得想注册了&#xff0c;去register.php去看看 注册个账号 发现用户名回显&#xff0c;猜测考点为用户名处二次注入&…

Java 那些诗一般的 数据类型 (1)

本篇会加入个人的所谓‘鱼式疯言’ ❤️❤️❤️鱼式疯言:❤️❤️❤️此疯言非彼疯言 而是理解过并总结出来通俗易懂的大白话, 小编会尽可能的在每个概念后插入鱼式疯言,帮助大家理解的. &#x1f92d;&#x1f92d;&#x1f92d;可能说的不是那么严谨.但小编初心是能让更多人…

【JavaScript 语法】

JavaScript 语法 ■ JavaScript 是什么■ JavaScript 语法■ JS 注释■ JS 结束符■ JS 输入输出语句■ JS 代码块■ JS 关键词■ JS 值■ JS 字面量 &#xff08;混合值&#xff09;■ JS 变量&#xff08;变量值&#xff09;■ JS 文本值 (字符串)■ JS 字符串可以是对象 ■ …

JS文本加密方法探究

在前端开发中&#xff0c;有时候我们需要对敏感文本进行简单的加密&#xff0c;以提高安全性。本文将介绍一种基于 JavaScript 实现的文本加密方法&#xff0c;使用了 Base64、Unicode 和 ROT13 编码。 示例代码 function encodeText(text) {// Base64编码var base64Encoded …

MongoDB 权限管理

文章目录 前言1. 权限控制1.1 MongoDB 默认角色1.1.1 读写角色1.1.2 管理角色1.1.3 其他角色1.1.4 超级用户角色 1.2 用户管理1.2.1 查看用户1.2.2 创建新用户1.2.3 调整角色1.2.4 删除用户1.2.4 修改密码 前言 上一篇 《MongoDB 单机安装部署》 文章中&#xff0c;为 MongoDB…

STL常用之vector,list,stack,queue,deque总结与对比

一&#xff0c;vector 1&#xff09;底层 vector的底层是开辟出来的一块连续空间&#xff0c;类似于数组&#xff0c;每次空间满了之后会根据不同的编译器有不同的扩容倍数。 2&#xff09;优劣 优点&#xff1a;随机访问效率高&#xff0c;因为地址是连续的&#xff0c;底层…

native smart contracts, a easy forgotten thing.

"内置的智能合约"是指在区块链网络中预先存在的智能合约。这些合约通常由区块链的开发者编写&#xff0c;并在区块链网络创建时就已经部署。这些合约的功能通常包括处理基本的交易和账户管理等核心功能。 以太坊网络就有一种内置的智能合约&#xff0c;叫做 ERC-20 …

Linux 驱动开发基础知识——APP 怎么读取按键值(十二)

个人名片&#xff1a; &#x1f981;作者简介&#xff1a;学生 &#x1f42f;个人主页&#xff1a;妄北y &#x1f427;个人QQ&#xff1a;2061314755 &#x1f43b;个人邮箱&#xff1a;2061314755qq.com &#x1f989;个人WeChat&#xff1a;Vir2021GKBS &#x1f43c;本文由…

道可云元宇宙每日资讯|上海开放大学发布“智慧学习中心元宇宙”

道可云元宇宙每日简报&#xff08;2024年2月19日&#xff09;讯&#xff0c;今日元宇宙新鲜事有&#xff1a; 上海开放大学发布“智慧学习中心元宇宙” 上海开放大学首次发布了“智慧学习中心元宇宙”&#xff0c;初步构筑了上海开放大学5g元宇宙孪生学习环境&#xff0c;13所…

前端简单知识复习

1.symbol类型 Symbol 是 ECMAScript 6 中引入的一种新的基本数据类型&#xff0c;它表示独一无二的值。Symbol 值是通过 Symbol() 函数创建的。 Symbol 值具有以下特点&#xff1a; 独一无二性&#xff08;唯一性&#xff09;&#xff1a;每个通过 Symbol() 函数创建的 Symb…

Java面试题之Spring相关问题(持续更新)

1.spring是如何简化开发的&#xff1f; 基于POJO的轻量级和最小侵入编程&#xff1b;通过依赖注入和面向接口实现松耦合&#xff1b;基于切面&#xff08;AOP&#xff09;和惯例进行声明式编程&#xff1b;通过切面和模板减少样式代码&#xff0c;RedisTemplate&#xff0c;xx…

Python初学者必知的50个基础问题与解答

以下是一些常见的Python基础学习问题及其答案,希望对大家有所帮助&#xff1a; Python是什么类型的编程语言&#xff1f; Python是一种通用、高级、解释型的编程语言. Python中如何注释代码&#xff1f; 使用#符号添加单行注释,或使用三引号(""")添加多行注释.…

基于RBAC的权限管理的理论实现和权限管理的实现

权限管理的理论 首先需要两个页面支持&#xff0c;分别是角色管理和员工管理&#xff0c;其中角色管理对应的是角色和权限的配合&#xff0c;员工管理则是将登录的员工账号和员工所处的角色进行对应&#xff0c;即通过新增角色这个概念&#xff0c;让权限和员工并不直接关联&a…