JS:ES6-10 class类

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

方法：

1. class 声明类；

2. constructor 定义构造函数初始化；

3. extends 继承父类；

4. super 调用父级构造方法；

5. static 定义静态方法和属性；

6. 父类方法可以重写；

class 基本实现：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>class类</title>
</head>
<body>
<script>
// 手机 ES5写法
// function Phone(brand,price){
// this.brand = brand;
// this.price = price;
// }
// // 添加方法
// Phone.prototype.call = function(){
// console.log("我可以打电话！");
// }
// 实例化对象
// let HuaWei = new Phone("华为",5999);
// HuaWei.call();
// console.log(HuaWei);
// ES6写法
class Phone{
// 构造方法，名字是固定的
constructor(brand,price) {
this.brand = brand;
this.price = price;
}
// 打电话，方法必须使用该方式写
call(){
console.log("我可以打电话！");
}
}
let HuaWei = new Phone("华为",5999);
HuaWei.call();
console.log(HuaWei);
</script>
</body>
</html>

class静态成员方法：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>class静态成员</title>
</head>
<body>
<script>
// class静态成员
// ES5写法
// function Phone(){}
// Phone.name = "手机";
// Phone.change = function(){
// console.log("我可以改变世界！");
// }
// let nokia = new Phone();
// console.log(nokia.name); // undefined
// // nokia.change();
// // 报错：Uncaught TypeError: nokia.change is not a function
// Phone.prototype.color = "黑色";
// console.log(nokia.color); // 黑色
// console.log(Phone.name);
// Phone.change();
// 注意：实例对象和函数对象的属性是不相通的
// ES6写法
class Phone{
// 静态属性
static name = "手机";
static change(){
console.log("我可以改变世界！");
}
}
let nokia = new Phone();
console.log(nokia.name);
console.log(Phone.name);
Phone.change();
</script>
</body>
</html>

class类继承：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ES6class类继承</title>
</head>
<body>
<script>
// ES6class类继承
class Phone{
constructor(brand,price) {
this.brand = brand;
this.price = price;
}
call(){
console.log("我可以打电话！");
}
}
class SmartPhone extends Phone{
// 构造函数
constructor(brand,price,color,size) {
super(brand,price); // 调用父类构造函数
this.color = color;
this.size = size;
}
photo(){
console.log("我可以拍照！");
}
game(){
console.log("我可以玩游戏！");
}
}
const chuizi = new SmartPhone("小米",1999,"黑色","5.15inch");
console.log(chuizi);
chuizi.call();
chuizi.photo();
chuizi.game();
</script>
</body>
</html>

子类对父类方法重写：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ES6class类继承</title>
</head>
<body>
<script>
// ES6class类继承
class Phone{
constructor(brand,price) {
this.brand = brand;
this.price = price;
}
call(){
console.log("我可以打电话！");
}
}
class SmartPhone extends Phone{
// 构造函数
constructor(brand,price,color,size) {
super(brand,price); // 调用父类构造函数
this.color = color;
this.size = size;
}
// 子类对父类方法重写
// 直接写，直接覆盖
// 注意：子类无法调用父类同名方法
call(){
console.log("我可以进行视频通话！");
}
photo(){
console.log("我可以拍照！");
}
game(){
console.log("我可以玩游戏！");
}
}
const chuizi = new SmartPhone("小米",1999,"黑色","5.15inch");
console.log(chuizi);
chuizi.call();
chuizi.photo();
chuizi.game();
</script>
</body>
</html>

class中的getter和setter设置（Getters和Setters使你可以快速获取或设置一个对象的数据。一般来说，一个对象拥有两个方法，分别用于获取和设置某个值）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>class中的getter和setter设置</title>
</head>
<body>
<script>
// class中的getter和setter设置
class Phone{
get price(){
console.log("价格属性被读取了！");
// 返回值
return 123;
}
set price(value){
console.log("价格属性被修改了！");
}
}
// 实例化对象
let s = new Phone();
console.log(s.price); // 返回值
s.price = 2999;
</script>
</body>
</html>

JS:ES6-10 class类相关推荐

JS es6的Class类详解
文章目录 JS es6的Class类详解 class基本语法 Class的基本语法之constructor Class的基本语法之类的调用方式 Class的基本语法之getter和setter Cla ...
【JS(ES6,ES5类的创建及继承)】
目录一.ES6的面向对象的语法(ES6创建类) 1.面向过程(了解) 2.面向对象 3.面向对象的特征 4.ECMAScript6(即ES6)的面向对象的语法 5.练习二.ES6中类的继承三.E ...
JS如何定义一个类分别用Es5和Es6来实现
前言类是面向对象编程语言最基础,最核心的概念,正因为有了类,才可以拓展延伸出具有相同的属性和函数的对象类对象的特点,就是它可以拥有属性和方法,而在Es6之前,并没有提供类的支持,它是用构造函数来模 ...
1~22（面向编程+ES6中的类和对象+类的继承+面向对象版tab栏切换）
1 面向对象编程介绍 1.1 两大编程思想面向过程面向对象 1.2 面向过程编程POP(Process-oriented programming) 面向过程就是分析出解决问题所需要的步骤,然后用函 ...
笔记,前端重点 js,es6,vue2,vue3,小程序...... (记得收藏)
------------vue2 部分面试题--------# (1)防抖:就是将一段时间内连续的多次触发转化为一次触发. (2)节流:减少一段时间内触发的频率区别:两者区别在于函数节流是固定时间做 ...
js进阶 10-8 伪类选择器有哪几类（自己不用，永远不是自己的）
js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的) 一.总结一句话总结:自己不用,永远不是自己的. 0.学而不用,却是为何? 自己不用,永远不是自己的,有需求的时候要想到它,然后操作 ...
js插件---10个免费开源的JS音乐播放器插件
js插件---10个免费开源的JS音乐播放器插件一.总结一句话总结:各种插件都有很多,多去找. 二.js插件---10个免费开源的JS音乐播放器插件亲测可用音乐播放器在网页设计中有时候会用到, ...
JS ES6中export和import详解
1.Export 模块是独立的文件,该文件内部的所有的变量外部都无法获取.如果希望获取某个变量,必须通过export输出, // profile.js export var firstName = ' ...
Web前端笔记-字符串自适应tip提示框（适应大小自动换行JS中静态工具类实现）思路
程序运行截图如下: 下面提几个知识点. 第一个是JS中实现静态类,如下utils.js export let HHUtils = {}HHUtils .StaticClass = (function( ...
JS ES6 加减乘除法小数浮点数计算BUG解决
2018年3月6日 JS ES6 加减乘除法小数浮点数计算BUG解决 //检测是否为数字let num = (a) => {if(a != null && a.toString( ...

JS:ES6-10 class类

JS:ES6-10 class类相关推荐

最新文章

热门文章