ES6新语法

全局变量var

var存在缺陷：

1.var可以重定义

例一

<script>
var xxx=10;
    var xxx=11;
    console.log(xxx);
</script>

结果:

例二

<button class="btn">按钮1</button>
<button class="btn">按钮2</button>
<button class="btn">按钮3</button>
<button class="btn">按钮4</button>
<button class="btn">按钮5</button>
<script>
 var nodes=document.getElementsByClassName('btn');
 for (var i=0;i<nodes.length;i++){
     nodes[i].onclick=function () {
         console.log(i);
     }
 }
</script>

依次点击按钮1-5:

var nodes=document.getElementsByClassName('btn');
 for (let i=0;i<nodes.length;i++){
     nodes[i].onclick=function () {
         console.log(i);
     }
 }

将i的作用于改为let之后依次点击按钮1-5:

2.var不具有块级元素

<script>
    var xxx=10;
    {
        var xxx=11;
        console.log(xxx);
    }
    console.log(xxx);
</script>

结果：

解决方案:

1.老办法闭包

var pi = 10000;
{//{}表示一个块
  (function() {
      var pi = 3;
      console.log(pi);
  })
      //(function(){})将function定义为一个方法
  ();//()代表调用方法
}
console.log(pi);

结果，块里面的pi为3，外边pi为1000

2.新办法用let定义为局部变量

   var pi=1000;
    {
        let pi=33;
        console.log(pi);
        console.log(this.pi);
    }
    console.log(pi);

this.pi可以获取外面一级的pi值

常量const

const pi=3.14;
    pi=10;
    console.log(pi);

这里提示定义为常量之后不可以修改值

闭包函数传参

<script>
    (function (a,b) {
        var pi=1000;
        console.log(pi);

        console.log(a+b);
    })
            //调用这个闭包函数并传递两个参数
    (1111,2222);
</script>

闭包函数结果

闭包注意:写了一个闭包函数必须要有();进行调用，必须成对出现。如果有多个闭包函数也是这样一个闭包定义对应一个闭包调用。

箭头函数

<scirpt>     var person = {     name: 'zz',     age: 1,     work: function (a, b) {         console.log('a+b=', a + b);     },     //箭头函数写法一     func1: (a, b) => {         console.log('a+b=', a + b);     },     //箭头函数写法二     // 使用单参数的时候可以不适用()将其括起来     func2: a => console.log('单参数:', a),     //箭头函数写法三     // 无参的时候     func3:()=>console.log('无参数') }; person.work(1, 3); person.func1(1, 3); person.func2(10); person.func3();</script>

结果:

this

第一种情况

 var person = {        name: 'zz',        age: 1,    	  work: function (a, b) {            //一般函数this拿到了对象本身            console.log('这是一般函数',this);            console.log('a+b=', a + b);        },        func1: (a, b) => {            console.log('a+b=', a + b);            //箭头函数this 拿到的时window对象            console.log('这是箭头函数:',this);        },        func11(a,b){            //一般函数this拿到了对象本身            console.log('a+b=',a+b);            console.log('这是一般函数',this);        }    };    person.work(1, 3);    person.func1(1, 3);    person.func11(1, 3);

结果:

第二种情况

<script>    var person = {        name: '张三',        age: 1,        work: function () {            //方法内的方法            function internal() {                //一般函数this拿到了window                console.log('一般函数:')                console.log(this);            }            internal();        },        work2: function () {            //方法内的方法            //这里不能写成这个样子:	hun:()=>{}            //这是因为hun()这个方法在这里只是一个方法名，不是对象的属性是一个方法和上面的箭头函数有一点点不一样            var hun=() => {                console.log('箭头函数:')                console.log(this);            };            hun();        }    }    person.work();    person.work2();</script>

结果：

第三种情况

<scirpt>    $('food').each(function(){	    $(this);})

这里each()中的$(this)获取的是food遍历的对象，是因为each函数自身经过加工处理过所以这里的this指向的是food遍历对象

以下内容转载自：https://blog.51cto.com/2014fontend/2327334

1.普通函数的this：指向它的调用者，如果没有调用者则默认指向window.
2.箭头函数的this: 指向箭头函数定义时所处的对象，而不是箭头函数使用时所在的对象，默认使用父级的this.

3.箭头函数中的this,首先从它的父级作用域中找，如果父级作用域还是箭头函数，再网上找，如此直至找到this的指向