javascript 함수 호출의 개체 및 메서드_javascript 기술

Javascript 함수 호출이 어떻게 작동하는지 제대로 이해하면 몇 가지 버그를 피할 수 있습니다.
먼저 아래에서 사용할 간단한 함수를 만들어 보겠습니다. 이 함수는 이 함수와 제공된 두 매개변수만 반환합니다.

코드 복사 코드는 다음과 같습니다.

function makeArray(arg1, arg2 ){
return [ this, arg1, arg2 ]
}

이 함수를 호출하는 것은 매우 간단합니다.

코드 복사 코드는 다음과 같습니다.

makeArray('one', 'two')

Return value: => [ window, 'one', 'two' ]
문제가 발생합니다. 이 값은 어떻게 window가 되었나요? 간단한 분석을 해보겠습니다.
Javascript에는 전역 객체가 있습니다. 스크립트에 흩어져 있는 것처럼 보이는 모든 코드 줄은 실제로 전역 객체의 컨텍스트에서 작성됩니다. 실제로는 makeArray입니다. 함수는 느슨한 전역 함수가 아니라 전역 개체의 메서드라고 할 수 있습니다. 이 환경에서 해당 전역 개체는 창 개체에 매핑됩니다.

코드 복사 코드는 다음과 같습니다.

alert( typeof window.makeArray)

반환값: => function

이것은 모두 이전에 makeArray를 호출한 메소드가 아래에서 호출한 메소드와 동일하다는 것을 의미합니다.

코드 복사 코드는 다음과 같습니다.

window.makeArray('one', 'two')

반환 값: => [ window, 'one', 'two' ]

JavaScript 함수 호출 규칙 1: myFunction()과 같이 명시적인 소유자 개체 없이 직접 호출되는 함수에서는 결과 값은 기본 개체(브라우저의 창)가 됩니다.

이제 간단한 개체를 만들고 해당 메서드 중 하나로 makeArray 함수를 사용합니다. json을 사용하여 개체를 선언합니다.

코드 복사 코드는 다음과 같습니다.

var arrayMaker = {
someProperty: 'some value here',
make : makeArray
};
arrayMaker.make('one', 'two')
// Return: => [ arrayMaker, 'one', 'two' ]
arrayMaker[ ' make']('one', 'two');
// Return: => [ arrayMaker, 'one', 'two' ]

이 값은 object arrayMaker 자체가 왜 원래 함수 정의가 변경되지 않았는지, 왜 창이 아닌지 궁금할 것입니다. 함수는 객체이므로 매개변수 목록 및 함수와 함께 전체 함수를 전달하거나 복사할 수 있습니다. body를 복사하고 arrayMaker의 make 속성에 할당하면 다음과 같이 arrayMaker를 정의하는 것과 같습니다.

코드 복사 코드는 다음과 같습니다.

var arrayMaker = {
someProperty: 'some value here',
make: function (arg1, arg2) {return [ this, arg1, arg2 ];}
};

JavaScript 함수 호출 규칙 2: obj.myFunction() 또는 obj['myFunction']()과 같은 메서드 호출 구문을 사용할 때 이 값 obj입니다.

이것이 이벤트 처리 코드의 주요 버그 소스입니다. 다음 예를 살펴보세요.

코드 복사 코드는 다음과 같습니다.

Javascript에는 클래스가 없으며 모든 사용자 정의 유형에는 초기화 기능이 필요한 프로토타입 객체를 사용하여 유형을 정의합니다. , 간단한 유형을 만들어 보겠습니다

코드 복사 코드는 다음과 같습니다.

function ArrayMaker(arg1, arg2) {

this.someProperty = 'whatever';
this.theArray = [ this, arg1, arg2 ]
//인스턴스화 방법 선언
ArrayMaker.prototype = {
someMethod: function () {
alert( 'someMethod Called')
},
getArray: function () {
return this.theArray; }
};
var am = new ArrayMaker( 'one', 'two' )
var other = new ArrayMaker( 'first', 'second' )
am.getArray( ) ;
// 반환 값: => [ am, 'one' , 'two' ]


new 연산자가 함수 호출 앞에 표시된다는 점은 주목할 가치가 있습니다. , 함수는 전역 함수와 같으며 우리가 생성하는 속성은 전역 개체(창)에 생성되며 이를 원하지 않는 또 다른 주제는 생성자에 반환 값이 없기 때문에 사용하는 것을 잊어버렸다는 것입니다. new 연산자를 사용하면 일부 변수가 정의되지 않은 상태로 할당됩니다. 이러한 이유로 생성자 함수를 대문자로 시작하는 것이 좋습니다.

Javascript 함수 호출 규칙 3: MyFunction()과 같은 함수를 초기화 함수로 사용하면 Javascript 런타임은 새로 생성된 객체에 이 값을 할당합니다.