一 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 = '25'; 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('二哈','10'); !!这段代码,自己写忘记了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>