JavaScript 함수_javascript 기술의 4가지 호출 방법에 대한 자세한 설명

JavaScript에서 함수는 일급 시민입니다. 함수는 C#이나 기타 설명 언어처럼 모듈로만 사용되는 것이 아니라 JavaScript의 데이터 유형입니다. 함수 호출 모드에는 함수 호출 형식, 메서드 호출 형식, 생성자 형식, 적용 형식 등 4가지가 있습니다. 여기의 모든 호출 모드 중에서 주요 차이점은 this 키워드의 의미에 있습니다. 이러한 호출 형식은 아래에 소개되어 있습니다.

이 기사의 주요 내용:

1. 함수의 4가지 호출 형태 분석
2. 함수에서 이 의미를 명확히 합니다
3. 함수 객체를 구성하는 과정을 명확히 합니다
4. 🎜>

1. 함수 호출 형태

함수 호출 형식은 가장 일반적인 형식이자 가장 잘 이해되는 형식입니다. 소위 함수 형식이란 일반적으로 함수를 선언하고 직접 호출하는 것을 의미합니다. 예:

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

// 함수를 선언하고
function func() {
Alert("Hello World");
}
func();

을 호출하거나

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

// 함수의 람다 표현식을 사용하여 함수를 정의한 후
var를 호출합니다. func = function() {
경고("안녕하세요, 프로그래머");
};
func();

이 두 코드 조각은 브라우저에 대화 상자를 표시합니다. 문자열에 텍스트를 표시하는 것은 함수 호출입니다.
함수 호출은 일반적으로 배우는 것과 마찬가지로 매우 간단하다는 것을 알 수 있습니다. 여기서 중요한 점은 함수 호출 모드에서 함수의 this 키워드가 창 개체인 전역 개체를 참조한다는 것입니다. 브라우저. 예:

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

var func = function() {
alert(this);
};
func();

이때, 대화상자가 팝업되어 [오브젝트 창]이 출력됩니다.

2. 메소드 호출 모드

함수 호출 모드는 매우 간단하며 가장 기본적인 호출 방법입니다. 하지만 동일한 기능이지만 객체의 멤버에 할당한 후에는 다릅니다. 객체의 멤버에 함수를 할당한 후에는 더 이상 함수가 아니라 메서드라고 합니다. 예:

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

// 함수 정의
var func = function() {
Alert("나는 함수인가요?");
};
// 객체에 할당
var o = {};
o.fn = func; // 여기에 괄호를 추가하지 않도록 주의하세요
//
o.fn() 호출

이때 o.fn은 함수가 아닙니다. . 실제로 fn의 메소드 본문은 func의 메소드 본문과 완전히 동일하지만 여기에는 미묘한 차이가 있습니다. 아래 코드를 보세요:

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

// 위 코드 계속
alert(o.fn === func);
인쇄된 결과는 true입니다. 이는 두 함수가 동일하다는 것을 나타냅니다. 그러나 함수의 코드를 수정합니다:
//함수 본문 수정

var func = function() {
Alert(this);
};
var o = {};
o.fn = func;
//비교
alert(o.fn === func);
// 호출
func();
o.fn();

여기에서 실행 결과적으로 두 기능은 모두 동일하므로 인쇄된 결과는 사실입니다. 그러나 두 함수의 호출이 다르기 때문에 func를 호출하면 [object Window]가 인쇄되고, o.fn의 인쇄 결과는 [object Object]가 됩니다.
함수 호출과 메서드 호출의 차이점은 다음과 같습니다. 함수 호출에서 this는 구체적으로 전역 개체 창을 참조하는 반면, 메서드에서는 구체적으로 현재 개체를 참조합니다. 즉, o.fn의 this는 개체를 참조합니다. 영형.

3. 생성자 호출 모드

순수 함수 모드에서는 창을 나타내며, 객체 메서드 모드에서는 현재 객체를 나타냅니다. 이 두 가지 경우 외에도 JavaScript의 함수는 생성자가 될 수도 있습니다. 함수를 생성자로 사용하는 구문은 함수 호출 앞에 new 키워드를 붙이는 것입니다. 예를 들어 코드는 다음과 같습니다.

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

// 생성자 정의
var Person = function() {
this.name = "Programmer";
this.sayHello = function() {
Alert( "Hello , 이것은 "this.name);
};
};
// 생성자를 호출하고 객체를 생성합니다
var p = new Person();
// 객체 사용
p.sayHello();

위의 경우는 먼저 Person 생성자를 생성한 다음 생성자를 사용하여 객체 p를 생성합니다. 여기에는 새로운 구문이 사용됩니다. 그런 다음 객체를 사용하여 sayHello() 메서드를 호출합니다. 생성자를 사용하여 객체를 만드는 경우는 비교적 간단합니다. 사례에서 볼 수 있듯이 이는 개체 자체를 나타냅니다. 위의 간단한 사용 외에도 생성자로서 함수에 대한 몇 가지 변경 사항이 있습니다. 즉,

1. 객체에서 사용해야 하는 모든 속성은 이에 따라야 합니다.

2. 함수의 return 문의 의미가 다시 작성되었습니다. 객체가 아닌 것이 반환되면 this가 반환됩니다.

생성자의

this

이것의 의미를 알기 위해서는 객체가 생성되는 과정을 분석해야 합니다. 예를 들어 다음 코드는

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

var Person = function() {
This.name = "Programmer";
};
var p = new Person();

여기서 Person 함수를 먼저 정의해 보겠습니다. 전체 실행:

1. 프로그램이 이 문장을 실행할 때 함수 본문을 실행하지 않으므로 JavaScript 해석기는 이 함수의 내용을 알 수 없습니다.

2. 그런 다음 new 키워드를 실행하여 객체를 만듭니다. 인터프리터는 메모리를 할당하고 객체에 대한 참조를 가져온 다음 새 객체에 대한 참조를 함수에 전달합니다.

3. 그런 다음 함수를 실행하고 전달된 객체 참조를 여기에 전달합니다. 즉, 생성자에서는 new에 의해 방금 생성된 객체입니다.

4. 그런 다음 여기에 멤버를 추가합니다. 즉, 개체에 멤버를 추가합니다.

5. 마지막으로 함수가 종료되고 이를 반환한 후 왼쪽 변수에 전달합니다.

생성자의 실행을 분석한 후 생성자에 있는 이것이 현재 객체라는 것을 알 수 있습니다.

생성자에서

return

생성자에서 반환의 의미가 변경되었습니다. 먼저 생성자에서 객체가 반환되면 원래 의미가 유지됩니다. 숫자, 부울 및 문자열과 같은 객체가 아닌 것이 반환되면 반환 문이 없으면 다음 코드도 반환됩니다.

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

// 객체 반환 return
var ctr = function() {
this .name = "Zhao Xiaohu";
return {
name:"Niu Liangliang"
};
};
//객체 생성
var p = new ctr();
//액세스 이름 속성
alert(p.name);

코드를 실행하면 여기에 인쇄된 결과는 "Niu Liangliang"입니다. 생성자는 객체를 반환하기 때문에 return의 의미는 유지되며, 반환된 내용은 return 이후의 객체입니다.

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

// 객체가 아닌 데이터를 반환하는 생성자를 정의합니다.
var ctr = function() {
This.name = " Zhao Xiaohu";
Return "Niu Liangliang";
};
// 객체 생성
var p = new ctr();
//
alert(p) 사용;
alert(p. name);

코드를 실행한 결과 팝업 창에 먼저 [object Object]가 인쇄된 다음 "Zhao Xiaohu"가 인쇄됩니다. 기본 유형에 속하는 string인 경우 여기의 return 문은 유효하지 않으며 return은 이 객체이므로 첫 번째는 [object Object]를 인쇄하고 두 번째는 undefine을 인쇄하지 않습니다.

4. 통화 모드 적용

위의 세 가지 호출 모드 외에도 객체로서의 함수에도 사용할 수 있는 적용 메서드와 호출 메서드가 있습니다. 이것이 제가 적용 모드라고 부르는 네 번째 호출 모드입니다.

먼저 적용 모드를 소개합니다. 우선 적용 모드는 함수처럼 사용할 수도 있고 메소드처럼 사용할 수도 있습니다. 먼저 구문을 살펴보겠습니다: 함수 이름.apply(객체, 매개변수 배열);

여기서 구문은 다소 모호하므로 예를 들어 설명하겠습니다.

1. "js1.js"와 "js2.js"라는 두 개의 새로운 js 파일을 만듭니다.

2. 코드 추가

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

// js1.js 파일에서
var func1 = function() {
this.name = "Programmer";
};
func1.apply(null)
경고(이름);

// js2.js 파일
var func2 = function() {
this.name = "Programmer";
};
var o = {};
func2.apply (o);
경고(o.name);

3. 두 개의 코드를 각각 실행하면 첫 번째 파일의 name 속성이 전역 개체 창에 로드된 반면 두 번째 파일의 name 속성은 수신 개체 o에 있는 것을 확인할 수 있습니다. , 하나는 함수 호출과 동일하고 두 번째는 메소드 호출과 동일합니다.

여기의 매개변수는 메소드 자체의 매개변수이지만 배열 형식으로 저장해야 합니다. 예를 들어 코드는

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

// 배열의 예
var arr1 = [1,2,3,[4,5] ,[6,7,8]];
// 확장
var arr2 = arr1.conact.apply([], arr1);
다음으로 통화 모드의 가장 큰 차이점을 소개합니다. 적용 모드는 호출 중인 매개변수가 배열을 사용하지 않는다는 것입니다. 다음 코드를 보면 명확해집니다.

// 메소드 정의
var func = function(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
};
//객체 생성
var o = {};
//객체에 멤버 추가
// 패턴 적용
var p1 = func.apply(o, [" 자오샤오후", 19, "남성"]);
// 통화 모드
var p2 = func.call(o, "자오샤오후", 19, "남성");

위 코드에서 Apply 모드와 Call 모드의 결과는 동일합니다.

실제로 Apply 모드와 Call 모드를 사용하면 이것의 의미를 얼마든지 제어할 수 있으며 Function js의 디자인 모드에서 널리 사용됩니다. 간단히 요약하면, js에는 함수 호출, 메서드, 생성자, 적용의 네 가지 모드가 있습니다. 이러한 모드에서 this의 의미는 다음과 같습니다. 함수에서는 전역 객체 창입니다. 메서드에서는 다음과 같습니다. 생성자에서는 생성된 객체를 참조하며, 적용 모드에서는 임의로 지정할 수 있습니다. 적용 패턴에 null을 사용하면 함수 패턴, 객체를 사용하면 메소드 패턴이다.

5. 종합 예시

사례로 이번 글을 마무리하겠습니다. 사례 설명: ID가 dv인 div가 있습니다. 마우스를 이동하면 높이가 2배 증가합니다. 마우스가 떠나면 높이가 아래에 직접 로드됩니다.

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

var dv = document.getElementById("dv");
var height =parseInt(dv.style.height || dv.offsetHeight);
var 간격Id;
dv.onmouseover = function() {
// 이미 실행 중인 애니메이션 중지
clearInterval(intervalId);
// 대상 높이 가져오기
var toHeight = height * 2;
// 가져오기 현재 객체
var that = this;
// 타이머를 시작하고 천천히 변경
IntervalId = setInterval(function() {
// 현재 높이 가져오기
var height =parseInt( dv.style.height || dv.offsetHeight);
                                                                       매번                                                                                                                                  변경 사항을 확인하고 단계 크기가 0이면 타이머를 중지합니다
if( h > 0 ) {
) "px";
} else {
                                                                                                                          // 원리는 이전과 동일
clearInterval(intervalId);
var toHeight = height;
var that = this;
IntervalId = setInterval(function() {
var height =parseInt(dv .style.height || dv.offsetHeight);
var h = Math.ceil(Math.abs(height - toHeight) / 10);
if( h > 0 ) {
that.style .height = (height - h) "px";
    } else {
                                                                          🎜>