- 浏览: 11193 次
- 性别:
- 来自: 深圳
文章分类
最新评论
ECMAScript 6 在接下来的一段时间内将成为 ECMAScript的一个标准。这个标准预计在今年的时候就会被签署,不管在Github,还是在很多社区,javascript爱好者已经早已开始拥抱变化,享受ES6 带来的美好,这篇文章将介绍ES6的一些新特性。由于ES6 还没有很好地被浏览器支持,所以这篇文章的ES6代码将使用 Babel 进行编译。
ECMAScript 6 的新特性
箭头(Arrow)
=> 是function的简写形式,支持expression 和 statement 两种形式。同时一点很重要的是它拥有词法作用域的this值,帮你很好的解决this的指向问题,这是一个很酷的方式,可以帮你减少一些代码的编写,先来看看它的语法。
babel编译后结果:
类(class)
ES6 引入了class(类),让javascript的面向对象编程变得更加容易清晰和容易理解。类只是基于原型的面向对象模式的语法糖。
类的 prototype 属性和 __proto__ 属性
在上一篇 javascript面向对象编程 中我们已经了解到一个实例化对象会有一个 __proto__ 指向构造函数的 prototype 属性。在 class 中。同时具有 __proto__ 和 prototype 两个属性,存在两条继承链。
子类的 __proto__ 属性,表示构造函数的继承,总是指向父类。
子类的 prototype 的 __proto__ 属性表示方法的继承,总是指向父类的 prototype 属性。
我们先来看第一条 Cat.__proto__ === Animal 这条原型链。完成构造函数继承的实质如下:
第二条对原型链 Cat.prototype.__proto__ === Animal.prototype 完成方法的继承,实质如下:
Cat.prototype.__proto__ = Animal.prototype
另外还有还有三种特殊情况。
A继承Object,A的__prototype__ 指向父类Object. A的 prototype.__proto__ 指向父类Object的prototype。
从上篇文章中的 函数对象的原型 中我们可以了解到,函数是一种特殊的对象,所有函数都是 Function 的实例。
由于Cat不存在任何继承,就相当于一个普通函数,由于函数都是Function 的实例,所以 Cat.__proto__指向 Function.prototype. 第二条继承链指向父类(Function.prototype) 的prototype属性,所以 Cat.prototype.__proto__ === Object.prototype. Cat调用后会返回Object实例,所以 A.prototype.__proto__ 指向构造函数(Object)的prototype。
Cat是一个普通函数,所以继承 Function.prototype .第二条继承链不继承任何方法,所以
Module
到目前为止,javascript (ES5及以前) 还不能支持原生的模块化,大多数的解决方案都是通过引用外部的库来实现模块化。比如 遵循CMD规范的 Seajs 和AMD的 RequireJS 。在ES6中,模块将作为重要的组成部分被添加进来。模块的功能主要由 export 和 import 组成.每一个模块都有自己单独的作用域,模块之间的相互调用关系是通过 export 来规定模块对外暴露的接口,通过import来引用其它模块提供的接口。同时还为模块创造了命名空间,防止函数的命名冲突。
export,import 命令
ES6将一个文件视为一个模块,上面的模块通过 export 向外输出了一个变量。一个模块也可以同时往外面输出多个变量。
定义好模块的输出以后就可以在另外一个模块通过import引用。
整体输入,module指令
通过 import * as 就完成了模块整体的导入。
通过指令 module 也可以达到整体的输入。
不用关系模块输出了什么,通过 export default 指令就能加载到默认模块,不需要通过 花括号来指定输出的模块,一个模块只能使用 export default 一次
// 导入的时候不需要花括号
import test from './test.js';
一条import 语句可以同时导入默认方法和其它变量.
ECMAScript 6 的新特性
箭头(Arrow)
=> 是function的简写形式,支持expression 和 statement 两种形式。同时一点很重要的是它拥有词法作用域的this值,帮你很好的解决this的指向问题,这是一个很酷的方式,可以帮你减少一些代码的编写,先来看看它的语法。
([param] [, param]) => { statements } param => expression 然后再来看看例子,以及babel 编译后的结果。 [b]ES6:[/b] const arr = [1, 2, 3]; var temp = []; // Expression bodies arr.map(item = > item + 1); arr.map((item, index) = > item + 1); // Statement bodies arr.forEach(item = > { if(item == 1){ temp.push(item); } }); // Lexical this var bob = { name: 'xiao', friends: ['zhang', 'wang'], print: function () { this.friends.forEach(item = > { console.log(this.name + ' konows ' + item); }); } }
babel编译后结果:
// Lexical this var bob = { name: 'xiao', friends: ['zhang', 'wang'], print: function () { var _this = this; this.friends.forEach(function(item) { console.log(_this.name + ' konows ' + item); }); } }
类(class)
ES6 引入了class(类),让javascript的面向对象编程变得更加容易清晰和容易理解。类只是基于原型的面向对象模式的语法糖。
class Animal { // 构造方法,实例化的时候将会被调用,如果不指定,那么会有一个不带参数的默认构造函数. constructor(name,color) { this.name = name; this.color = color; } // toString 是原型对象上的属性 toString() { console.log('name:' + this.name + ',color:' + this.color); } } var animal = new Animal('dog','white'); animal.toString(); console.log(animal.hasOwnProperty('name')); //true console.log(animal.hasOwnProperty('toString')); // false console.log(animal.__proto__.hasOwnProperty('toString')); // true class Cat extends Animal { constructor(action) { // 子类必须要在constructor中指定super 方法,否则在新建实例的时候会报错. // 如果没有置顶consructor,默认带super方法的constructor将会被添加、 super('cat','white'); this.action = action; } toString() { console.log(super.toString()); } } var cat = new Cat('catch') cat.toString(); // 实例cat 是 Cat 和 Animal 的实例,和Es5完全一致。 console.log(cat instanceof Cat); // true console.log(cat instanceof Animal); // true
类的 prototype 属性和 __proto__ 属性
在上一篇 javascript面向对象编程 中我们已经了解到一个实例化对象会有一个 __proto__ 指向构造函数的 prototype 属性。在 class 中。同时具有 __proto__ 和 prototype 两个属性,存在两条继承链。
子类的 __proto__ 属性,表示构造函数的继承,总是指向父类。
子类的 prototype 的 __proto__ 属性表示方法的继承,总是指向父类的 prototype 属性。
class Cat extends Animal {} console.log(Cat.__proto__ === Animal); // true console.log(Cat.prototype.__proto__ === Animal.prototype); // true
我们先来看第一条 Cat.__proto__ === Animal 这条原型链。完成构造函数继承的实质如下:
class Cat extends Animal { construcotr() { return Animal.__proto__.call(this); } }
第二条对原型链 Cat.prototype.__proto__ === Animal.prototype 完成方法的继承,实质如下:
Cat.prototype.__proto__ = Animal.prototype
另外还有还有三种特殊情况。
class A extends Object {} console.log(A.__proto__ === Object); // true console.log(A.prototype.__proto__ === Object.prototype);
A继承Object,A的__prototype__ 指向父类Object. A的 prototype.__proto__ 指向父类Object的prototype。
从上篇文章中的 函数对象的原型 中我们可以了解到,函数是一种特殊的对象,所有函数都是 Function 的实例。
class Cat {} console.log(Cat.__proto__ === Function.prototype); //true console.log(Cat.prototype.__proto__ === Object.prototype); //true
由于Cat不存在任何继承,就相当于一个普通函数,由于函数都是Function 的实例,所以 Cat.__proto__指向 Function.prototype. 第二条继承链指向父类(Function.prototype) 的prototype属性,所以 Cat.prototype.__proto__ === Object.prototype. Cat调用后会返回Object实例,所以 A.prototype.__proto__ 指向构造函数(Object)的prototype。
class Cat extends null {}; console.log(Cat.__proto__ === Function.prototype); // true; console.log(Cat.prototype.__proto__ === null); //true
Cat是一个普通函数,所以继承 Function.prototype .第二条继承链不继承任何方法,所以
Cat.prototype.__proto__ == null.
Module
到目前为止,javascript (ES5及以前) 还不能支持原生的模块化,大多数的解决方案都是通过引用外部的库来实现模块化。比如 遵循CMD规范的 Seajs 和AMD的 RequireJS 。在ES6中,模块将作为重要的组成部分被添加进来。模块的功能主要由 export 和 import 组成.每一个模块都有自己单独的作用域,模块之间的相互调用关系是通过 export 来规定模块对外暴露的接口,通过import来引用其它模块提供的接口。同时还为模块创造了命名空间,防止函数的命名冲突。
export,import 命令
//test.js export var name = 'Rainbow'
ES6将一个文件视为一个模块,上面的模块通过 export 向外输出了一个变量。一个模块也可以同时往外面输出多个变量。
//test.js var name = 'Rainbow'; var age = '24'; export {name, age};
定义好模块的输出以后就可以在另外一个模块通过import引用。
//index.js import {name, age} from './test.js'
整体输入,module指令
//test.js export function getName() { return name; } export function getAge(){ return age; }
通过 import * as 就完成了模块整体的导入。
import * as test form './test.js';
通过指令 module 也可以达到整体的输入。
module test from 'test.js'; test.getName(); export default :arrow:
不用关系模块输出了什么,通过 export default 指令就能加载到默认模块,不需要通过 花括号来指定输出的模块,一个模块只能使用 export default 一次
// default 导出 export default function getAge() {} // 或者写成 function getAge() {} export default getAge;
// 导入的时候不需要花括号
import test from './test.js';
一条import 语句可以同时导入默认方法和其它变量.
import defaultMethod, { otherMethod } from 'xxx.js';
发表评论
-
浏览器跨域和安全访问问题
2017-07-20 10:36 1811注:需关闭打开的Chrome。否则,将没有效果! windo ... -
JavaScript常用方法
2017-06-15 13:10 524手机类型判断 var ua = navigator.use ... -
vue项目添加ESLint
2017-05-08 22:06 933eslint配置方式有两种: ... -
JS跨域之document.domain
2017-04-14 10:51 932浏览器在执行Javascript时 ... -
雅虎的34条军规
2017-04-12 17:54 4341、尽量减少HTTP请求次数 2、减少DNS查找次数 3、避 ... -
前端常用正则
2017-04-05 13:06 504// 制表符 ... -
前端知识体系
2016-10-06 20:07 3801. 布局框架: Bootstrap: http://getb ... -
JavaScript函数节流
2016-08-11 11:18 474函数节流 函数节流 ... -
JQlite
2016-07-01 10:44 633在电影《叶问》中,甄 ... -
javascript辨别浏览器系统IOS或Android
2016-03-21 17:30 656// 获取当前设备或移动终端浏览器版本信息 var de ... -
javascript中sort()的用法
2016-03-21 16:23 563sort() 方法用于对数组进行排序。 一、默认情况 在 ... -
网站页面添加至收藏夹
2016-03-18 11:01 831<script type="text/ja ...
相关推荐
ES6学习资源大全
### ES6 学习笔记知识点详解 #### 一、ECMAScript 概述 - **ECMA**(European Computer Manufacturers Association):欧洲计算机制造商协会,后更名为 Ecma International,主要致力于评估、开发和认可电信及...
ES6学习笔记 ES6(ECMAScript 6)是JavaScript语言的最新版本,引入了许多新的特性和变化。在本文中,我们将介绍ES6的学习心得,包括ES6的三种命名方式、箭头函数的介绍和应用、ES6字符串模板、ES6中的for和Array...
本学习笔记将聚焦于与ES5的区别,帮助初学者快速掌握ES6的核心概念。** 1. **变量声明:let和const** - `let`替代了`var`进行块级作用域的变量声明,解决了`var`的变量提升和函数作用域问题。 - `const`用于声明...
### ES6学习总结 #### 1)什么是ES6? **ES6**,即**ECMAScript 6**,是JavaScript语言的一种新版本标准,正式名称为ECMAScript 2015。它是JavaScript的一种规范,定义了语言的核心特性和API。自1997年发布第一个...
本资料包含的两份学习材料,即《es6标准入门》PDF文件和《es6入门》Word文件,将帮助你全面了解并掌握这个现代JavaScript的核心内容。** 首先,让我们来看看ES6中的关键特性之一——**箭头函数**。箭头函数提供了一...
### ES6 学习笔记整理 #### ES6 简介 ES6,即 ECMAScript 2015,是 JavaScript 的一个版本,引入了许多新的语法特性来简化开发过程并增强语言的功能性。这些特性包括但不限于:块级作用域变量、箭头函数、模板字符...
ES6,即ECMAScript 6,是JavaScript语言的新标准,全称为ECMAScript 2015。ES6的推出是为了解决ES5中的局限性,并对语言进行了很多扩展和改进。ES6与ES5相比,在语法和功能上增加了许多新的特性,这些改进不仅提高了...
本学习笔记将深入探讨ES6中的核心概念,帮助你全面掌握这一现代JavaScript语法。 1. **let 和 const 声明** 在ES6之前,我们主要使用`var`进行变量声明,但`let`和`const`的引入解决了作用域和提升(hoisting)的...
ES6 基础语法
ES6学习笔记。。。。。。。。。。。。。。。。。
ECMAScript 6(简称ES6)是于2015年6月正式发布的JavaScript语言的标准,正式名为ECMAScript 2015(ES2015)。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言
在现代前端开发中,ES6(ECMAScript 2015)的引入极大地提升了JavaScript的编程体验。然而,浏览器对ES6语法的支持并不完全,因此我们需要借助构建工具如Gulp和Webpack来转换代码,使其能在大部分环境中运行。本文将...
在ES6的学习中,Elasticsearch是一个非常重要的部分,它是一个分布式的全文搜索引擎,常用于实时数据分析和大规模数据检索。本篇文章将详细讲解Elasticsearch 6的基础操作,包括安装、文档操作、批量处理等内容。 ...
ES6(ECMAScript 2015)作为JavaScript语言的重要版本更新,确实增加了一系列新功能来提升开发体验和代码效率。以下是一些显著的新增功能: 新的原始类型和变量声明: Symbol:ES6 引入了一种新的原始类型 Symbol,...
初识es6 时 先看看学习大纲可以帮助学习者更好的进入学习状态。
es6学习资料,es6学习资料es6学习资料es6学习资料es6学习资料es6学习资料es6学习资料
压缩包包含了ES6中比较常用的知识点代码总结,这是博主自学过程中存下来的,包括,le&const,变量的解构,模块化,函数参数默认值,箭头函数,字符与对象的拓展,class类,try/catchz异常处理,promise等等,请放心...
**ES6 学习指南** ES6,全称 ECMAScript 2015,是 JavaScript 语言的一个重要版本更新,引入了许多新特性,极大地提高了开发效率和代码质量。本篇将详细介绍 ES6 的核心概念和重要特性,帮助开发者更好地理解和运用...