探索es61

1.let const

 这里写代码片 如果比较熟练使用js的同学一定知道让我们又痛又爱的var,确实很好用，但是会不好的情况下也会出现很多问题，比如我们用原生的js在点击的时候获取一个ul下面的li里面的值，但是你会发现点击li的时候每次获取的都是最后一个li的值，因为js没有块级作用域的概念当然我们可以用闭包来解决这个问题---闭包的特性内存驻留
 如果你知道es6的语法那就简单了，直接把var替换成let就搞定所有问题了,因为这个let会有一个块级作用域的概念，类似于下面这样

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

而 const其实就类似于一个java里面的常量，不可修改

2.class estends supper

原生js的面向对象，在原型链上定义方法

function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};

var p = new Point(1, 2);

ES6 有一个class类的概念,学过java的同学可能很熟悉

//定义类
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

上面代码定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。也就是说，ES5 的构造函数Point，对应 ES6 的Point类的构造方法。

Point类除了构造方法，还定义了一个toString方法。注意，定义“类”的方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去了就可以了。另外，方法之间`这里写代码片`不需要逗号分隔，加了会报错。

constructor构造器里面的this对于实例对象的赋值，如果被继承（extend）重写后子类的赋值会覆盖父类的赋值

extends继承类的所有属性和方法

supper 关键字，它指代父类的实例（即父类的this对象），子类必须在constructor构造器里条用supper方法，否则新建的子类实例会报错，因为子类没有自己的this对象，他是继承父类的this对象，这时候你就能理解上一句话了，继承重写会被覆盖

3.arrow function 箭头语法

//简单的
 function(i){ return i+1}   //es5
 const fn = (i) => i+1                //es6

//复杂的用{}把代码包起来

    function sum(x,y){
        x++;
        y--;
        return x+y;
    }
   const fn = (x,y) => {
        x++;
        y--;
        return x+y; 
    }

箭头函数解决了函数内部this的指向问题，如果是内部函数  内部的指向是window,如果不想让它指向window,可以让 var that  =  this;然后把内部函数的this全部换成that
箭头函数能解决这个问题，有点类似于上面的继承了父类构造器的子类，都是没有自己的this,内部方法的this,是继承与包裹他的函数的this

箭头语法的使用

const a = (num1,num2) => {return num1+num2};
let res = a(1,2);
console.log(res); //3

const fn = foo =>{
               if(typeof foo == 'number'){
                    return foo += 12;
               }else{ 
                 return   foo = foo + '测试单一参数的多行箭头函数';
              }
           }

           fn(7);//19

//由于箭头语法的特性

箭头函数有几个使用注意点。
（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。(因为this)
（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替。
（4）不可以使用yield命令，因此箭头函数不能用作Generator函数。

关于argumetns

//ES5
  function foo() {
        setTimeout(() => {
            console.log('args:', arguments);
        }, 100);
    }
    foo(2, 4, 6, 8)// args: [2, 4, 6, 8] 这里有输出是因为这个地方的参数是foo的参数

 const foo = () => {
        setTimeout(() => {
            console.log('args:', arguments);
        }, 100);
    }
    foo(2, 4, 6, 8)//  arguments is not defind

除了this，以下三个变量在箭头函数之中也是不存在的，指向外层函数的对应变量：arguments、super、new.target。

另外，由于箭头函数没有自己的this，所以当然也就不能用call()、apply()、bind()这些方法去改变this的指向。

猜你喜欢