摘要:类总所周知,不像其他面向对象语言那样支持类,但是可以通过函数和原型来模拟类。如果你学习过或者其他面向对象语言的话,你会觉得很熟悉。结论下一个版本的会带来一个更加简单更加友好的语法来帮助那些从面向对象语言转过来的开发者的学习。
原文地址:http://www.frontendjournal.com/javascript-es6-learn-important-features-in-a-few-minutes/
下一个Javascript版本,也就是ECMAScript 6(ES6或者Harmony),给我们带来了很多令人兴奋的特性。下面我们来快速看看这些特性。下面列出的这些特性是我觉得很可能会在你日常工作中用到的。
如果你是一个Javascript新手或者原来是做服务器端开发的,那么你也不必担心,我相信现在是学习Javascript的最好时机,因为ES6有很多简介并且友好的特性。
总所周知,Javascript不像其他面向对象语言那样支持类,但是Javascript可以通过函数和原型来模拟类。
下面是一个创建类的新语法。如果你学习过Java或者其他面向对象语言的话,你会觉得很熟悉。
class Project { constructor(name) { this.name = name; } start() { return "Project " + this.name + " starting"; } } var project = new Project("Journal"); project.start(); // "Project Journal starting"
所有你在类里面声明的方法都会添加到类的原型中。
正如前面说的,Javascript不支持类。所以,既然它不支持类,那么它支持继承吗?
的确,Javascript中的继承大部分是通过原型实现。如果你对原型不熟悉,那么一个好消息就是在ES6中你没必要了解原型就可以使用类和继承。原型并不难学习但是在这里你只要知道原型是javascript中实现继承的一种方式就可以了。
下面我创建了一个Project的子类,命名为WebProject并且继承Project中的属性和方法
class WebProject extends Project { constructor(name, technologies) { super(name); this.technologies = technologies; } info() { return this.name + " uses " + arrayToString(this.technology); } } function arrayToString(param) { // ... some implementation } var webJournal = new WebProject("FrontEnd Journal", "javascript"); webJournal.start(); // "FrontEnd Journal starting" webJournal.info(); // "FrontEnd Journal uses javascript"
注意到在WebProject的构造函数中调用了Project的构造函数,然后就可以使用它的属性和方法了。
如果你不想把你的JS代码都放在一个文件中或者你想在你的应用中的其他部分重用一些功能,那么你就很可能要用到模块。你需要记住的一个变量是export,只要在你要暴露出来的方法前面加上export就可以了。
下面是我们应用的结构。Project类和WebProject类被放在application.js中。
myproject (folder) | -- modules (folder) | | | -- helpers.js | -- application.js
让我们把arrayToString()方法从application.js中分离出来然后放在modules/helpers.js模块中,这样我们就可以在其他地方重用它了。
// modules/helper.js export function arrayToString(param) { // some implementation }
现在我们只需要在application.js中导入我们的模块就可以了。
// application.js import { arrayToString } from "modules/helpers"; class WebProject extends Project { constructor(name, technologies) { super(name); this.technologies = technology; } info() { return this.name + " uses " + arrayToString(this.technology); } } // ...ES6的其他特性
下面两个ES6中的特性就比较有趣了。let和const。
let为了理解let,首先我们需要记住var创建的是函数作用域的变量:
function printName() { if(true) { var name = "Rafael"; } console.log(name); // Rafael }
注意到,不像Java或者许多其他语言那样,Javascript中任何在一个函数内部创建的变量都会被提升到函数的顶部。这就意味着无论你在哪里声明的变量,效果就像都是在函数顶部声明的一样。这种行为就叫做提升
所以上面的函数可以理解成下面这样:
function printName() { var name; // variable declaration is hoisted to the top if(true) { name = "Rafael"; } console.log(name); // Rafael }
那么,let是如何工作的呢?
我们用同样的例子来看看:
function printName() { if(true) { let name = "Rafael"; } console.log(name); // ReferenceError: name is not defined }
由于let是在块内部,所以name变量只能在块中访问。
function printName() { var name = "Hey"; if(true) { let name = "Rafael"; console.log(name); // Rafael } console.log(name); // Hey }
在这个例子中,由于let引用了已经声明的变量,所以"Rafael"只在块内部合法。在块的外部name的值是"Hey"。
总之,var是函数作用域的而let是块级作用域的。
Javascript在过去很长一段时间都不支持创建常量。随着ES6的到来,你将可以创建常量并且保证它的值不会被改变。
创建常量的语法如下:
const SERVER_URL = "http://frontendjournal.com"其他有趣的特性
ECMAScript 6 同时还带来了很多其他特性:Map,WeakMap,Generators和Proxies。
什么时候可以开始使用ES6? Firefoxs是支持最多特性的浏览器而Juriy Zaytsev已经把主要浏览器的支持列出来了。 http://kangax.github.com/es5-compat-table/es6/
一些ES6特性在NodeJS中也可以使用。可以查看Alex Young的博客ES6 for Node。
下一个版本的Javascript会带来一个更加简单更加友好的语法来帮助那些从面向对象语言转过来的开发者的学习。现在的唯一的问题就是主要浏览器对ES6的全面支持还需要一些时间。
译者注: 目前对ECMAScript 6支持比较好的两个浏览器就是Chrome和Firefox,为了更好地体验ES6,我们需要下载开发者版本的浏览器,Chrome Canary 下载地址,Firefox Aurora 下载地址。
要在Firfox中开启ECMAScript 6,需要把标签改为。1.8是Firefox现在支持的版本最高的javascript。
在Chrome中开启ECMAScript 6,只需要使用严格模式就可以了,也就是在脚本前面加上"use strict"。不过在这之前还需要在地址栏中输入chrome://flags/,然后启用实验性 JavaScript。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/78149.html
摘要:今天收到一封邮件组的邮件,是关于的,版将作为第一个的版。版特性包括挑了感兴趣的看了下,包括以下通过使用并行来改进最坏情况下的延迟。虽然式设计成避免的,但有些情况下回收器会降级成。 今天收到一封邮件组的邮件,是关于JDK 10 First Release Candidate的, JDK10 b43版将作为第一个JDK10的RC版。 b43版特性包括: 286: Local-Variabl...
摘要:与此相对,强类型语言的类型之间不一定有隐式转换。三为什么是弱类型弱类型相对于强类型来说类型检查更不严格,比如说允许变量类型的隐式转换,允许强制类型转换等等。在中,加性运算符有大量的特殊行为。 从++[[]][+[]]+[+[]]==10?深入浅出弱类型JS的隐式转换 本文纯属原创? 如有雷同? 纯属抄袭? 不甚荣幸! 欢迎转载! 原文收录在【我的GitHub博客】,觉得本文写的不算烂的...
摘要:地址运行在中的本周增长数是一个可在容器中运行应用或者桌面的工具库。地址自动补全本周增长数是一个自动补全输入命令的终端工具。地址数据库本周增长数用语言编写的用于查看和最终编辑数据库的,目前只支持,的支持在规划中。 .markdown-body{word-break:break-word;line-height:1.75;font-weight:400;font-size:15px;overf...
摘要:作者小鱼干机械臂可能在医疗剧中看过,可以用来执行一些精细化的操作,例如缝合之类的。地址周榜新编程语言本周增长数一种正在开发中的编译型编程语言。地址资源监控本周增长数它是一个自托管的监控工具,类似于。 .markdown-body{word-break:break-word;line-height:1.75;font-weight:400;font-size:15px;overflow-x:...
阅读 1182·2021-10-18 13:32
阅读 2218·2021-09-24 09:47
阅读 1253·2021-09-23 11:22
阅读 2384·2019-08-30 14:06
阅读 507·2019-08-30 12:48
阅读 1936·2019-08-30 11:03
阅读 457·2019-08-29 17:09
阅读 2369·2019-08-29 14:10