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. centos7 ping www.baidu.com ping 不通。

    centos7 ping www.baidu.com ping 不通. 记录下,在搭建NodeJS服务器遇到的坑:centos7 ping www.baidu.com ping 不通. 1. 配置网卡 ...

  2. Spring-JDBC模板-事务

    Spring-JDBC模板-事务 1.事务概述 什么是事务 逻辑上的一组操作,组成这组操作的各个单元要么全部成功要么全部失败 事务的特点ACID 原子性:事务不可分割(事务要么成功,要么失败) 一致性 ...

  3. 系统批量运维管理器pexpect详解

    一.pexpect介绍 pexpect可以理解成Linux下的expect的Python封装,通过pexpect我们可以实现对ssh.ftp.passwd.telnet等命令进行自动交互,而无需人工干 ...

  4. SNAT和DNAT的区别

    SNAT: Source Network Address Translation,是修改网络包源ip地址的.DNAT: Destination Network Address Translation, ...

  5. PKUWC2019 真·游记

    由于我这个大傻逼考试结果实在是没法看,所以这篇游记将尽可能略去和考试有关的内容,变成一篇真正的游记…… 接下来的内容中将会出现各种旅游攻略,寻求干货的同学可以提前左转了. Day -7 学考终于结束了 ...

  6. Laravel中Trait的用法实例详解

    本文实例讲述了Laravel中Trait的用法.分享给大家供大家参考,具体如下: 看看PHP官方手册对Trait的定义: 自 PHP 5.4.0 起,PHP 实现了代码复用的一个方法,称为 trait ...

  7. [Training Video - 5] [Groovy Script Test Step - Collections, Exceptions] Exception Handling in groovy

    def x = new String[3] x[0] = "A" x[1] = "B" x[2] = "C" log.info"X ...

  8. GIT checkout 和 reset 区别

    git checkout -- file:撤销对工作区修改:这个命令是以最新的存储时间节点(add和commit)为参照,覆盖工作区对应文件file:这个命令改变的是工作区 git reset HEA ...

  9. 使用js/jquery查找iframe中的

    原生js  一.在iframe的父窗口中获取iframe中的元素: js代码 格式: window.frames["iframe的name值"].document.getEleme ...

  10. 3 Django 简介

    MVC 与 MTV 模型 MVC Web 服务器开发领域里著名的 MVC 模式,所谓 MVC 就是把 Web 应用分为模型 (M),控制器(C) 和视图 (V) 三层,他们之间以一种插件式的.松耦合的 ...