JavaScript 의 this 지향 문제 상세 설명
나 를 믿 어 라.본문의 7 만 기억 하면️⃣ 보 구결 은 JS 의 this 지향 점 을 철저히 파악 할 수 있다.
선행 구결:화살표 함수,new,bid,apply 와 call,유럽 비 회 점(obj.),직접 호출,함수 에 없습니다.
구결 순서에 따라 앞의 어떤 장면 을 만족 시 키 면 this 가 가리 키 는 방향 을 확정 할 수 있다.
다음은 구결 순서에 따라 그것들 을 상세 하 게 설명 하고,예시 코드 는 모두 크롬의 콘 솔 컨트롤 러 에서 실행 된다.
문장 끝 에 정성 들 여 준비 한 연습 문제 가 있 으 니 학습 성 과 를 검증 하 는 데 쓰 이 니 잊 지 말고 시험 해 보 세 요~
1.화살표 함수
화살표 함수 가 첫 번 째 에 있 는 것 은 this 가 바 뀌 지 않 기 때문에 현재 함수 가 화살표 함수 라면 다른 규칙 을 볼 필요 가 없습니다.
화살표 함수 의 this 는 그것 을 만 들 때 바깥쪽 this 를 가리 키 는 것 입 니 다.이곳 의 중점 은 두 가지 가 있다.
2. new
new 키 워드 를 사용 하여 함 수 를 호출 할 때 함수 중의 this 는 반드시 JS 가 만 든 새로운 대상 입 니 다.
독자 들 은"new 키 를 사용 하여 화살표 함 수 를 호출 하면 화살표 함수 의 this 가 수정 되 는 것 이 아 닐 까?"라 는 의문 을 가 질 수 있다.
콘 솔 에서 해 보 자.
func = () => {}
new func() // throw error
3. bind
bid 는Function.prototype.bind()을 가리킨다.
여러 번 bind 시 첫 번 째 bind 값 만 알 아 보기
오류 점
function func() {
console.log(this)
}
func.bind(1).bind(2)() // 1
bind 与 new
易错点
function func() {
console.log(this, this.__proto__ === func.prototype)
}
boundFunc = func.bind(1)
new boundFunc() // Object true， 2
apply()와 call()의 첫 번 째 매개 변 수 는 모두 this 입 니 다.apply 를 통 해 호출 할 때 실제 인삼 은 배열 에 있 고,call 을 통 해 호출 할 때 실제 인삼 은 쉼표 로 구 분 됩 니 다.
화살표 함수 에서 this 는 수정 되 지 않 습 니 다.
오류 점
func = () => {
// this this， 7 「 」
console.log(this)
}
func.apply(1) // Window， 1
오류 점
function func() {
console.log(this)
}
boundFunc = func.bind(1)
boundFunc.apply(2) // 1， 3
function func() {
console.log(this.x)
}
obj = { x: 1 }
obj.func = func
obj.func() // 1
6.직접 호출
함수 가 앞의 장면 에 만족 하지 않 고 직접 호출 될 때 this 는 전체 대상 을 가리 킬 것 입 니 다.브 라 우 저 환경 에서 전역 대상 은 Window 이 고 Node.js 환경 에서 Global 입 니 다.
먼저 간단 한 예 를 들 자.
function func() {
console.log(this)
}
func() // Window
function outerFunc() {
console.log(this) // { x: 1 }
function func() {
console.log(this) // Window
}
func()
}
outerFunc.bind({ x: 1 })()
함수 에 없 는 장면 은 브 라 우 저의
엄격 한 모델 은 ES5 에서 제 기 된 것 이다.ES5 규범 이전,즉 비 엄격 모드 에서 this 는 undefined 나 null 이 될 수 없습니다.그래서**엄격 하지 않 은 모드 에서 위의 7 단계 구결 을 통 해 this 지향 이 undefined 또는 null 이라는 것 을 알 게 되면 this 는 전체 대상 을 가리 킬 것 입 니 다.**브 라 우 저 환경 에서 전역 대상 은 Window 이 고 Node.js 환경 에서 Global 입 니 다.
예 를 들 어 아래 의 코드 는 엄격 하지 않 은 모드 에서 this 는 전체 대상 을 가리킨다.
function a() {
console.log("function a:", this)
;(() => {
console.log("arrow function: ", this)
})()
}
a()
a.bind(null)()
a.bind(undefined)()
a.bind().bind(2)()
a.apply()
엄격 한 모드 에서 같은 코드 를 실행 하여 비교 하 다.모든 코드 를 한꺼번에 콘 솔 에 복사 하여 붙 여야 엄격 한 모드 에서 실 행 될 수 있다 는 것 을 기억 하 세 요.
"use strict"
function a() {
console.log("function a:", this)
;(() => {
console.log("arrow function: ", this)
})()
}
a()
a.bind(null)()
a.bind(undefined)()
a.bind().bind(2)()
a.apply()
7 단계 구결 은 엄격 한 모델 과 비 엄격 한 모델 에서 모두 완비 되 어 있 으 며,비 엄격 한 모델 에서 null 또는 undefined 는 전체 대상 으로 전환 된다.그래서 나 는 이 점 을 구결 에 넣 지 않 았 다.
문제 풀이 복습
먼저 구결 을 외우 고 문 제 를 푸 세 요."화살표 함수,new,bid,apply 와 call,유럽 비 회 점(obj.),직접 호출,함수 에 없습니다."
1.다음 코드 가 실 행 된 후 func.count 값 은 얼마 입 니까?
function func(num) {
this.count++
}
func.count = 0
func(1)
func.count 값 은 0 입 니 다.
구결 에 따 르 면 func()호출 시 6 번 째 유형 인'직접 호출'에 속 합 니 다.엄격 하지 않 은 모드 에서 this 는 전체 대상 을 가리킨다.this 는 func 와 아무런 관계 가 없 기 때문에 func.count 는 변 하지 않 습 니 다.so easy。
2.아래 화살표 함수 중 this 는 누 구 를 가리 키 나 요?
obj = {
func() {
const arrowFunc = () => {
console.log(this._name)
}
return arrowFunc
},
_name: "obj",
}
obj.func()()
func = obj.func
func()()
obj.func.bind({ _name: "newObj" })()()
obj.func.bind()()()
obj.func.bind({ _name: "bindObj" }).apply({ _name: "applyObj" })()
// obj
// undefined
// newObj
// undefined
// bindObj
아주 간단 하지,너 는 배 워 서 망 쳤 니?
총결산
자 바스 크 립 트 의 this 지향 문제 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 관련 js 에서 this 지향 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
