자바스크립트 -- 이 키워드

JavaScript에서 this 키워드는 현재 실행 중인 함수가 속한 개체를 참조하는 데 사용됩니다. 함수가 호출된 컨텍스트 개체를 가리킵니다.

구체적으로 JavaScript에서 this의 값은 함수가 정의될 때가 아니라 함수가 호출될 때 결정됩니다. 이것의 값은 함수가 호출된 방법에 따라 다릅니다.

다음은 몇 가지 일반적인 상황에서 이것의 값입니다.

1. 전역 범위(함수 외부)에서 this는 전역 개체(예: 브라우저 환경의 창 개체)를 나타냅니다.
2. 함수가 객체의 메소드로 호출될 때 this는 메소드를 호출한 객체를 가리킨다.
3. 생성자를 사용하여 객체를 생성할 때 this는 새로 생성된 객체를 가리킵니다.
4. call() 또는 apply() 메서드를 사용하여 함수를 호출할 때 this 값을 함수 내에서 수동으로 지정할 수 있습니다.
5. 화살표 함수를 사용할 때 this의 값은 호출하는 메서드에 의해 결정되는 것이 아니라 부모 범위의 this 값에서 상속됩니다.
경우에 따라 이 값이 복잡하거나 오류가 발생하기 쉬울 수 있습니다.

다음 예는 JavaScript에서 이 키워드의 사용 및 값을 보여줍니다.

1. 전역 범위에서 this는 전역 개체(일반적으로 브라우저 환경의 창 개체)를 가리킵니다.

console.log(this); // 输出全局对象 (浏览器环境中通常是 window)

2. 함수가 객체의 메서드로 호출되면 this는 메서드를 호출한 객체를 가리킵니다.

var person = {
  name: 'John',
  sayHello: function() {
    console.log('Hello, ' + this.name);
  }
};

person.sayHello(); // 输出 "Hello, John"

3. 생성자를 사용하여 객체를 생성할 때 this는 새로 생성된 객체를 가리킵니다.

function Person(name) {
  this.name = name;
}

var person1 = new Person('John');
console.log(person1.name); // 输出 "John"

4. call() 또는 apply() 메서드를 사용하여 함수 내에서 this의 값을 수동으로 지정합니다.

function greet() {
  console.log('Hello, ' + this.name);
}

var person = { name: 'John' };

greet.call(person); // 输出 "Hello, John"

5. 화살표 함수에서 this의 값은 상위 범위의 this 값에서 상속되며 호출 메서드가 변경되어도 변경되지 않습니다.

var person = {
  name: 'John',
  sayHello: () => {
    console.log('Hello, ' + this.name);
  }
};

person.sayHello(); // 输出 "Hello, John" (箭头函数继承了外部作用域的 this 值)

자바스크립트 -- 이 키워드

추천