ES6快速入门

这篇博客是根据慕课网上的ES6快速入门教程的视频总结的，有兴趣的可以去看下视频（免费）

三种语法实现同一个功能，从而加深对三种语法的运用，最后了解ES6的优势

 知识点：常量、作用域、箭头函数、默认代理、对象代理

常量：

// ES5 中常量的写法

Object.defineProperty(window,"PI2", {
  value: 3.1415926,
  writable: false
})

console.log(window.PI2)

// ES6 的常量写法

const PI = 3.1415926
console.log(PI)

// PI = 4

作用域：

// ES5 中的作用域
var callbacks = [];
for(var i = 0;i <= 2; i++) {
  callbacks[i] = function() {
    // 因为函数体内是一个表达式，这里就会保留这个情况，这个表达式用到i变量，所有形成了一个闭包
    // 当callbacks执行的时候，i已经变成3了，所有执行callbacks返回都是6
    return i * 2 
  }
}

console.table([
  callbacks[0](),
  callbacks[1](),
  callbacks[2]()
])

// ES6 中的作用域
const callbacks2 = []
for (let j = 0; j <= 2; j++) {
  // let 定义好就会生成一个块作用域，当前作用域会把当前作用域下的值保存下来给后面的闭包使用，循环的时候，
  // 每循环一次就生成新的作用域，闭包就把变量导向闭包作用域的变量，然后输出的就是0，2，4
  callbacks2[j] = function() {
    return j * 2
  }
}

console.table([
  callbacks2[0](),
  callbacks2[1](),
  callbacks2[2]()
]);

// ES5 中的作用域函数
((function ()  {
  const foo = function () {
    return 1
  }
  console.log("foo()===1", foo() === 1);
  ((function(){
    var foo = function () {
      return 2
    }
    console.log('foo() ===2', foo() === 2)
  })())
})())

// ES6 中的作用域函数
{
  function foo() {
    return 1
  }
  console.log('foo()===1',foo() ===1);
  {
    function foo() {
      return 2
    }
    console.log('foo()===2',foo() ===2);
  }
}

 

注意：ES3和ES5中需要使用立即执行函数才可以把作用域进行隔离，ES6则是{}就可以实现了

 

箭头函数：

{
  // 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);
}

{
  // ES3,ES5中的this=> 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());
};

{
  // ES6,箭头函数中的this的指向是定义时this的指向(这里b定义的this就是继承父执行上下文里面的this===<注意：简单对象（非函数）是没有执行上下文的！> ))
  var factory = function () {
    this.a = 'a',
    this.b = 'b'
    this.c = {
      a: 'a+',
      b: () =>  this.a
    }
  }
  console.log(new factory().c.b());
}

注意：简单对象（非函数）是没有执行上下文的！

默认参数：

{
  // ES5/ES3 默认参数的写法
  function f(x,y,z) {
    if(y === undefined) {
      y = 7;
    }
    if(z === undefined) {
      z = 42
    }
    return x + y + z
  }
  console.log(f(1,3))
}

{
  // ES6 默认参数
  function f(x,y=7,z =42) {
    return x + y + z
  }
  console.log(f(1,3))
}

{
  // 必选参数的验证
  function checkParameter () {
    throw new Error('can\'t be empty')
  }
  function f(x = checkParameter(), y =7, z = 42) {
    return x + y + z
  }
  console.log(f(1))
  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 可变参数
  function f(...a) {
    var sum = 0;
    a.forEach(item =>{
      sum += item*1
    });
    return sum
  }
  console.log(f(1,2,3,6))
}

对象代理：

{
  // ES3 数据保护（闭包）
  var Person = function () {
    var data = {
      name: 'ES3',
      sex: 'male',
      age: 15
    }
    this.get = function (key) {
      return data[key]
    }
    this.set = function (key, value) {
      if(key !== 'sex') {
        data[key] = value
      }
    }
  }
  // 声明一个实例
  var person = new Person();
  // 读取
  console.table({name: person.get('name'),sex:person.get('sex'),age:person.get('age')});
  // 修改
  person.set('name','es3-name');
  console.table({name: person.get('name'),sex:person.get('sex'),age:person.get('age')});

  try {
    person.set('sex','female')
    console.table({name: person.get('name'),sex:person.get('sex'),age:person.get('age')}); 
  } catch(e) {
    console.log(e)
  }
  
}

{
  // ES5 (vue2的实现数据监听的原理)
  var Person = {
    name: 'es5',
    age: 15
  }

  Object.defineProperty(Person,'sex',{
    writable: false,
    value: 'male'
  })
  console.table({name: person.get('name'),sex:person.get('sex'),age:person.get('age')});
  Person.name = 'es5-cname';
  console.table({name: person.get('name'),sex:person.get('sex'),age:person.get('age')});
 
  try {
    Person.sex = 'female';
    console.table({name: person.get('name'),sex:person.get('sex'),age:person.get('age')});
  } catch(e) {
    console.log(e)
  }
}

{
  // ES6
  let Person = {
    name: 'es6',
    sex: 'male',
    age: 15
  }
  // person是将来暴露给用户操作的对象，把这个Person保护起来，person通过Proxy和Person的数据挂钩的
  let person = new Proxy(Person,{
    get(target,key) {
      return target[key]
    },
    set(target,key,value) {
      if(key!=='sex') {
        target[key] = value
      }
    }
  })
  console.table({name: person.name,sex:person.sex,age:person.age});

  try {
    person.sex = 'female';
  } catch (e) {
    console.log(e);
  } finally {

  }
}

通过代理来进行各种逻辑的操作

更多知识点：