ES6的一些说明
一 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的一些说明的更多相关文章
- ES6模块import细节
写在前面,目前浏览器对ES6的import支持还不是很好,需要用bable转译. ES6引入外部模块分两种情况: 1.导入外部的变量或函数等: import {firstName, lastName, ...
- webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- ES6的一些常用特性
由于公司的前端业务全部基于ES6开发,于是给自己开个小灶补补ES6的一些常用特性.原来打算花两天学习ES6的,结果花了3天才勉强过了一遍阮老师的ES6标准入门(水好深,ES6没学好ES7又来了...) ...
- ES6(块级作用域)
我们都知道在javascript里是没有块级作用域的,而ES6添加了块级作用域,块级作用域能带来什么好处呢?为什么会添加这个功能呢?那就得了解ES5没有块级作用域时出现了哪些问题. ES5在没有块级作 ...
- es6小白学习笔记(一)
1.let和const命令 1.es6新增了let和const命令,与var用法类似,但它声明的变量只在let所在的代码块内有效(块级作用域,es5只有全局和函数作用域) { let a = 1; v ...
- ES6之变量常量字符串数值
ECMAScript 6 是 JavaScript 语言的最新一代标准,当前标准已于 2015 年 6 月正式发布,故又称 ECMAScript 2015. ES6对数据类型进行了一些扩展 在js中使 ...
- ES6之let命令详解
let与块级作用域 { var foo='foo'; let bar='bar'; } console.log(foo,'var'); //foo varconsole.log(bar ,'bar') ...
- ES6 箭头函数中的 this?你可能想多了(翻译)
箭头函数=>无疑是ES6中最受关注的一个新特性了,通过它可以简写 function 函数表达式,你也可以在各种提及箭头函数的地方看到这样的观点——“=> 就是一个新的 function”. ...
- ES6+ 现在就用系列(二):let 命令
系列目录 ES6+ 现在就用系列(一):为什么使用ES6+ ES6+ 现在就用系列(二):let 命令 ES6+ 现在就用系列(三):const 命令 ES6+ 现在就用系列(四):箭头函数 => ...
- ES6+ 现在就用系列(一):为什么使用ES6+
系列目录 ES6+ 现在就用系列(一):为什么使用ES6+ ES6+ 现在就用系列(二):let 命令 ES6+ 现在就用系列(三):const 命令 ES6+ 现在就用系列(四):箭头函数 => ...
随机推荐
- JAVA的程序基本结构和数据类型
//源程序 Hello.java public class Hello { static String str ="Hello World"; public static void ...
- codevs 1487 大批整数排序(水题日常)
时间限制: 3 s 空间限制: 16000 KB 题目等级 : 黄金 Gold 题目描述 Description !!!CodeVS开发者有话说: codevs自从换了评测机,新评测机的内存计算 ...
- iOS 查看包架构信息
lipo -info libUMSocial_Sdk_4.2.a 查看包架构信息
- struts2的动态方法配置
动态方法调用配置 <package name="test" extends="struts-default"> <aciton name=&q ...
- layui和jquery冲突:Syntax error, unrecognized expression: +
问题 layui创建table数据表格,但点击第二页时控制台报错,错误信息如下: 解决方法 https://fly.layui.com/jie/24224/ http://www.layui.com/ ...
- 风格附加css
#header #blogTitle { background: url("http://images.cnblogs.com/cnblogs_com/aiwuxia/1249780/o_1 ...
- 获得Java中System对应一些属性值
public static void main(String[] args){ System.out.println("Java运行时环境版本:\n"+System.getProp ...
- Linux关于FTP安全
https://www.cnblogs.com/Hyber/archive/2017/02/04/6362916.htmlhttps://www.cnblogs.com/ichunqiu/p/7300 ...
- ios 团购信息客户端demo(二)
接上一篇,这篇我们对我们的客户端加入KissXML,MBProgressHUD,AQridView这几个库,首先我们先加入KissXML,这是XML解析库,支持Xpath,可以方便添加更改任何节点.先 ...
- ios面试题(三)
4.写一个setter方法用于完成@property (nonatomic,retain)NSString *name,写一个setter方法用于完成@property(nonatomic,copy) ...