이게 뭔가요? 하나의 기사는 이것을 몇 초 안에 이해하는 데 도움이 될 것입니다.

이 글의 내용은 이게 무엇일까요? 이 글은 여러분이 단 몇 초만에 이해할 수 있도록 도와줍니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. 일상적인 개발에서 우리는 이것으로 지적되는 버그를 자주 접하게 됩니다. 오랫동안 우울하다가 갑자기 깨어나서 그 고통으로부터 교훈을 얻어 앞으로의 개발 작업에서 우회하는 일이 없도록 정리했습니다.

참고: 이 글은 브라우저 환경에만 해당됩니다.

1: 전역 실행

console.log（this）；
// Window

전역 범위에서 이는 현재 전역 객체 Window를 가리킨다는 것을 알 수 있습니다.

2: 함수에서의 실행

1 비엄격 모드에서

function func （） {
console.log（this）；
}
func（）；
// Window

2. # 🎜🎜#

"use strict";
function func （） {
console.log（this）；
}
func（）；
// undefined

3: 객체로서의 메소드 호출

함수가 객체의 메소드로 호출될 때, 이는 현재 객체를 가리킵니다. obj:

var obj = {
name: 'kk',
func: function （） {
console.log（this.name）；
}
}
obj.func（）；
// kk

객체 메서드가 변수에 할당된 경우 메서드가 호출되면 Window:

var obj = {
name: 'kk',
func: function （） {
console.log（this）；
}
}
var test = obj.func;
test（）；
// Window

Four: 다음으로 사용됩니다. constructor

JS에서는 클래스를 구현하려면 일부 생성자를 정의하고 생성자를 호출할 때 new 키워드를 추가해야 합니다.

function Person （name） {
this.name = name;
console.log（this）；
}
var p1 = new Person（'kk'）；
// Person

여기서 이 생성자가 호출될 때 인스턴스화되는 개체를 가리킵니다.

물론, 생성자는 실제로 함수입니다. 생성자가 일반 함수로 호출되면 이는 Window:

function Person （name） {
this.name = name;
console.log（this）；
}
var p2 = Person（'MM'）；
// Window

5를 가리킵니다. 타이머 사용

setInterval（function （） {
console.log（this）；
}, 2000）
// Window
setTimeout（function （） {
console.log（this）；
}, 0）
// Window

특별한 포인터가 없는 경우(포인터 변경에 대해서는 아래 참조: 포인터 변경 방법) setInterval의 콜백 함수에서 이 포인터를 사용하고 setTimeout은 모두 Window입니다. 이는 JS 타이머 메서드가 Window 아래에 정의되어 있기 때문입니다.

Six: 화살표 함수

전역 환경에서 호출:

var func = （） => {
console.log（this）；
}
func（）；
// Window

객체의 함수로 호출 :

var obj = {
name: 'hh',
func: function （） {
setTimeout（function （） {
console.log（this）；
}, 0）
}
}
obj.func（）；
// Window
var obj = {
name: 'hh',
func: function （） {
setTimeout（（） => {
console.log（this）；
}, 0）
}
}
obj.func（）；
// obj

일반 함수는 객체의 함수로 호출되는 것을 어렵지 않게 찾을 수 있습니다. 이는 Window를 가리키고, 화살표 함수는 객체의 함수로 호출되며, 이것은 func this에 있는 객체, 즉 obj입니다.

화살표 함수 내 this의 값은 함수 외부의 화살표가 아닌 함수의 this 값에 따라 달라지며, call(), apply(), 바인딩을 통해 this 값을 변경할 수 없습니다. () 방법.

세븐: 호출, 적용, 바인드

call:

fun.call(thisArg[, arg1[ , arg2[, …]]])

첫 번째 매개변수는 실행 함수에서 이것의 컨텍스트를 지정하며, 다음 매개변수는 전달되어야 하는 매개변수입니다. #🎜 🎜#

apply：

fun.apply(thisArg, [argsArray])

또한 함수가 즉시 실행됩니다. 첫 번째 매개변수는 지정된 실행 함수이고, 두 번째 매개변수는 실행 함수에 전달되는 매개변수입니다(호출과 다름).

bind:

# 🎜🎜#var foo = fun.bind (thisArg[, arg1[, arg2[, …]]])

It는 함수를 실행하지 않지만 새 함수를 반환합니다. 이 컨텍스트를 할당하고 나중에 매개변수는 함수를 실행하기 위해 전달해야 하는 매개변수입니다.

예를 살펴보겠습니다.

function Person（name, age） {
this.name = name;
this.age = age;
console.log（this）；
}
var obj = {
name: 'kk',
age: 6
};
Person.call（obj, 'mm', 10）；
// obj，{name: "mm", age: 10}
Person.apply（obj, ['mm', 10]）；
// obj，{name: "mm", age: 10}
var p1 = Person.bind（obj, 'mm', 10）
var p2 = new p1（）；
// Person {name: "mm", age: 10}

In 이 예에서는 obj에 대한 모든 지점을 호출하고 적용하며 모두 정상적으로 실행될 수 있습니다. 호출과 적용의 차이점은 호출이 여러 매개변수 목록을 수신하고 적용이 수신된다는 것입니다. 여러 매개변수가 포함된 배열, 바인드는 함수를 즉시 실행하지 않고 결과를 반환하기 위해 p2를 실행해야 합니다.

응용 프로그램: 이 포인팅을 변경하는 방법

모든 사람이 설명된 포인팅 문제를 보다 철저하게 이해할 수 있도록 이 모듈에 대해 이야기하는 이유는 무엇입니까? JS에 대한 더 깊은 이해를 돕기 위해 함수에는 호출, 적용, 바인딩의 세 가지 중요한 방법이 있으며 실제 프로젝트 개발에서는 this 포인터를 변경해야 하는 상황에 자주 직면합니다.

메소드를 살펴보겠습니다:

1.es6의 화살표 기능을 사용합니다.

var name = "hh";
var obj = {
name : "kk",
func1: function （） {
console.log（this.name）
},
func2: function （） {
setTimeout（function （） {
this.func1（）
}, 1000）；
}
};
obj.func2（）；
// Uncaught TypeError: this.func1 is not a function

이때 오류가 발생합니다. setTimeout의 함수는 Window를 가리키고 Window 객체에는 func1 함수가 없기 때문입니다. 화살표 함수로 바꿔보겠습니다:

var name = "hh";
var obj = {
name : "kk",
func1: function （） {
console.log（this.name）
},
func2: function （） {
setTimeout（（） => {
this.func1（）
}, 1000）；
}
};
obj.func2（）；
// kk

이때 화살표 함수의 this 값은 함수 외부의 화살표가 아닌 함수의 this 값에 따라 달라지기 때문에 오류가 보고되지 않습니다. , 이는 func2의 this 값, 즉 obj입니다.

2. 함수 내에서 _this = this를 사용하세요

var name = "hh";
var obj = {
name : "kk",
func1: function （） {
console.log（this.name）
},
func2: function （） {
let _this = this;
setTimeout（function （） {
_this.func1（）
}, 1000）；
}
};
obj.func2（）；
// kk

이때 func2도 정상적으로 실행됩니다. func2에서 먼저 var _this = this를 설정합니다. 여기서 this는 func2를 가리키는 객체 obj입니다. func2의 setTimeout이 window에서 호출되는 것을 방지하기 위해 setTimeout의 this는 window가 됩니다. this(변수 obj를 가리킴)를 변수 _this에 할당하여 func2에서 _this를 사용할 때 obj 개체를 가리킵니다.

3. 호출, 적용, 바인드 사용 바인드는 이것의 컨텍스트 객체를 변경할 수 있으므로 오류가 보고되지 않고 정상적으로 실행될 수 있습니다.

구체적인 이유는 위 일곱번째 항목인 call, Apply, Binding에서 확인할 수 있습니다.

4. new는 객체를 인스턴스화합니다.

위와 같이: 네 번째 지점이 생성자로 사용됩니다.

위 내용은 이것이 무엇인지에 대한 설명입니다. JavaScript Tutorial에 대해 더 알고 싶다면 PHP 중국어 웹사이트를 주목하세요.

위 내용은 이게 뭔가요? 하나의 기사는 이것을 몇 초 안에 이해하는 데 도움이 될 것입니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!