JavaScript의 메소드 호출에 대한 자세한 소개

이 글에서는 자바스크립트에서 메소드 호출에 대한 자세한 소개를 주로 소개합니다. 자바스크립트에서는 함수가 객체에 속해 있는 경우 객체를 통해 함수에 접근하는 행위를 '메서드 호출'이라고 합니다. .

자바스크립트에서는 함수가 객체에 속해 있는 경우 객체를 통해 함수에 접근하는 행위를 '메서드 호출'이라고 합니다. 일반적인 함수 호출과 달리, 메서드 호출을 할 때 함수의 this 참조가 변경됩니다. 이는 함수를 호출하는 데 사용되는 객체를 참조합니다(객체는 메서드 호출의 호출 컨텍스트가 됩니다).

var x = 99;
var sample = {
  x:1,
  act:function(a){
    this.x = a*a;//assign value to sample's x, not global object's x.
  }
}
sample.act(6);
console.log(sample.x);//36
console.log(x);//9

객체의 속성에 액세스하는 것과 마찬가지로 도트 연산자를 사용하는 것 외에도 JavaScript에서는 대괄호 연산자를 사용하여 메서드를 호출할 수도 있습니다.

//other ways to invoke method
sample["act"](7);
console.log(sample.x);//4

JavaScript 함수의 경우 더 흥미로운 동작입니다. 함수(클로저)가 함수에 포함될 수 있다는 것입니다. 메서드 호출을 할 때 메서드 함수에 포함된 함수가 있으면 포함된 함수의 코드는 외부 변수 값에 액세스할 수 있습니다.

//nested function can access variable outside of it.
var y = 88;
var sample2 = {
  y:1,
  act2:function(a){
    this.y = inner();
    function inner(){
      return a*a;
    }
  }
}
sample2.act2(8);
console.log(sample2.y);//64
console.log(y);//88

그러나 직관과 달리 포함된 함수는 내부 코드는 외부에서 이것을 상속받을 수 없습니다. 즉, 포함된 함수에서 this는 메서드를 호출하는 개체가 아니라 전역 개체를 참조합니다.

//nested function does not inherit "this". The "this" in nested function is global object
var sample3 = {
  act3:function(){
    inner();
    function inner(){
      console.log(this);//window object
    }
  }
}
sample3.act3();

정말 필요한 경우 함수 삽입 메서드를 호출하는 개체에 액세스하려면 이 값을 외부 함수의 변수에 저장할 수 있습니다.

//pass "this" to nested function
var sample4 = {
  act4:function(){
    var self = this;
    inner();
    function inner(){
        console.log(self);//Object {act4=function()}
    }
  }
}
sample4.act4();

위 내용은 이 장의 전체 내용입니다. 자바스크립트 동영상 튜토리얼!