도대체 누구를 가리키는지

우리가 작성한 클래스에서 우리는this가 이 클래스의 실례인 대상을 가리키기를 희망할 때, 우리는 확실히 때때로 오류가 발생할 수 있다.다음은 이this. 여기에this가 서로 다른 값을 나타내는 6가지 방식이 있습니다.

각각:

글로벌 환경에서의 this

대상 구조 함수 중의this

대상 방법 중의this

단순 함수 중의this

화살표 함수 중의this

이벤트 감청기 중의this

전역 환경에서this값 글로벌 또는 window

console.log(this)

브라우저에서 window로 전역적으로this

를 사용하지 않습니다

대상 구조 함수 중의this

class Human {
    constructor(name) {
        this.name = name //this 
    }
}

var people = new Human('Bill')
console.log(people.name) //Bill, this people

var student = new Human('Jason')
console.log(student.name) // Jason  this student

대상 방법 중의this

var o = {
    sayName() {
        console.log(this.name)
        console.log("this ->", this)
    }
}

o.name = 'Bill'
o.sayName()

//Bill
// this -> { sayName: [Function: sayName], name: 'Bill' }

단순 함수 중의this

function sayName() {
    console.log(this) //window
}

sayName은 전역 작용 영역에 있기 때문에 안의this사 전역 환경에서

다음 코드를 생각하라

var o = {
    doSomethingLater () {
      setTimeout(function() {
        this.speak() // Error
      }, 1000)
    },
    speak() {
      console.log("Hello Boy")
    }
  }

  o.doSomethingLater() //TypeError: this.speak is not a function

setTimeout 함수 중의 리셋 함수는 전역 작용 영역에 있기 때문에 안의this는 window를 가리킨다

doSomethingLater의 실제 대상 o의 작용 영역 내의 것을 알고 있습니다. 그러면 이this를 사용하여 아래의this

를 대체할 수 있습니다.

var o = {
    doSomethingLater () {
        var that = this // this o 
      setTimeout(function() {
        that.speak()
      }, 1000)
    },
    speak() {
      console.log("Hello Boy")
    }
  }

  o.doSomethingLater() //Hello Boy

es6의 화살표 함수를 사용해도 위의 문제를 해결할 수 있다

화살표 함수의this는 항상 정의할 때 가리키는 환경입니다.

class Increment {
    constructor(i) {
        this.i = i
    }

    print() {
        setInterval(handlerCallback, 1000) //Uncaught ReferenceError: handlerCallback is not defined // handlerCallback 
    }

    handlerCallback() {
        console.log(this.i ++)
    }
}

var time = new Increment(0)
time.print()

세 번째 임의의 함수에서this값을 바꾸는 방식은bind,call 또는apply 방법을 사용하는 것이다.우리도 자주 bind를 사용하여this의 귀속을 진행한다

class Increment {
    
    constructor(i) {
        // debugger  
        this.i = i
    }

    print() {
        setInterval(this.handlerCallback, 1000) // this ， handlerCallback handlerCallback this.i
    }

    handlerCallback() {
        console.log(this.i ++) //  this i 
    }
}

var time = new Increment(0)
time.print() //NaN

bind로 귀속

class Increment {
    
    constructor(i) {
        // debugger  
        this.i = i
    }

    print() {
        setInterval(this.handlerCallback.bind(this), 1000) // handlerCallback this 
    }

    handlerCallback() {
        console.log(this.i ++)
    }
}

var time = new Increment(0)
time.print() //1，2，3.....

여기까지this의 의미를 이해했습니까, 우리 전편의 작용역과 결합하여 이해 효과가 더욱 좋습니다