一 ES6 即 ECMAScript6

  ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。

二  ECMAScript和JavaScript的关系

  一个常见的问题是,ECMAScript和JavaScript到底是什么关系?

要讲清楚这个问题,需要回顾历史。1996年11月,JavaScript的创造者Netscape公司,决定将JavaScript提交给国际标准化组织ECMA,希望这种语言能够成为国际标准。次年,ECMA发布262号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为ECMAScript,这个版本就是1.0版。

该标准从一开始就是针对JavaScript语言制定的,但是之所以不叫JavaScript,有两个原因。一是商标,Java是Sun公司的商标,根据授权协议,只有Netscape公司可以合法地使用JavaScript这个名字,且JavaScript本身也已经被Netscape公司注册为商标。二是想体现这门语言的制定者是ECMA,不是Netscape,这样有利于保证这门语言的开放性和中立性。

因此,ECMAScript和JavaScript的关系是,前者是后者的规格,后者是前者的一种实现(另外的ECMAScript方言还有Jscript和ActionScript)。日常场合,这两个词是可以互换的。

三 ES6的常用方法

  1 模板字符串,拼接变量使用`${变量名}`.

<script>
var name = 'tony';
var age = '';
console.log(`'今年${name} ${age}岁'`)
</script>

  2 箭头函数

  伪代码:function 函数名(参数){}  === var 函数名 = (参数)=>{}

<script>
function add(x,y) {
return x+y
}
// alert(add(1,2)) var minus = (x,y)=>{
return x-y
}
alert(minus(2,1))
</script>

  3 对象的单体模式,使用对象的单体模式解决了this的指向问题。

  创建对象的两种方法。ES5 与ES6的区别

<script>
// 1
var person = {
name:'king',
age:25,
fav:function () {
alert(this.name) // es5的函数中的this指向了当前对象
}
}
person.fav()
// 2
var person = {
name:'king',
age:25,
fav:()=>{
console.log(this.name) // es6注意事项:箭头函数会改变this的指向 父级
}
}
person.fav()
</script>

  如何解决?

<script>
var person = {
name:'king',
age:25,
fav(){
console.log(this)
}
}
person.fav()
</script>

  输出:

{name: "king", age: 25, fav: ƒ} 

四 ES6的面向对象

  ES5与ES6的区别

  1 ES5

    构造函数创建对象

<script>
function Dog(name,age) {
this.name = name;
this.age = age;
}
Dog.prototype.showName = function () {  //js中有原型prototype
alert(this.name)
};
Dog.prototype.showAge = function () {
alert(this.age)
};
var d = new Dog('二哈',''); !!这段代码,自己写忘记了var,new
d.showName();
d.showAge();
</script>

  2 ES6  使用class 类方式创建

<script>
// constructor 构造器 class方式创建 单体模式之间不要有逗号
class Cat{
constructor(name,age){
this.name = name;
this.age = age;
}
showName(){
alert(this.name);
}
showAge(){
alert(this.age);
}
}
var c = new Cat('波斯猫',8);
c.showAge();
c.showName();
</script>

ES6的一些说明的更多相关文章

  1. ES6模块import细节

    写在前面,目前浏览器对ES6的import支持还不是很好,需要用bable转译. ES6引入外部模块分两种情况: 1.导入外部的变量或函数等: import {firstName, lastName, ...

  2. webpack+react+redux+es6开发模式

    一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...

  3. ES6的一些常用特性

    由于公司的前端业务全部基于ES6开发,于是给自己开个小灶补补ES6的一些常用特性.原来打算花两天学习ES6的,结果花了3天才勉强过了一遍阮老师的ES6标准入门(水好深,ES6没学好ES7又来了...) ...

  4. ES6(块级作用域)

    我们都知道在javascript里是没有块级作用域的,而ES6添加了块级作用域,块级作用域能带来什么好处呢?为什么会添加这个功能呢?那就得了解ES5没有块级作用域时出现了哪些问题. ES5在没有块级作 ...

  5. es6小白学习笔记(一)

    1.let和const命令 1.es6新增了let和const命令,与var用法类似,但它声明的变量只在let所在的代码块内有效(块级作用域,es5只有全局和函数作用域) { let a = 1; v ...

  6. ES6之变量常量字符串数值

    ECMAScript 6 是 JavaScript 语言的最新一代标准,当前标准已于 2015 年 6 月正式发布,故又称 ECMAScript 2015. ES6对数据类型进行了一些扩展 在js中使 ...

  7. ES6之let命令详解

    let与块级作用域 { var foo='foo'; let bar='bar'; } console.log(foo,'var'); //foo varconsole.log(bar ,'bar') ...

  8. ES6 箭头函数中的 this?你可能想多了(翻译)

    箭头函数=>无疑是ES6中最受关注的一个新特性了,通过它可以简写 function 函数表达式,你也可以在各种提及箭头函数的地方看到这样的观点——“=> 就是一个新的 function”. ...

  9. ES6+ 现在就用系列(二):let 命令

    系列目录 ES6+ 现在就用系列(一):为什么使用ES6+ ES6+ 现在就用系列(二):let 命令 ES6+ 现在就用系列(三):const 命令 ES6+ 现在就用系列(四):箭头函数 => ...

  10. ES6+ 现在就用系列(一):为什么使用ES6+

    系列目录 ES6+ 现在就用系列(一):为什么使用ES6+ ES6+ 现在就用系列(二):let 命令 ES6+ 现在就用系列(三):const 命令 ES6+ 现在就用系列(四):箭头函数 => ...

随机推荐

  1. 洛谷 P1744 采购特价商品

    题目背景 <爱与愁的故事第三弹·shopping>第一章. 题目描述 中山路店山店海,成了购物狂爱与愁大神的“不归之路”.中山路上有n(n<=100)家店,每家店的坐标均在-1000 ...

  2. mohout安装

    安装完成之后的环境变量的配置如下: JAVA_HOME=/usr/local/jdk1.8.0_144JRE_HOME=/usr/java/jdk1.8.0_144/jreCLASSPATH=.:$J ...

  3. Python学习日志9月15日

    一周就要过去了,而我跟一周以前没什么区别.回想一下,我这周做了什么事情呢.恍然若失.这周的精力都浪费在很多不必要的事情上了.学过一片古文,讲后羿学射箭,他有一个同学跟他一样聪明,在一起学习.后羿呢,专 ...

  4. 单调栈3_水到极致的题 HDOJ4252

    A Famous City 题目大意 给出正视图  每一列为楼的高度 最少有几座楼 坑点 楼高度可以为0 代表没有楼 贡献了两发RE 原因 if(!s.empty()&&tem){s. ...

  5. shell脚本,怎么实现每次新开一个shell都输出一个提示语?

    [root@localhost wyb]# cat test.sh echo -e "\033[32mhello,This is wangyuebo's shell\033[0m" ...

  6. JAVA遍历map元素

    第一种: Map map = new HashMap(); Iterator iter = map.entrySet().iterator(); while (iter.hasNext()) { Ma ...

  7. perl学习二:简单变量

    字符串变量:${}1.单引号:不进行变量替换,不进行转义,字符串可以跨行.2.双引号:变量替换(贪婪匹配原则).支持转义字符(转义字符可以另外看)3.反引号 字符串的特殊表示方法:qq(...) q( ...

  8. python爬虫基础08-selenium大全2/8-Chrome Webdriver启动选项

    Selenium笔记(2)Chrome Webdriver启动选项 本文集链接:https://www.jianshu.com/nb/25338984 在Selenium中使用不同的Webdriver ...

  9. ASP.NET使用Memcached高缓存实例的初级介绍

    Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提供动态.数据库驱动网站的速度.Memcached ...

  10. Python日志(logging)模块,shelve,sys模块

    菜鸟学python第十七天 1.logging 模块 logging模块即日志记录模块 用途:用来记录日志 为什么要记录日志: 为了日后复查,提取有用信息 如何记录文件 直接打开文件,往里写东西 直接 ...