JS笔记

1. js中的继承

// JS风格的继承
function Human() {
  // this.prop = 'something' 
  this.speak = function() {
    console.log(`${this.constructor.name} can speak!`);
  }
}

function Engineer() {
  // 重定向类的构造器，避免父类完全覆盖子类
  this.constructor = Engineer
  this.work = function() {
    console.log(`${this.constructor.name} can construct project!`)
  }
}

// 子类通过其原型继承父类实例，实现继承
Engineer.prototype = new Human()

var engineer = new Engineer()
engineer.speak() // Engineer can speak!
engineer.work() // Engineer can construct project!

var human = new Human()
human.speak() // Human can speak!

// 语法糖(^ES6)式继承
class Human {
  // constructor() {} // 可以忽略不写
  // // 要写
  // constructor(value) {
  //   this.value = value
  // }
  // // 要写
  // constructor() {
  //   this.name = 'Human'
  // }
  speak() {
    console.log(`${this.constructor.name} can speak!`)
  }
}

class Engineer extends Human {
  // // 可以忽略不写
  // constructor() {
  //   super()
  // }
  // // 要写
  // constructor(something) {
  //   super() // 如果子类中需要出现constructor，那么一定要super()
  //   this.something = something
  // }
  work() {
    console.log(`${this.constructor.name} can construct project!`)
  }
}

const engineer = new Human()
engineer.speak()
engineer.work()

2. 关于绑定this

this.x = 9

var module = {
  x: 81,
  getX: function() {
    return this.x
  }
}

module.getX() // 81

var retrieveX = module.getX;
retrieveX() // 9，因为this指向了全局

// 解决这个问题的方法可以将this绑定到module
var boundGetX = retrieveX.bind(module)
boundGetX()

3. 普通函数和箭头函数中的this

function testThis() {
  var normal = function() {
    console.log(this)
  }
  var arrow = () => {
    console.log(this)
  }
  normal() // Window
  arrow() // { name: 'a' }
}

var a = { name: 'a' }

testThis.call(a)

4. 单线程与异步的关系

JS是单线程的（至少在写这篇文章时是这样），也就是某一时间只能执行一个任务。

但实际情况是同一个时间点，可能会触发多个任务。

那么解决方案就是 异步，JS是通过 事件轮询 实现异步。

具体：

同步代码会直接执行（按顺序），异步代码在满足执行条件后，会先放到 异步队列 中，当同步代码执行完成后，按顺序执行异步队列中的每段代码。

5. 关于Promise

function imitation(state = 0) {
  var promise = new Promise((resolve, reject) => {
    if(state === 0) {
      // Promise.resolve(result)
      resolve('Success')
    } else {
      // Promise.reject(reason)
      reject('Fail')
    }
  })
  return promise
}

var ifSucc = function(value) {
  console.log(value)
}
var ifFail = function(reason) {
  console.log(reason)
}
var noMatterSuccOrFail = function() {
  console.log('finally')
}

var promise = imitation()

// Promise.prototype.then
// 1. then可以接受两个参数：成功handler和失败handler
promise
  .then(ifSucc, ifFail)

// 2. 由catch处理失败的情况，then只接受成功的handler
promise
  .then(ifSucc)
  .catch(err => {
    console.log(err)
  })

// 3. 当无论状态是fulfilled或者是rejected，都需要执行一段代码时，就要用到finally
promise
  .then(ifSucc)
  .catch(err => {
    console.log(err)
  })
  .finally(noMatterSuccOrFail)

如何串联不同的promise?

// 注意返回promise
var promise1 = new Promise(function(resolve, reject) {
  // ...
})
var promise2 = new Promise(function(resolve, reject) {
  // ...
})

promise1
  .then(function(v) {
    // ...
    return promise2
  })
  .then(function(v) {
    // ...
  })

Promise.all和Promise.race的区别

// Promise.all([...promises])
// 当接受到的promises数组里面的promise全部完成后，执行SuccHandle(不要在意这个英文名)
Promise.all([...promises])
  .then(results => {
    console.log(results[0], results[1], results[2] /*, or more */)
  })

// Promise.race([...promises])
// 当接受到的promises数组里面的任意一个完成后，执行SuccHandle
Promise.race([...promises])
  .then(result => {
    console.log(result)
  })

 Promise的三种状态

pending(初始) fulfilled rejected