JavaScript의 이 규칙에 대한 간략한 소개

여기서 규칙이 무엇인지 확인하려면 호출 위치를 확인하여 함수가 호출될 때 이를 확인하는 방법이 실제로는 Script House의 편집자를 따라가서 이 기사를 통해 알아봅시다. 함수에서 이것이 무엇인지 결정하는 규칙입니다.

이것이 무엇인지 판단하는 것은 실제로 매우 간단합니다. 일반적인 규칙은 함수가 호출된 위치를 확인하여 함수가 호출될 때 이를 결정하는 것입니다. 이는 우선순위에 따라 다음에 설명된 규칙을 따릅니다.

Rules1. 함수를 호출할 때 new 키워드를 사용하면 함수의 this는 완전히 새로운 개체입니다.

function ConstructorExample() {
  console.log(this);
  this.value = 10;
  console.log(this);
}
new ConstructorExample();
// -> {}
// -> { value: 10 }

2. Apply, Call 또는 Bind를 사용하여 함수를 호출하는 경우 함수의 this는 매개 변수로 전달된 개체입니다.

function fn() {
  console.log(this);
}
var obj = {
  value: 5
};
var boundFn = fn.bind(obj);
boundFn();   // -> { value: 5 }
fn.call(obj); // -> { value: 5 }
fn.apply(obj); // -> { value: 5 }

3. 함수를 메소드로 호출하면, 즉 점 표기법을 사용하여 함수를 호출하면 이 함수를 속성으로 갖는 객체입니다. 즉, 점이 함수 호출의 왼쪽에 있는 경우 이는 점의 왼쪽에 있는 개체입니다.

var obj = {
  value: 5,
  printThis: function() {
    console.log(this);
  }
};
obj.printThis(); // -> { value: 5, printThis: ƒ }

4. 함수가 순수 함수로 호출되면, 즉 위의 조건 중 어느 것도 없이 호출되면 이것이 전역 객체입니다. 브라우저에서는 이것이 window 객체입니다.

function fn() {
  console.log(this);
}
// 如果在浏览器里调用：
fn(); // -> Window {stop: ƒ, open: ƒ, alert: ƒ, ...}

이 규칙은 실제로 세 번째 규칙과 동일합니다. 차이점은 메서드로 선언되지 않은 함수는 자동으로 전역 개체 창의 속성이 된다는 것입니다. 따라서 이는 실제로 암시적 메서드 호출입니다. fn()을 호출하면 실제로 브라우저는 window.fn()으로 인식하므로 이것이 window입니다.

console.log(fn === window.fn); // -> true

5. 위 규칙 중 두 가지 이상이 적용되는 경우 우선순위가 더 높은 규칙이 이 값을 설정합니다.

6. ES2015의 화살표 함수라면 위의 모든 규칙을 무시하고 생성 시 이를 포함하는 범위를 this의 값으로 받습니다. 이것이 무엇인지 확인하려면 화살표 함수를 만든 위치에서 한 줄 위로 올라가서 이것이 무엇인지 확인하세요. 화살표 함수의 this 값은 동일합니다.

const obj = {
  value: 'abc',
  createArrowFn: function() {
    return () => console.log(this);
  }
};
const arrowFn = obj.createArrowFn();
arrowFn(); // -> { value: 'abc', createArrowFn: ƒ }

세 번째 규칙을 다시 살펴보면, obj.createArrowFn()을 호출할 때 createArrowFn의 이는 메서드 호출이기 때문에 obj입니다. 따라서 obj는 arrowFn에서 여기에 바인딩됩니다. 전역 범위에서 화살표 함수를 생성하면 이 값은 window가 됩니다.

규칙 적용 코드 예제를 보고 이러한 규칙을 적용해 보겠습니다. 시도해 보고 이것이 다른 함수 호출에서 무엇인지 알아낼 수 있는지 확인하십시오.

어떤 규칙이 적용되는지 확인

var obj = {
  value: 'hi',
  printThis: function() {
    console.log(this);
  }
};
var print = obj.printThis;
obj.printThis(); // -> {value: "hi", printThis: ƒ}
print(); // -> Window {stop: ƒ, open: ƒ, alert: ƒ, ...}

obj.printThis()는 세 번째 규칙인 메서드 호출에 속합니다. 반면에 print()는 네 번째 규칙인 순수 함수 호출에 속합니다. print()의 경우 호출 시 new, 바인딩/호출/적용 또는 점 표기법을 사용하지 않았으므로 규칙 4에 해당합니다. 이것이 전역 개체 창입니다.

여러 규칙이 적용되는 경우여러 규칙이 적용되는 경우 목록에서 우선순위가 더 높은 규칙을 사용하세요.

var obj1 = {
  value: 'hi',
  print: function() {
    console.log(this);
  },
};
var obj2 = { value: 17 };

규칙 2와 규칙 3이 동시에 적용되는 경우 규칙 2가 우선 적용됩니다.

obj1.print.call(obj2); // -> { value: 17 }

규칙 1과 규칙 3이 모두 적용되면 규칙 1이 우선 적용됩니다.

new obj1.print(); // -> {}

Library일부 라이브러리에서는 때때로 의도적으로 이 값을 특정 함수에 바인딩합니다. 일반적으로 가장 유용한 값은 함수에서 여기에 바인딩됩니다. 예를 들어 jQuery는 이를 DOM 요소에 바인딩하고 콜백에서 이벤트를 트리거합니다. 라이브러리에 위 규칙을 따르지 않는 this 값이 있는 경우 해당 라이브러리의 설명서를 주의 깊게 읽어 보십시오. 바인드를 사용하여 바인딩될 가능성이 높습니다.

요약

위 내용은 JavaScript의 이 규칙에 대한 간략한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!