ES6

195 阅读2分钟

一.var let const

1.var

(1).在全局定义的那就是全局的 在局部定义的那就是局部的(在哪个作用域定义就是哪个作用域);

(2).如果变量未经声明就赋值,此变量为全局对象所有。

(3).变量提升

·创建AO(执行期上下文)对象

·找形参和变量声明,将变量和形参名作为AO的属性名,值为undefined

·将实参和形参相统一

·在函数体里找函数声明,值赋予函数体

2.let

(1).全局变量和顶层对象window不会挂钩,防止window过重; (let d =5 不等于 window.d = 5)

(2).不允许重复声明;

(3).不存在变量提升;

(4).暂时性死区(封闭作用域内,未声明不能使用)

(5).块级作用域。

经典试题:

for (var i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i)
  })
}
// 输出结果:3 3 3
// 解释:var没有块级作用域,所以setTimeout永远访问的是全局的i
for (let i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i)
  })
}
// 输出结果:0 1 2
// 解释:let带块级作用域,相当于
{
  setTimeout(() => {
    console.log(i)
  })
}这个块循环了三次,每次都有自己块的i的值。由于异步,所以各自块的i未被释放,执行时,访问各自块作用域的i

转换成ES5

3.const

(1).ES5声明 ES6声明

(2).块级作用域;不存在变量提升;暂时性死区

(3).基本数据类型不能再重新赋值,引用数据类型可以重新赋值

二.class

// ES6 类
class People {
  constructor(name, age) {
    this.name = name
    this.age = age
    this._sex = 'male'
  }
  // 有其他业务逻辑使用
  get sex() {
    return this._sex
  }
  set sex(val) {
    this._sex = val ? 'male' : 'female'
  }

  showname() {
    console.log(this.name)
  }
  // 静态方法
  static getcount() {
    return 5
  }
}

// 静态属性
People.count = 6
console.log(People.count)

let p1 = new People('huahua', '18')
console.log(p1)
p1.sex = 0
console.log(p1.sex)
console.log(People.getcount())

// 继承
class Coder extends People {
  constructor(name, age, comper) {
    super(name, age)
    this.comper = comper
  }
  showcomper() {
    console.log(this.comper)
  }
}

let coder1 = new Coder('zhangsan', '16', 'laozong')
console.log(coder1)
coder1.sex = 1
console.log(coder1.sex)

console.log(Coder.getcount())

转成ES5

1.for...of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象(比如arguments对象、DOM NodeList 对象)、后文的 Generator 对象,以及字符串。 且of里面的key是item

js是单线程的

js引擎(执行上下文) GUI线程 网络线程 事件监听线程 计时线程

事件循环:js执行引擎先执行执行栈,当js引擎发现执行栈没有可执行的了,就把事件队列里的第一个放到执行栈(先取微队列)

事件队列:异步函数(宏队列,微队列)

微队列:promise 监听某个元素变化MutationObserver (先取微队列)

console.log(1)
setTimeout(() => {
  console.log(2)
}, 0)
console.log(3)

const pro = new Promise((resolve, reject) => {
  // 未决状态
  console.log('表白')
  //   console.log(c)
  setTimeout(() => {
    if (Math.random() < 0.1) {
      resolve(true)
    } else {
      reject(false)
    }
  }, 0)
})
pro
  .then(data => {
    console.log('123')
    // 已决状态 resolve  立即执行
    // 未决 加到作业队列,等到resolve状态后执行(执行即加入到微队列)
    console.log('表白结果' + data)
  })
  .catch(error => {
    console.log('123')
    console.log('表白结果2' + error)
    // 已决状态 reject
  })
setTimeout(() => {
  console.log(4)
}, 0)

// 分析过程:(1 3 表白 123 表白结果2false 4)
//1  3 表白 2 
//宏队列: setTimeout(2)   setTimeout(表白状态)  setTimeout(4)
//微队列:  pro(then)