JavaScript의 여섯 가지 장벽

이 요염함의 작동 방식을 고려할 때 이에 대한 이해는 시대를 초월한 주제이며, 이 기사에서는 이를 6개 조각으로 나누어 이를 해결하려고 합니다. 이 성가신 괴물과 함께 있어주세요.

우선

이것은 모두 context에 관한 것입니다.

이것은 직설적으로 말하면 보스를 찾는 것, 현재의 context를 소유한 객체(context object)를 찾는 것입니다. (문맥).

빅 보스는 6개의 레벨로 나눌 수 있습니다. 레벨이 높아질수록 가장 큰 보스만 인식됩니다.

첫번째 레벨: 세상의 종말

힘이 가장 적은 보스가 보통 상황에서는 글로벌 상황이고, 브라우저에서는 창이다. ; 엄격하게 사용하는 경우 정의되지 않습니다.

function showThis () {
console.log(this)
}
 
function showStrictThis () {
'use strict'
console.log(this)
}
 
showThis() // window
showStrictThis() // undefined

두 번째 레벨: 돌을 금으로 바꾸기

두 번째 레벨의 보스는 이 기능 앞에 있는 점을 찾고 있다고 직설적으로 말합니다.

이것을 사용하는 함수가 컨텍스트 개체에 속하면 컨텍스트 개체는 this에 바인딩됩니다.

예를 들어 다음 예에서 boss는 returnThis의 컨텍스트 개체이거나 returnThis는 boss에 속합니다.

rree

다음 예를 조심하세요. 답을 생각해 낼 수 있나요?

var boss = {
name: 'boss',
returnThis () {
return this
}
}
 
boss.returnThis() === boss // true

답은 boss1과 window 아 맞췄나요?

이것을 사용하는 함수를 한번 보세요.

boss2.returnThis에서 이것을 사용하는 함수는 boss1.returnThis이므로 이는 boss1에 바인딩됩니다.

boss3.returnThis에서 이것을 사용하는 함수는 returnThis이므로 다음과 같습니다. 스페어 타이어를 주문해야 합니다.

boss2에 어떻게 바인딩하나요?

var boss1 = {
name: 'boss1',
returnThis () {
return this
}
}
 
var boss2 = {
name: 'boss2',
returnThis () {
return boss1.returnThis()
}
}
 
var boss3 = {
name: 'boss3',
returnThis () {
var returnThis = boss1.returnThis
return returnThis()
}
}
 
boss1.returnThis() // boss1
boss2.returnThis() // ?
boss3.returnThis() // ?

네, 이것을 사용하는 기능이 boss2에 속한다면 그렇습니다.

3레벨: 결혼을 위한 손끝

3레벨 보스는 Object.prototype.call과 Object.prototype.apply이며, 이를 매개변수를 통해 지정할 수 있습니다. (이것은 직접 할당할 수 없습니다. 이 = 2는 ReferenceError를 보고합니다.)

var boss1 = {
name: 'boss1',
returnThis () {
return this
}
}
 
var boss2 = {
name: 'boss2',
returnThis: boss1.returnThis
}
 
boss2.returnThis() //boss2

4번째 레벨: 서로

4번째 레벨의 보스는 Object.prototype.bind입니다. 그는 그렇지 않습니다. 새로운 기능을 통해 영구적인 바인딩을 제공할 뿐 아니라 3레벨 보스의 명령도 무시합니다.

function returnThis () {
return this
}
 
var boss1 = { name: 'boss1' }
 
returnThis() // window
returnThis.call(boss1) // boss1
returnThis.apply(boss1) // boss1

다섯 번째 수준: 안에 뭔가가 있습니다

이것을 무시하고 묶기 더 쉬운 곳이 새롭습니다 . 함수를 새로 만들면 자동으로 새 개체에 바인딩된 다음 함수가 호출됩니다. 이는 바인딩의 바인딩을 재정의합니다.

function returnThis () {
return this
}
 
var boss1 = { name: 'boss1'}
 
var boss1returnThis = returnThis.bind(boss1)
 
boss1returnThis() // boss1
 
var boss2 = { name: 'boss2' }
boss1returnThis.call(boss2) // still boss1

레벨 6: 군사 명령의 산

마지막 강력한 보스는 ES2015의 화살 기능입니다. 이것은 화살표 함수에서 더 이상 매력적이지 않습니다. 이는 현재 어휘 범위에 영구적으로 봉인되어 있으며 Lexical this라고 하며 코드가 실행되기 전에 결정될 수 있습니다. 다른 어떤 큰 사람도 그것을 덮을 수 없습니다.

이것의 장점은 혼란을 야기할 염려 없이 콜백 함수의 현재 범위를 사용하는 것이 편리하다는 것입니다.

따라서 화살표 함수의 경우 생성된 위치를 살펴보세요.

V8에서 구현한 어휘 범위에 관심이 있다면 여기를 살펴보세요.

function showThis () {
console.log(this)
}
 
showThis() // window
new showThis() // showThis
 
var boss1 = { name: 'boss1' }
showThis.call(boss1) // boss1
new showThis.call(boss1) // TypeError
 
var boss1showThis = showThis.bind(boss1)
boss1showThis() // boss1
new boss1showThis() // showThis

다음과 같은 이상한 사용법에 주의해야 합니다:

function callback (cb) {
cb()
}
 
callback(() => { console.log(this) }) // window
 
var boss1 = {
name: 'boss1',
callback: callback,
callback2 () {
callback(() => { console.log(this) })
}
}
 
boss1.callback(() => { console.log(this) }) // still window
boss1.callback2(() => { console.log(this) }) // boss1

결국 왜 boss2인지 모르겠다면 계속 이해하세요. 어디서 만들어졌는가'라는 문장이다.

위는 JavaScript의 6가지 허들에 대한 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 주목해주세요!