ES6新特性16-Class

文章目录

ES6新特性16-Class
- 一、Class介绍和初体验
- 二、class静态成员
- 三、构造函数继承
- 四、子类对父类方法的重写
- 五、get和set

一、Class介绍和初体验

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

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

程的语法而已。

知识点：

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>类声明</title>
</head>
<body><script>//手机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);//classclass Shouji{//构造方法 名字不能修改constructor(brand, price){this.brand = brand;this.price = price;}//方法必须使用该语法, 不能使用 ES5 的对象完整形式call(){console.log("我可以打电话!!");}}let onePlus = new Shouji("1+", 1999);console.log(onePlus);</script>
</body>
</html>

二、class静态成员

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>静态成员</title>
</head>
<body><script>//这样的属性是属于函数对象的，而不属于实例对象// function Phone(){// }// Phone.name = '手机';// Phone.change = function(){//     console.log("我可以改变世界");// }// Phone.prototype.size = '5.5inch';// let nokia = new Phone();// console.log(nokia.name);// // nokia.change();// console.log(nokia.size);class Phone{//静态属性static name = '手机';static change(){console.log("我可以改变世界");}}let nokia = new Phone();console.log(nokia.name);console.log(Phone.name);</script>
</body>
</html>

三、构造函数继承

ES5构造函数继承

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>对象继承</title>
</head>
<body><script>//手机function Phone(brand, price){this.brand = brand;this.price = price;}Phone.prototype.call = function(){console.log("我可以打电话");}//智能手机function SmartPhone(brand, price, color, size){Phone.call(this, brand, price);this.color = color;this.size = size;}//设置子级构造函数的原型SmartPhone.prototype = new Phone;SmartPhone.prototype.constructor = SmartPhone;//声明子类的方法SmartPhone.prototype.photo = function(){console.log("我可以拍照")}SmartPhone.prototype.playGame = function(){console.log("我可以玩游戏");}const chuizi = new SmartPhone('锤子',2499,'黑色','5.5inch');console.log(chuizi);</script>
</body>
</html>

ES6构造函数继承

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>类继承-2</title>
</head>
<body><script>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);// Phone.call(this, brand, price)this.color = color;this.size = size;}photo(){console.log("拍照");}playGame(){console.log("玩游戏");}call(){console.log('我可以进行视频通话');}}const xiaomi = new SmartPhone('小米',799,'黑色','4.7inch');// console.log(xiaomi);xiaomi.call();xiaomi.photo();xiaomi.playGame();</script>
</body>
</html>

四、子类对父类方法的重写

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>类继承-2</title>
</head>
<body><script>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);// Phone.call(this, brand, price)this.color = color;this.size = size;}photo(){console.log("拍照");}playGame(){console.log("玩游戏");}call(){console.log('我可以进行视频通话');}}const xiaomi = new SmartPhone('小米',799,'黑色','4.7inch');// console.log(xiaomi);xiaomi.call();xiaomi.photo();xiaomi.playGame();</script>
</body>
</html>

五、get和set

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>get 和 set</title>
</head>
<body><script>// get 和 set  class Phone{get price(){console.log("价格属性被读取了");return 'iloveyou';}set price(newVal){console.log('价格属性被修改了');}}//实例化对象let s = new Phone();// console.log(s.price);s.price = 'free';</script>
</body>
</html>
读取了");return 'iloveyou';}set price(newVal){console.log('价格属性被修改了');}}//实例化对象let s = new Phone();// console.log(s.price);s.price = 'free';</script>
</body>
</html>

ES6新特性16-Class相关推荐

ES6新特性的学习和使用
ES6新特性的学习和使用本文是基于Windows 10系统环境,进行ES6新特性的学习和使用 Windows 10 React 一.ES6的新语法 (1) let和const ES6之后尽量少使用v ...
javascript ES6 新特性之扩展运算符三个点 ...
对于 ES6 新特性中的 ... 可以简单的理解为下面一句话就可以了: 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中. 作用类似于 Object.assign() ...
ES6新特性（函数默认参数，箭头函数）
ES6新特性之函数参数的默认值写法和箭头函数. 1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式: 从上面的代码可以看出存在一个问题,当传入的参数为0或者 ...
ES6新特性之了解ES6以及其发展历史
ES6 新特性现在使用主流的前端框架中,如ReactJS.Vue.js.angularjs等,都会使用到ES6的新特性,作为一名高级工程师而言,ES6也就成为了必修课,所以本套课程先以ES6的新特性 ...
es6 获取对象的所有值_前端开发必备 - ES6 新特性之 Set和Map数据结构
往期回顾: 前端开发必备 - ES6 新特性之 let 和 const 命令前端开发必备 - ES6 新特性之变量的解构赋值前端开发必备 - ES6 新特性之字符串的拓展前端开发必备 - E ...
html5 跳转参数不显示_HTML5、CSS3、ES6新特性总结
前言:HTML5.CSS3.ES6新特性,可以说是基础前端的面试的必考题了,以下是关于新特性的基本总结. HTML5: 语义化的区块和段落元素:<section>,<article& ...
尚硅谷es6新特性笔记
尚硅谷es6新特性笔记一.let与const let的变量声明以及声明特性 const的变量声明以及声明特性 const.let.var 三者之间的区别二.变量解构赋值三.模板字符串四.对象的 ...
lsdyna如何设置set中的node_list_如何快速掌握es6+新特性及核心语法？
国庆刚刚结束,我们开始一波新的学习进程吧. ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.作为前端必备技能,我们来快速开始吧接 ...
ES6新特性----面试
ES6新特性关键字 let关键字 const关键字解构赋值变量的解构赋值数组的解构赋值对象的解构赋值字符串的解构赋值数值和布尔值的解构赋值函数参数的解构赋值用途模板字符串箭头函数 ...

ES6新特性16-Class

ES6新特性16-Class

文章目录

一、Class介绍和初体验

二、class静态成员

三、构造函数继承

四、子类对父类方法的重写

五、get和set

ES6新特性16-Class相关推荐

最新文章

热门文章