1.静态函数

  1.什么是静态函数

  静态函数最重要的就是不用创建一个实例变量就可以进行调用,在C++里面,无法访问this对象,

  而在JS里面由于js的this对象支持,是可以访问this对象,只是this对象有所不同

  2.ES6静态函数代码

classtestClass{
static staticFunc(){
console.log("instatic")
}
}

将会被babel转换为:

"use strict";

var _createClass = function () {
function defineProperties(target, props)
{
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor)
descriptor.writable = true;
//利用defineProperty来创建函数
Object.defineProperty(target, descriptor.key, descriptor);
}
}
//创建函数,根据传入的数组创建成员函数和静态函数
return function (Constructor, protoProps, staticProps)
{
//注意这里,传入的是Constructor.prototype和Constructor
//所以可以区分是静态函数还是成员函数
if (protoProps)
defineProperties(Constructor.prototype, protoProps);
if (staticProps)
defineProperties(Constructor, staticProps);
return Constructor;
};
}(); function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
} var testClass = function () { function testClass() {
/*
*这是是为了保证这个class只能new出来,在usestrict模式下,this是undefined,
*正常模式下,this为window,也就是说我们这直接调用这个函数,_classCallCheck的时候将会抛出异常
**/
_classCallCheck(this, testClass);
} _createClass(testClass, null, [{
key: "staticFunc",
value: function staticFunc() {
console.log("instatic");
}
}]); return testClass;
}(); testClass.staticFunc();

2.=>符号

=>符号的出现是为了解决this作用域改变的问题

function test(){
this.x = 5;
this.f = function(){
console.log(this.x)
}
} let xx = new test();
xx.f.call(this);

在上面的代码里面,本来是期望回调的时候log输出5的,但是此时call的时候this被修改为全局,所以将会产生错误,因为全局里面并没有x

function test(){
this.x = 5;
this.f = ()=>{
console.log(this.x)
}
}
let xx = new test();
xx.f.call(this);

将代码修改为上面的代码后,即可正常输出5

"use strict";

function test() {
var _this = this; //通过创建一个临时的_this变量来规避this改变的问题
this.x = 5;
this.f = function () {
console.log(_this.x);
};
} var xx = new test();
xx.f.call(undefined); //在babel默认的use strict模式下,是不会有默认的全局this的

3.解构参数

/*这里只是单纯地翻译
* var a=arr[0]
* var b=arr[1]
* var c=arr[2]
* */
let arr = [1,2,3];
let [a, b, c] = arr; /*
* 这里也只是由编译器自动生成分割的语法,有点类似于erlang的语法
* var head = 1;
* var second = 2;
* var tail = [3, 4]
* */
{
let [head,second, ...tail] = [1, 2, 3, 4];
} {
/**
* 这里暂时不管yiled是怎么转换的,转换完的代码后:
* var first = _fibs[0]
* var second = _fibs[1]
* var three = _fibs[2]
* 还是自动生成与语法糖
*/
function* fibs() {
var a = 0;
var b = 1;
while (true) {
yield a;
[a, b] = [b, a + b];
}
} var [first, second, third, fourth, fifth, sixth] = fibs();
} {
/*
* 跟之前的大同小异,
* var _foo$bar = { foo: “lorem", bar: "ipsum" };
* var bar = _foo$bar.bar;
* var foo = _foo$bar.foo;
* */
var { bar, foo } = { foo: "lorem", bar: "ipsum" }; function t(a){
if(a == 0 ){
return [1, 2, 3];
}
else{
return [];
}
} let [a, b, c] = t(0);
let [d=1, e=2, f] = t(1);
console.log(d)
}

4.默认参数,不定参数,扩展参数

/*
* 主要是利用arguments取得所有的参数,然后从1开始,把参数都取出来,如果是a, b,...tail则会从2开始
* for (var _len = arguments.length, needles = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
* needles[_key - 1] = arguments[_key];
* }
* */
function containsAll(haystack,...tail) {
console.log(arguments.length)
} containsAll(1, 2,3,4); //判断arguments的[0]是否为undefined
//var a = arguments.length <= 0 || arguments[0] === undefined ? '11' : arguments[0];
function containsAll2(a = '11'){
console.log(a)
} containsAll2(2)

5.yield

/*
//这个regeneratorRuntime估计是polyfill的东西
var _marked = [fu].map(regeneratorRuntime.mark); function fu() {
var i;
//这里讲函数内部的变量声明在这里,然后利用闭包一直保持住这些变量的改变的改变,再通过switch来选择执行到那一段
//跟C++里面的无堆栈routine的实现比较相似
return regeneratorRuntime.wrap(function fu$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
i = 9; i++;
_context.next = 4;
return i; case 4:
i++;
_context.next = 7;
return i; case 7:
case "end":
return _context.stop();
}
}
}, _marked[0], this);
}
*/ function *fu(){
let i = 9;
i++;
yield i;
i++;
yield i;
} fu();
fu();

ES6转换为ES5的更多相关文章

  1. ES6+转ES5

    npm init //创建package.json文件 下载转换babel库及其100+依赖 npm install babel-cli -D npm install babel-preset-env ...

  2. es6转es5

    一.在没有IDE情况下的转换 在"我的电脑->D盘”新建个文件夹es6,文件夹里新建一个文件es6.js. 打开命令行窗口 1.先全局安装babel-cli,输入命令 npm inst ...

  3. webpack es6 to es5支持配置

    1. 安装webpack npm install webpack --save-dev 2. 安装babel  实现 ES6 到 ES5 npm install --save-dev babel-co ...

  4. ES6转ES5:Gulp+Babel

    目标: ES6代码转成ES5 对转换后的ES5进行压缩 以上步骤自动监控执行 步骤: 1.安装插件 在命令行中定位到项目根目录 安装全局 Gulp npm install -g gulp 安装项目中使 ...

  5. Babel 转码器 § es6转换es5

    Babel 转码器 § es6转换es5 实时转码 /  Repl  -babel-node / babel-register(自动转码引入babel-register模块) 配置文件.babelrc ...

  6. es6转es5 在线转换工具

    es6转es5 在线转换工具 Babeljs es6console

  7. vue2.0在android5.0白屏, es6转es5保证浏览器兼容性

    1. 安装 npm install --save-dev babel-preset-es2015 2. 安装 npm install --save-dev babel-preset-stage-3 3 ...

  8. es6转es5在线工具

    es6转es5在线工具:https://babeljs.io/repl/# 程序员常用在线工具:https://tool.lu/

  9. ES6+转ES5(webpack+babel、指定多个js文件、自动注入)

    接续上篇ES6+转ES5,本篇将使用webpack和babel将多个不同目录下指定的多个ES6+语法的js文件编译为ES5,并将编译后的文件配置注入对应的html文件. 所需环境node.npm.设置 ...

随机推荐

  1. LinkedList其实就那么一回事儿之源码分析

    上篇文章<ArrayList其实就那么一回儿事儿之源码分析>,给大家谈了ArrayList, 那么本次,就给大家一起看看同为List 家族的LinkedList. 下面就直接看源码吧: p ...

  2. public,protected,private辨析

    一直没有很清楚理解这三个修饰权限的区别,今天终于搞明白了,现总结如下: private:最严格的一个,子类无法继承,只有本类内部内访问,在其余类及子类中通过 "类名.方法" 去调用 ...

  3. 如何替换掉.net toolStrip控件溢出按钮背景图

    在使用.net toolStrip控件的时候,  toolStrip里面的item宽度超过本身宽度时,会出现一个溢出按钮:OverflowButton,这个按钮是控件的一个属性,其实也是继承自Tool ...

  4. GCC选项 –I,-l,-L

    -I:指定第一个寻找头文件的目录 -L:指定第一个寻找库文件的目录 -l:表示在库文件目录中寻找指定的动态库文件 例: gcc –o hello hello.c –I /home/hello/incl ...

  5. PHP EMS: 开源 在线考试系统安装

    PHPEMS: 在线考试系统调测记录 下载安装软件包 PE2014.RAR 环境要求:利用了RHEL 5.X的一个环境,系统要求的运行环境是PHP 5.2以上,MYSQL 5.0以上.看了一下光盘,发 ...

  6. 使用Jsoup 抓取页面的数据

    需要使用的是jsoup-1.7.3.jar包   如果需要看文档我下载请借一步到官网:http://jsoup.org/ 这里贴一下我用到的 Java工程的测试代码 package com.javen ...

  7. UINavigationController导航控制器

    UINavigationController导航控制器,是多个界面间跳转的重要元素,可以理解为它存储着多个viewController,它的存储结构是栈,栈的特点是先进后出,所以添加视图控制器时,要特 ...

  8. asp.net导出word(word2007)

    1.只能导出成word2007格式(.docx),可直接导出到客户端 2.服务器上不需要装任何东西,也没有权限限制,比较适合导出表格(支持图片) 3.需要一个国外的DocX.dll插件 4.需要添加引 ...

  9. sqoop的export的说明

    1.通用参数说明

  10. oracle查看当前用户权限

    查看用户和默认表空间的关系select username,default_tablespace from dba_users;--查看当前用户能访问的表select * from user_table ...