this之这个还是这个么

前言

在javascript中this的使用往往非常常见，而错误的this指向将会让我们的惩处出现非预期的错误，所以我们就来看看this的指向到底是怎样的吧

实例使用

function testThis() {
 alert('hello')
}

this.testThis()
// 输出结果 弹窗显示hello

// 正常定义不会报错
let test = {
  name: 'test boy',
  sayHello(){
    this.testThis() 
  },
  helloBoy() {
    alert(`hello ${this.name}`)  
  }
}
// 报错 is not a function
// 此处报错是因为对象里边的this指向的是对象本身，而对象并未声明该方法，所以报错
this.test.sayHello()

解决方案

• 赋值变量在对象中使用

function testThis() {
 alert('hello')
}
// 这里使用that来解决this冲突
const that = this

let test = {
  name: 'test boy',
  sayHello(){
    that.testThis() 
  },
  helloBoy() {
    // 这里的this 指向对象本身，所以将会输出 hello test boy
    alert(`hello ${this.name}`)  
  }
}

题外话之链式调用

let ladder = {
  step: 1, 
  up() {
    this.step++;
    return this;
  },
  down() {
    this.step--;
    return this;
  }
}

// 然后你就可以这样调用
ladder.up()
      .down()
      .up()
      .down()
      .down()