Js에서 이것을 구문 분석하는 예

이 글의 내용은 예시 분석을 통해 공유하고자 하는 것입니다. 도움이 필요한 친구들은 참고하시면 됩니다

예제부터 시작해보자

몇일 면접 질문을 읽다가 전에 이런 프로그램을 봤습니다:

obj = {
  name: 'a',
  getName: function () {
    console.log(this.name);
  }
};

var fn = obj.getName;obj.getName();fn();

문제는 fn() 실행 결과와 실행 중에 this를 가리키는 것입니다. 이 예와 그에 포함된 질문을 바탕으로 이것의 사용법을 다시 요약해 보겠습니다. fn()执行的结果和执行时this的指向问题。下面结合这个例子与其中的疑问重新总结一下this的使用。

一 this的执行环境

this的指向要根据其执行环境来决定，主要有以下几种情况：

1 全局上下文环境

全局环境即在任何函数的外部，使用this，则this都指代全局对象。如在浏览器中：

this === window    // true

2 函数上下文环境

在函数上下文环境，即函数内部调用使用this，要取决于this的调用方式。

2.1 简单调用

在简单调用时，函数中的this指向全局对象，比如：

function myFun() {
   console.log(this === window);
}

myFun();    // true

上面这个例子中直接调用了函数myFun，其中的this就等于全局对象window。
其中的原理就是在声明myFun这一函数时，它作为全局对象的一个属性存在。所以直接使用此函数时，即相当于调用了window.myFun()，即其作为window的属性被调用时this即指向window。

在浏览器中调试一下这段程序能更清楚的验证：

2.2 作为对象的方法

当函数作为对象的方法被调用时，其this即指向这个对象。以一开始的例子来说，其执行obj.getName()时，函数中的this即指向了obj这个对象。所以输出a。
但是当我们将这个函数单独分离开，把一开始的例子改变一下：

function myFun() {
  console.log(this.name);
}var obj = {
  name: 'a',
  getName: myFun
};

obj.getName();    // avar obj2 = {
  name: 'b',
  fun: myFun
};

obj2.fun();   // b

从这个例子可以看出，this的指向完全取决于最靠近的成员引用，将函数绑定在哪个对象，哪个引用上，则this就有不同的指向。在上例中我们将带有this的函数分别绑定到了不同的对象上作为其方法，则其this对应着便绑定到不同的对象上，this.name的值便不同。
同理，当我们直接执行myFun()时，此函数即作为全局对象window的一个属性来调用。所以找不到myName属性，输出undefined。(因为全局对象window有默认属性name为空字符串，此处使用myName作为例子)

function myFun() {
  console.log(this.myName);
}
myFun();    // undefined

最后，解释一开始的例子，将obj.getName赋值给了fn，所以，执行fn时即相当于执行了window.fn()，即这个一开始初始化为obj的属性的匿名函数被绑定到了window的fn属性上，所以其this指向window。
由window的name

실행 환경

실행 환경에 따라 방향이 결정됩니다. 주로 다음과 같은 상황이 있습니다.

1 전역 컨텍스트 환경

전역 환경은 함수 외부에 있습니다. this이면 this는 전역 개체를 참조합니다. 예를 들어 브라우저에서는 다음과 같습니다. rrreee

2 함수 컨텍스트

함수 컨텍스트에서, 즉 함수 내부에서 이것을 호출할 때 이것이 어떻게 호출되는지에 따라 다릅니다.

2.1 단순 호출

간단한 호출에서 함수의 this는 다음과 같은 전역 개체를 가리킵니다. rrreee위의 예에서 myFun 함수는 직접적으로 호출되며, 여기서 this는 전역 개체 window와 같습니다. 🎜원칙은 myFun 함수를 선언할 때 전역 객체의 속성으로 존재한다는 것입니다. 그래서 이 함수를 직접 사용하면 window.myFun()을 호출하는 것과 같습니다. 즉, window의 속성으로 호출하면 이 는 창을 가리킵니다. 🎜🎜더 명확하게 확인하려면 브라우저에서 이 프로그램을 디버그하세요. 🎜🎜

2.2 객체 메소드로

🎜함수가 객체 메소드로 사용될 때 호출되면 this는 이 객체를 가리킵니다. 초기 예제를 예로 들면, obj.getName()이 실행될 때 함수의 this는 객체 obj를 가리킵니다. 따라서 a를 출력하세요. 🎜하지만 이 함수를 별도로 분리할 때 초기 예를 변경하세요. 🎜rrreee🎜이 예에서 볼 수 있듯이 this를 가리키는 것은 가장 가까운 멤버 참조에 완전히 의존합니다 , 함수가 바인딩된 객체와 참조가 무엇인지에 따라 다른 점이 발생합니다. 위의 예에서는 this를 사용하여 함수를 메서드로 다른 개체에 바인딩한 다음 해당 this를 다른 개체에 바인딩했습니다. this.name 의 값은 다릅니다. . 🎜마찬가지로 myFun()을 직접 실행하면 이 함수가 전역 객체 window의 속성으로 호출됩니다. 따라서 myName 속성을 ​​찾을 수 없으며 undefine이 출력됩니다. (전역 개체 window에는 빈 문자열인 기본 속성 name이 있으므로 여기서는 myName을 예로 사용했습니다.)🎜 rrreee🎜마지막으로 시작 부분의 예시를 설명하자면 obj.getName이 fn에 할당되어 있으므로 fn을 실행하는 것은 동일합니다. window.fn()을 실행하는 것입니다. 즉, 처음에 obj의 속성으로 초기화된 이 익명 함수는 window의 fn 속성에 바인딩됩니다. 이므로 this는 window를 가리킵니다. 🎜window의 name 속성은 빈 문자열이므로 출력이 비어 있습니다. 🎜🎜관련 권장 사항: 🎜🎜🎜javascript의 이 속성에 대한 자세한 설명🎜🎜🎜🎜javascript의 이 포인터에 대한 심층적인 이해🎜🎜

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