이 글의 내용은 이게 무엇일까요? 이 글은 여러분이 단 몇 초만에 이해할 수 있도록 도와줍니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. 일상적인 개발에서 우리는 이것으로 지적되는 버그를 자주 접하게 됩니다. 오랫동안 우울하다가 갑자기 깨어나서 그 고통으로부터 교훈을 얻어 앞으로의 개발 작업에서 우회하는 일이 없도록 정리했습니다.
참고: 이 글은 브라우저 환경에만 해당됩니다.
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!