이것을 js에서 사용하는 방법

js에서 이게 무슨 뜻인가요?

JS에서 항상 사용하는 말인데, 오늘은 사람들이 쉽게 혼동할 수 있는 것이 무엇인지, 그리고 어떻게 사용하는지에 대해 이야기해보겠습니다. 함수 호출자에게: 간단한 방법은 함수 앞에 점이 있는지 확인하는 것입니다. 점이 있으면 점 앞의 값을 가리킵니다. 2. 화살표 함수는 도메인을 가리킵니다. 함수가 있는 위치: 함수 도메인을 이해하는 데 주의하세요. 함수의 {}만 범위를 구성하고

object

의 {}와 if(){}는 범위를 구성하지 않습니다.

const obj = {
name: 'objName',
say() {
console.log(this.name);  
      }, 
read: () => {
     console.log(this.name);
             }
       }
obj.say(); // objName
obj.read(); // undefined

일반 함수, 호출자는 obj이므로 결과는 objname입니다. say()는 앞에 점이 있는 일반 함수이므로 이것은 obj를 가리킵니다.

arrow 함수, 이것은 다음 범위를 가리킵니다. 함수가 위치하며 현재 범위는 전역 환경이므로 this.name은 정의되지 않습니다.

업데이트하려면 다음 예를 제공하십시오. 화살표 함수의 방향을 명확하게 이해하십시오. say()의 호출자는 obj

const obj = { 
say: function () {
  setTimeout(() => {
   console.log(this)
                  });
                 }
             }

obj.say(); // obj, this는 이때 그를 정의하는 obj입니다

추가 지식 포인트

브라우저의 기본값은 window

function test() {  
console.log(this);
}

test()입니다. //window

node.js
의 전역 환경의 기본값은 {}이며, 일반 함수의 기본값은 전역입니다

console.log(this); // {}
function test() {
 console.log(this);
}
test(); //global

마스터했는지 확인하기 위해 두 가지 질문으로 오세요

example1

const length = 10;
function fn() {
console.log(this.length);
}
const  obj = {
  length: 5,
  method: function(fn) { 
  fn();
  arguments[0]();   
  }
};
obj.method(fn, 1);

Output 10, 2

처음 이 질문을 봤을 때 혼란스러웠는데, 이제 메소드 함수가 두 개의 매개 변수를 전달한다는 것을 이제야 이해했습니다. , 매개변수 중 하나는 fn()이고, fn()은 일반 함수이며, 이는 함수의 호출자를 가리키며 이때 전역 세계를 가리킵니다(이 함수 앞에 점이 없는 것도 볼 수 있습니다). 이므로 실행 결과는 10입니다. 인수는

array

클래스의 객체인 함수의 모든 매개변수입니다. 인수[0]()은 인수에 의해 호출됩니다. 이번에는 인수를 참조하고, this.length는 2

에 전달된 매개변수의 총 개수인 angument.length를 참조합니다. 참고: 노드 환경에서 위 예제의 실행 결과는 정의되지 않았습니다. 2, const length = 10은 전역 .length = 10으로 변경됩니다. 노드 환경에서 전역적으로 정의된

변수
는 전역에 바인딩되지 않고 브라우저는 자동으로 전역 환경 창에 바인딩되기 때문입니다

그렇다면 결과는 어떻게 될까요? 다음과 같이 변경되었나요?

const length = 10;
function fn() {
    console.log(this.length);
}
const obj = {
    length: 5,
    method: function(fn) {
        fn();
        const fun = arguments[0];
        fun()；
    }
};
obj.method(fn, 1);
10, 10
example 2
window.val = 1;
var obj = {
    val: 2,
    dbl: function() {
        this.val *= 2
        val *= 2;
        console.log(val);
        console.log(this.val);
    }
}
obj.dbl(); // 2 4
var func = obj.dbl;
func(); // 8 8

좀 복잡하지만 단계별로 분석해 보면 이해하기 쉽습니다.

obj.dbl() 이 코드를 실행하면 obj를 참조합니다. , 따라서 this.val === obj.val *=2, 최종 결과는 4, val*=2 === window.val *= 2, 이 줄을 실행하면 최종 결과는 2

func()입니다. 코드에서 func()에는 접두사가 없으며 이는 window.func()를 참조하므로 이때 this의 값은 window, this.val === window.val *= 2, 이때 window입니다. val은 4, val*=2 === window.val *2, 최종 결과는 8입니다. 마지막으로 console.log(this.val)와 console.log(val)는 모두 window.val을 참조합니다.

위 내용은 제가 조금 이해한 내용입니다. 제 글에 대해 궁금한 점이 있으시면 언제든지 연락주세요.

관련 권장 사항:

JavaScript 객체 지향 기본 사항 및 이 포인팅 문제를 이해하는 방법

이와 JS 이벤트의 차이점에 대한 자세한 설명

관련 소개, 적용, 호출 및 바인딩 JS

위 내용은 이것을 js에서 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!