关于this

Question

class jQuery {
  constructor(selector) {
    let elem = document.querySelectorAll(selector)
    for (let i = 0; i < elem.length; i++) {
      this[i] = elem[i]
    }
    // Array.from(elem).forEach(function(item, index){
    //   console.log(this)   //为何this是undefind
    //   this[index] = item
    // })
    //类数组
    this.length = elem.length
  }
  get(index) {
    return this[index]
  }
  each(fn) {
    for (let i = 0; i < this.length; i++) {
      fn(this[i], i, Array.from(this))
    }
  }
  on(type, fn) {
    return this.each(elem => {
      elem.addEventListener(type, fn, false)
    })
  }

  //扩展很多DOM API
}

class Child extends jQuery{
  constructor(selector){
    super(selector)
    
  }
  addClass(className){
    return this.each((elem)=>{
      elem.className = className
    })
  }
}

let p = new jQuery('p')
console.log(p)
p.each(function (elem, index, array) {
  console.log(elem, index, array)
})
p.on('click', ()=>{
  console.log(1)
})
let c = new Child('p')
c.addClass('div')

为何下面的函数中的this是undefind
Array.from(elem).forEach(function(item, index){
console.log(this) //为何this是undefind
this[index] = item
})

Answer 1

双越 2021-06-16 18:20:30

你在 class 的 method 内部使用了 function ，导致 this 为 undefined ，如下图

如果想要正确获取 this ，可使用箭头函数，如下图

-----------

PS：在 ES5 中，所有的“自由 function”中 this 都指向 window ，但这种规范也是比较令人费解，所以 ES6 中做了修改。

• 提问者 Sunshine518 #1

  那为什么不是输出window，而是undefined呢？

• 双越 回复 提问者 Sunshine518 #2

  在 ES5 中，所有的“自由 function”中 this 都指向 window ，但这种规范也是比较令人费解，所以 ES6 中做了修改。

• 提问者 Sunshine518 回复 双越 #3

  感谢老师的耐心解答

Answer 2

提问者 Sunshine518 2021-06-16 15:21:59

class jQuery {

  constructor(selector) {

    let elem = document.querySelectorAll(selector)

    let arr = Array.from(elem)

    arr.forEach(function(item, index){

      console.log('this', this)   //为何this是undefined

      // this[index] = item

    })

    this.length = elem.length

  }

}

let p = new jQuery('p')

console.log(p)

Answer 3

双越 2021-06-16 14:58:44

我试着 this 不是 undefined ，你在重新试试。PS：排查这个 bug ，可以把其他不相关的代码都暂时删掉，代码越少越好。

• 提问者 Sunshine518 #1

  老师，这个是没有其他不相关代码的简洁版，结果还是undefined
  class jQuery {
    constructor(selector) {
      let elem = document.querySelectorAll(selector)
      let arr = Array.from(elem)
      arr.forEach(function(item, index){
        console.log('this', this)   //为何this是undefined
        // this[index] = item
      })
      this.length = elem.length
    }
  }
  
  let p = new jQuery('p')
  console.log(p)