> 웹 프론트엔드 > JS 튜토리얼 > JavaScript_javascript 기술에서 이 사용법에 대한 심층적이고 간단한 분석

JavaScript_javascript 기술에서 이 사용법에 대한 심층적이고 간단한 분석

WBOY
풀어 주다: 2016-05-16 16:00:03
원래의
1209명이 탐색했습니다.

이 기사의 예에서는 JavaScript에서 이 기능을 사용하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

이전에는 JavaScript를 배울 때 이것을 이해할 수 없었습니다. 이것은 Java에서 이것만큼 이해하기 쉽지 않습니다. 나중에 다른 분들이 쓴 글을 많이 읽고 나서야 이해하게 됐어요. 이제 나중에 잊어버리지 않도록 다른 사람들이 쓴 내용을 살펴보겠습니다.

이에 대해서는 일반적으로 세 가지 방향이 있습니다. 전역 창, 개체 및 생성자를 가리킵니다.

결론: Javascript에서는 함수가 실행될 때 현재 개체를 가리킵니다. 간단히 말해서 호출된 메서드가 어느 개체에 속해 있는지는 해당 개체를 가리킵니다.

1. 글로벌 창

간단코드

var message = "this in window";
var printMessage = function(){
  console.info(this === window);
  console.info(this.message);
};
printMessage();
로그인 후 복사

printMessage 호출 메소드가 window에 속하기 때문에 출력 결과는 다음과 같습니다.

창에 있는 내용은 사실입니다

이제 코드를 좀 더 복잡하게 바꾸면

var message = "this in window";
var printMessage = function(){
  console.info(this === window);
  console.info(this.message);
};
var obj = {
  message: 'this in obj',
  printMsg : function(){
 printMessage();
  }
};
obj.printMessage();
로그인 후 복사

현재 printMessage 메소드는 window에 속해 있으므로 this는 여전히 window를 가리킵니다. obj.printMessage 메소드는 obj 객체에 속합니다. 아래 분석을 참조하세요.

그래서 출력 결과는 여전히 다음과 같습니다. 창에서는 true입니다

2. 객체

이제 개체를 살펴보고 코드를 살짝 변경해 보세요

var message = "this in window";
var printMessage = function(){
  console.info(this === window);
  console.info(this.message);
};
var obj = {
  message: 'this in obj',
  printMessage : window.printMessage
};
obj.printMessage();
로그인 후 복사

결과:

obj에서 이것을 false로 설정

예, 맞습니다. 여전히 이전 단계의 결론입니다. obj.printMessage 메서드는 obj 개체에 속하므로 이는 obj를 가리킵니다.

알겠습니다. 더 이상 걱정하지 마세요. 코드를 살펴보세요.

var message = "this in window";
var printMessage = function(){
  console.info(this === window);
  console.info(this.message);
};
var obj = {
  message: 'this in obj',
  printMessage : function(){
 var obj2 = {
   message:'this in obj2',
   printMessage: window.printMessage
 };
 obj2.printMessage();
  }
};
obj.printMessage();
로그인 후 복사

최종 호출은 obj2.printMessage()이므로 이것이 실행되면 obj2가 됩니다

결과:

false, obj2에서는

하하, 여러분이 생각하는 것과 같나요? 누가 부르든 누구를 가리킵니다.

3. 생성자

var Person = function(){
  this.age = 1;
  this.name = 'no name';
};
var p = new Person();
console.info('age = ' + p.age);
console.info('name = ' + p.name);
로그인 후 복사

결과:

나이 = 1 이름 = 이름 없음.

그렇다면 생성자는 이를 위해 무엇을 합니까? 앞서 언급한 "간단한 용어로 JavaScript 프로토타입 체인 이해"에는 new에 대한 분석이 포함되어 있습니다.

var Person = function(){};
var p = new Person();
로그인 후 복사

새로운 프로세스는 다음 세 단계로 나누어집니다.
(1) var p={}; 즉, 객체 p를 초기화합니다
(2) p.__proto__ = Person.prototype;
(3) Person.call(p); 즉 초기화 p라고도 할 수 있는 p를 구성합니다

그럼 통화 얘기를 해보자.

호출 방법

적용 대상: 함수 객체
현재 개체를 다른 개체로 바꾸려면 개체에 대한 메서드를 호출합니다.

전화([thisObj[,arg1[, arg2[, [,.argN]]]]])

매개변수:
thisObj
선택 과목. 현재 객체로 사용될 객체입니다.
arg1, arg2, , argN
선택 과목. 일련의 메소드 매개변수가 전달됩니다.

설명:
호출 메소드는 다른 객체를 대신하여 메소드를 호출하는 데 사용될 수 있습니다. call 메소드는 함수의 객체 컨텍스트를 초기 컨텍스트에서 thisObj가 지정한 새 객체로 변경합니다. thisObj 매개변수가 제공되지 않으면 Global 개체가 thisObj로 사용됩니다.

호출 메소드의 기능은 실제로 기본 메소드의 this 지점을 변경하는 것이라고 설명합니다. 호출 메소드는 메소드 객체여야 합니다. 호출이 호출되면 메소드 객체의 this 지점이 호출 메소드의 첫 번째 매개변수가 됩니다.

var p = 새로운 사람()

Person 생성자가 호출되면 호출을 통해 처리될 수 있으므로 Person의 this.age = 1은 p.age = 1과 동일하므로 age 속성이 p에 추가됩니다.

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿