彻底搞懂JavaScript 之 ES6新特性class(类)

其实很容易理解这个class，它就是ES5的构造函数进化而来的。

ES5构造函数

// ES5
function Person(name, age) {this.name = namethis.age = agethis.sing = function(musicName) {consloe.log("musicName", musicName);}
}const person = new Person('刘德华', 22)
console.log(person.name)  // 刘德华
console.log(person.age)  // 22
person.sing('开心的马骝') // 开心的马骝

ES6---class（类）

// ES6
class Stack {constructor(name, age) {this.name = name;this.age = age;this.arr = [];}in(value) {this.arr.push(value);}top() {console.log(this.arr[0]);}out() {console.log(this.arr.shift());}size() {console.log(this.arr.length);}
}const obj = new Stack();obj.in('x') obj.in('y')obj.in('z')obj.top() // Zobj.size() // 3obj.out() // Zobj.top() // yobj.size() // 2

对比之后你不难发现，其实就是把ES5的Person(name, age)抽到ES6的constructor（name, age）{}函数中。构造函数中除了属性为函数之外的属性都放到constructor函数中去定义。悟：ES6class中constructor（）方法就是new一个实例需要传的参数，也可以传函数作为参数。

构造函数

class类

然后构造函数中定义的方法，直接以funcName(){}的方式写到class中。改良了写法而已

构造函数

class类

彻底搞懂JavaScript 之 ES6新特性class(类)相关推荐

JavaScript基础: ES6新特性---Symbol
简介在ES6中引入的一种新的基本数据类型Symbol.这个类型不像是number或者String让人使用起来那样顺手好理解,为什么是这样呢?是不是因为其是新特性,所以不熟是正常的? 自然不是因为箭头 ...
es6新特性------学好类（class）这一篇就够了
文章目录类和构造函数省略构造函数继承封装类和构造函数你可以使用 class 关键字声明一个类.下面是关于 Person 类的一个声明: class Person {name;constru ...
javascript ES6 新特性之扩展运算符三个点 ...
对于 ES6 新特性中的 ... 可以简单的理解为下面一句话就可以了: 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中. 作用类似于 Object.assign() ...
带你一文读懂Javascript中ES6的Symbol
带你一文读懂Javascript中ES6的Symbol 前言基础类型 Symbol Symbol.for 与 Symbol.keyFor Symbol.iterator Symbol.search ...
H5、CSS3和ES6新特性
CSS3新特性 01 新增语义化标签 <header>:头部标签 <nav>:导航标签 <article>:内容标签 <section>:定义文档某个区 ...
ES6新特性之了解ES6以及其发展历史
ES6 新特性现在使用主流的前端框架中,如ReactJS.Vue.js.angularjs等,都会使用到ES6的新特性,作为一名高级工程师而言,ES6也就成为了必修课,所以本套课程先以ES6的新特性 ...
五个小例子教你搞懂 JavaScript 作用域问题
原文:五个小例子教你搞懂 JavaScript 作用域问题众所周知,JavaScript 的作用域和其他传统语言(类C)差别比较大,掌握并熟练运用JavaScript 的作用域知识,不仅有利于我们阅 ...
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 三者之间的区别二.变量解构赋值三.模板字符串四.对象的 ...

彻底搞懂JavaScript 之 ES6新特性class(类)

彻底搞懂JavaScript 之 ES6新特性class(类)相关推荐

最新文章

热门文章