Javascript语法中的重难点

0. 前言

记录js使用过程中遇到的重难点。

1. 如何解决异步问题

js中函数调用是异步的，即不等待函数执行结束，就执行下一步。（这是为了浏览器的性能）

如果一定需要在函数f()执行后才执行下一步，那么——传入回调函数：

function f() {
  console.log("f()")
}
f()
console.log("next")

// 改为
function f(g) {
  console.log("f()")
  g()
}
f(() => {
  console.log("next")
})

2. 在回调函数中使用this指针的问题

传入对象B中方法的回调函数中的this指针，并不指向对象B。

var obj1 = {
  g() {
    console.log("obj1")
  },
  // 接收一个回调函数，并调用它
  f(h) {
    h()
  }
}

var obj2 = {
  g() {
    console.log("obj2")
  },
  f() {
    obj1.f(() => {
      this.g()
    })
  }
}

obj2.f() // 输出：obj2

3. 将对象A的方法赋给对象B的方法后。对象B调用该方法时，方法中this指针指向对象B

var wsManager = {
  callback: undefine,
  ws: null,
  initWebSocket(vue) {
    console.log('init websocket')
    this.ws = new WebSocket('xxxxx')
    this.ws.onopen = this.websocketOpen
    this.ws.onclose = this.websocketClose
    this.ws.onerror = this.websocketError
    this.ws.onmessage = this.websocketOnMessage
  },
  // call on websocket connected
  websocketOpen() {
    console.log('websocket connected')
  },
  // call on websocket disconnected
  websocketClose(msg) {
    console.log('websocket disconnected', msg)
  },
  // call on websocket error
  websocketError(e) {
    console.log('websocket error', e)
  },
  // call on receive message
  websocketOnMessage(msg) {
    if (typeof(this.callback) == "function") {
      this.callback() // 执行回调函数
    }
  },
  // websocket发送信息函数
  sendCommand(_callback=undefined) {
    this.callback = _callback
  }
}

使用：

wsManager.sendCommand(() => {
  console.log('congratulations')
})

后，当websocketOnMessage()函数接收到信息时，this.callback()为undefine。为什么呢？

因为传入wsManager.sendCommand()的回调函数，只赋给了wsManager对象中的callback属性，而未赋给wsManager.ws对象中的callback属性。而调用websocketOnMessage()函数的为wsManager.ws对象，却并不是wsManager对象。