ES5和ES6作用域
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>ES5和ES6的区别</title>

</head>

<body>

    <script type="text/javascript">

    //ES5 中作用域，

    const callbacks = []

    //i是通过var定义的 是全局变量

    for (var i = 0; i <= 2; i++) {

        //闭包的作用域是全局

        callbacks[i] = function() {

            return i * 2 //callbacks中的return i*2，是对变量的引用，而不是对函数变量值的引用。函数体中是一个变量，而不是一个值

        }

    }

    console.table([

        callbacks[0](), //6,for循环执行完毕，i=3，调用callback的时候 i=3

        callbacks[1](), //6

        callbacks[2](), //6

    ]);

    console.log([

        callbacks[0](),

        callbacks[1](),

        callbacks[2](),

    ]);

    //ES6  作用域

    const callbacks2 = []

    //用let声明的变量有块作用域的概念

    for (let j = 0; j <= 2; j++) {

        callbacks2[j] = function() {

            return j * 2 //闭包取决于当前的块作用域，每循环一次，它就重新生成新的作用域

        }

    }

    console.table([

        callbacks2[0](), //0

        callbacks2[1](), //2

        callbacks2[2](), //4

    ]);

    //ES5 es5中要执行立即执行函数（(function(){},()），才能对作用域进行隔离。

    ((function() {

        const foo = function() {

            return 1;

        }

        console.log("foo === 1", foo() === 1);

        ((function() {

            const foo = function() {

                return 2;

            }

            console.log("foo === 2", foo() === 2);

        })())

        console.log("foo === 1", foo() === 1);

    })())

    //ES6  es6:{}表示一个新的作用域，{}可以对作用域进行隔离。

    {

        function foo() {

            return 1;

        }

        console.log("foo === 1", foo() === 1); {

            function foo() {

                return 2;

            }

        }

        console.log("foo === 2", foo() === 2);

    }

    //ES3,ES5写法

    var evens = [1, 2, 3, 4, 5];

    var odds = evens.map(function(v) { //遍历

        return v + 1

    });

    console.log(evens, odds)

    //ES6箭头函数

    {

        let evens = [1, 2, 3, 4, 5];

        let odds = evens.map(v => v + 1);

        console.log(evens, odds)

    }

    /*

    *箭头函数与普通函数的区别，在于this的绑定

    */

    //ES3,ES5，this指向是该函数被调用的对象

    {

        var factory = function() {

            this.a = 'a';

            this.b = 'b';

            this.c = {

                a: 'a+',

                b: function() {

                    return this.a

                }

            }

        }

        console.log(new factory().c.b()); //a+

    }

    //ES6  this指向定义时的this

    {

        var factory = function() {

            this.a = 'a';

            this.b = 'b';

            this.c = {

                a: 'a+',

                b: () => {

                    return this.a

                }

            }

        }

        console.log(new factory().c.b()); //a

    }

    /*

     **默认参数

     */

    {

        //ES3,ES5默认参数写法

        function f(x, y, z) {

            if (y === undefined) {

                y = 7;

            }

            if (z === undefined) {

                z = 42;

            }

            return x + y + z;

        }

        console.log(f(1)); //50

        console.log(f(1, 3)); //46

    } {

        //ES6  默认参数写法

        function f(x, y = 7, z = 42) {

            return x + y + z;

        }

        console.log(f(1)); //50

        console.log(f(1, 3)); //46

    } {

        //es6 检查X默认参数是否赋值了

        //先声明一个函数

        function checkParameter() {

            // throw new Error阻止js运行

            throw new Error('can\'t be empty')

        }

        function f(x = checkParameter(), y = 7, z = 42) {

            return x + y + z;

        }

        console.log(f(2));

        try {

            f();

        } catch (e) {

            console.log(e)

        } finally {}

    } {

        // ES3,ES5  可变参数

        function f() {

            var a = Array.prototype.slice.call(arguments); //伪数组，获取当前的参数列表

            var sum = 0; //初始值

            a.forEach(function(item) {

                sum += item * 1; //求和运算

            })

            return sum;

        }

        console.log(f(1, 2, 3))

    } {

        //ES6 可变参数写法

        //...a代表扩展运算符，可变参数的列表

        function f(...a) {

            var sum = 0;

            a.forEach(item => {

                sum += item * 1; //求和运算

            })

            return sum;

        }

        console.log(f(1, 2, 3))

    }

    /*

    **合并数组

    */

    {

        //es5 合并数组

        var params = ['hi','true',7];

        var other = [1,2].concat(params);

        console.log(other)

    }

    {

        //es6 利用扩展运算符合并数组写法

        var params = ['hi','true',7];

        var other = [1,2,...params];

        console.log(other)

    }

    </script>

</body>

</html>

效果图：

ES5和ES6作用域的更多相关文章

  1. React入门 (1)—使用指南（包括ES5和ES6对比）

    前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...

  2. JavaScript、ES5和ES6的介绍和区别

    JavaScript由三部分组成: ECMAScript(核心) DOM(文档对象模型) BOM (浏览器对象模型) ES5(ECMAScript第五个版本) strict模式 严格模式,限制一些用法 ...

  3. ES5和ES6那些你必须知道的事儿(三)

    ES5和ES6那些你必须知道的事儿 ES6新增的东西 一.块级作用域:关键字let,常量const let与var的区别: a.不会进行变量声明提升 b.变量不允许被重复定义 c.变量不允许被删除 d ...

  4. ES5与ES6的小差异

    ES5与ES6的小差异 变量的定义 ES6与ES5的区别 ES5: <script> console.log(username); var username; var username = ...

  5. React Native的语法之ES5和ES6

    原文地址:http://www.devio.org/2016/08/11/React-Native%E4%B9%8BReact%E9%80%9F%E5%AD%A6%E6%95%99%E7%A8%8B- ...

  6. 多角度对比 ES5与ES6的区别

    ES5与ES6的对比不同点整理 本文关键词:ES6,javascript, 1.Default Parameters(默认参数) es6之前,定义默认参数的方法是在一个方法内部定义 var link ...

  7. ES5与ES6常用语法教程之 ②解构语法糖、声明变量异同

    js常用语法系列教程如下 es5与es6常用语法教程(1) es5与es6常用语法教程(2) es5与es6常用语法教程(3) es5与es6常用语法教程(4) es5与es6常用语法教程(5) es ...

  8. ES5和ES6基本介绍与面向对象的基本思想

    ES6和ES5基本介绍 let  const  关键词定义变量 let 定义变量 特点: let 定义的变量,不会进行预解析  let 定义的变量,与 forEach() 中的变量类似  每次执行都会 ...

  9. ES5和ES6中对于继承的实现方法

    在ES5继承的实现非常有趣的,由于没有传统面向对象类的概念,Javascript利用原型链的特性来实现继承,这其中有很多的属性指向和需要注意的地方. 原型链的特点和实现已经在之前的一篇整理说过了,就是 ...

随机推荐

  1. 一行代码让App运行时iPhone不会进入锁屏待机状态

    转自:http://www.cocoachina.com/iphonedev/sdk/2010/1028/2260.html 如果你不希望应用运行时 iPhone 进入锁屏待机状态,加入下面这行代码即 ...

  2. OpenGL 4.0的Tessellation Shader（细分曲面着色器）

    细分曲面着色器(Tessellation Shader)处于顶点着色器阶段的下一个阶段,我们可以看以下链接的OpenGL渲染流水线的图:https://www.opengl.org/wiki/Rend ...

  3. fabric本地一键部署LAMP

    一.添加普通用户jeff执行sudo时无需输入密码 $ sudo vim /etc/sudoers ---------------------------------------> ## All ...

  4. awk使用

    [awk使用] 例:awk -F ':' '{print $1"\t"$7}' 参考:http://www.cnblogs.com/ggjucheng/archive/2013/0 ...

  5. Maven的pom.xml介绍

    6.1 简介 pom.xml文件是Maven进行工作的主要配置文件.在这个文件中我们可以配置Maven项目的groupId.artifactId和version等Maven项目必须的元素:可以配置Ma ...

  6. python 中numpy的var，std及cov

    var:表示方差, 即各项-均值的平方求和后再除以N , std:表示标准差,是var的平方根. cov:协方差 ,与var类似,但是除以(N-1)

  7. CString->char*.,char*->CString,char*->LPCTSTR

    CString->char* CString strSource;//宣告CString char* charSource; //宣告char* 法1: charSource = (char*) ...

  8. Appium之连续启动多个应用（APP）

    我们知道Appium应用启动时自带的caps可以先行启动某个应用(基于appPackage和appActivity),那么如何用其连续启动多个应用呢? 这里就需要用到start_activity()方 ...

  9. 软件项目第一个Sprint评分

    第一组 跑男 跑男组他们设计的是极速蜗牛小游戏,他们的界面背景图片做的挺漂亮,现在为止也实现了大部分功能, 但是我没有太听懂他们的游戏规则. 因为蜗牛出发后,每次碰到屏幕边缘后都会有确定的反弹结果,也 ...

  10. CAS实战の自定义注销

    步骤一 在cas server端,设置/WebContent/WEB-INF/cas-servlet.xml: <bean id="logoutAction" class=& ...