关于es6的一些新特性

#####一、箭头函数

箭头函数相当于匿名函数

1、单个参数

x => x + x
相当于 function (x) {
  return x + x;
  }

2、多个参数

(x,y) => x + y
相当于 function (x,y) {
   return x + y;
  }

3、this作用域

在箭头函数里面,this的作用域取定义时外部的作用域,

而不是像匿名函数那样指向全局变量。

为什么要有箭头函数???

const Person = {
    'name': 'little bear',
    'age': 18,
    'sayHello': function () {
      setTimeout(function () {
        console.log('我叫' + this.name + '我今年' + this.age + '岁!')
      }, 1000)
    }
}
Person.sayHello();
输出结果:我叫 undefined 我今年 undefined 岁


function Person () {
  this.name = 'little bear',
  this.age = 18
  let self = this
  setTimeout(function sayHello () {
    console.log('我叫' + self.name + '我今年' + self.age + '岁!')
  }, 1000)
}
let p = new Person();

输出结果:我叫little bear 我今年 18 岁

const Person = {
    'name': 'little bear',
    'age': 18,
    'sayHello': () => {
      setInterval(() => {
        console.log('我叫' + this.name + '我今年' + this.age + '岁!')
      }, 1000)
    }
Person.sayHello()
输出结果:我叫 undefined 我今年 undefined 岁

function Person () {
  this.name = 'little bear',
  this.age = 18
  setTimeout(() => {
    console.log('我叫' + this.name + '我今年' + this.age + '岁')
},1000)
}
let p = new Person()
输出结果:我叫little bear 我今年 18 岁

所以:箭头函数this指向定义时的上下文,最好不要在对象的方法中使用
二、let const

es6规定了新的变量定义,let和const

let:声明的变量拥有块级作用域 ​ 重复定义会抛错误 ​ 有暂时死区,不会被提升

const 定义常量

三、模版字面量

是允许嵌入表达式的字符串字面量。 1、更优雅的拼接字符串 2、用$(expression)表示变量或方法,并且可以写js运算表达式 3、支持换行符

let x = 1,y = 2;
console.log(`${x+y*2}`);
四、promise

console.dir(Promise)

var myObject = {
  name:'jaja',
  age:'12',
  sayName:function (){
    console.log('my name is'+ name);
  }
}
console.dir(myObject)
console.dir		//打印出对象的属性和方法

Promise 是一个构造函数,调用它可以生成一个promise对象。 eg:

var p = new Promise(function(resolve, reject){
    //做一些异步操作
    setTimeout(function(){
        console.log('执行完成');
        resolve('随便什么数据');
    }, 2000);
});

Promise接受一个函数作为参数,并传入resove,reject分别表示异步操作执行成功后的回调函数和异步操作失败后的回调函数。 在上面的栗子中,我们异步操作后设置了resove(‘随便什么数据’)函数。并且我们在这里只是new一个对象,并没有执行它,但是我们传进去的函数就已经在执行了。所以我们一般是把对象包在函数里,并在需要的时候运行它。

function runAsync(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('执行完成');
            resolve('随便什么数据');
        }, 2000);
    });
    return p;            
}
runAsync()

在函数执行后返回p对象。因为返回了对象所以继续调用then方法。

runAsync().then(function(data){
    console.log(data);
    //后面可以用传过来的数据做些其他操作
    //......
});

Promise对象还有all方法,用于提供并行执行异步操作的能力。在所有异步操作执行完成后才执行回调。

Promise.all([promise1, promise2, promise3]).then(function(values) {
  console.log(values);
});

promise1, promise2, promise3是并行执行的异步回调。

五、如何实现类的继承
class Parent {
    static height = 12
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    speakSomething(){
        console.log("I can speek chinese");
    }
}
Parent.prototype.color = 'yellow'


//定义子类,继承父类
class Child extends Parent {
    static width = 18
    constructor(name,age){
        super(name,age);
    }
    coding(){
        console.log("I can code JS");
    }
}

###