JavaScript에서 함수는 일급 시민입니다. 함수는 C#이나 기타 설명 언어처럼 모듈로만 사용되는 것이 아니라 JavaScript의 데이터 유형입니다. 함수 호출 모드에는 함수 호출 형식, 메서드 호출 형식, 생성자 형식, 적용 형식 등 4가지가 있습니다. 여기의 모든 호출 모드 중에서 주요 차이점은 this 키워드의 의미에 있습니다. 이러한 호출 형식은 아래에 소개되어 있습니다.
이 기사의 주요 내용:
1. 함수의 4가지 호출 형태 분석
2. 함수에서 이 의미를 명확히 합니다
3. 함수 객체를 구성하는 과정을 명확히 합니다
4. 🎜>
1. 함수 호출 형태
함수 호출 형식은 가장 일반적인 형식이자 가장 잘 이해되는 형식입니다. 소위 함수 형식이란 일반적으로 함수를 선언하고 직접 호출하는 것을 의미합니다. 예:2. 메소드 호출 모드
함수 호출 모드는 매우 간단하며 가장 기본적인 호출 방법입니다. 하지만 동일한 기능이지만 객체의 멤버에 할당한 후에는 다릅니다. 객체의 멤버에 함수를 할당한 후에는 더 이상 함수가 아니라 메서드라고 합니다. 예:var func = function() {
Alert(this);
};
var o = {};
o.fn = func;
//비교
alert(o.fn === func);
// 호출
func();
o.fn();
3. 생성자 호출 모드
순수 함수 모드에서는 창을 나타내며, 객체 메서드 모드에서는 현재 객체를 나타냅니다. 이 두 가지 경우 외에도 JavaScript의 함수는 생성자가 될 수도 있습니다. 함수를 생성자로 사용하는 구문은 함수 호출 앞에 new 키워드를 붙이는 것입니다. 예를 들어 코드는 다음과 같습니다.1. 객체에서 사용해야 하는 모든 속성은 이에 따라야 합니다.
2. 함수의 return 문의 의미가 다시 작성되었습니다. 객체가 아닌 것이 반환되면 this가 반환됩니다.
생성자의this
이것의 의미를 알기 위해서는 객체가 생성되는 과정을 분석해야 합니다. 예를 들어 다음 코드는
1. 프로그램이 이 문장을 실행할 때 함수 본문을 실행하지 않으므로 JavaScript 해석기는 이 함수의 내용을 알 수 없습니다.
2. 그런 다음 new 키워드를 실행하여 객체를 만듭니다. 인터프리터는 메모리를 할당하고 객체에 대한 참조를 가져온 다음 새 객체에 대한 참조를 함수에 전달합니다.
3. 그런 다음 함수를 실행하고 전달된 객체 참조를 여기에 전달합니다. 즉, 생성자에서는 new에 의해 방금 생성된 객체입니다.
4. 그런 다음 여기에 멤버를 추가합니다. 즉, 개체에 멤버를 추가합니다.
5. 마지막으로 함수가 종료되고 이를 반환한 후 왼쪽 변수에 전달합니다.
생성자의 실행을 분석한 후 생성자에 있는 이것이 현재 객체라는 것을 알 수 있습니다.
생성자에서return
생성자에서 반환의 의미가 변경되었습니다. 먼저 생성자에서 객체가 반환되면 원래 의미가 유지됩니다. 숫자, 부울 및 문자열과 같은 객체가 아닌 것이 반환되면 반환 문이 없으면 다음 코드도 반환됩니다.
4. 통화 모드 적용
위의 세 가지 호출 모드 외에도 객체로서의 함수에도 사용할 수 있는 적용 메서드와 호출 메서드가 있습니다. 이것이 제가 적용 모드라고 부르는 네 번째 호출 모드입니다.
먼저 적용 모드를 소개합니다. 우선 적용 모드는 함수처럼 사용할 수도 있고 메소드처럼 사용할 수도 있습니다. 먼저 구문을 살펴보겠습니다: 함수 이름.apply(객체, 매개변수 배열);
여기서 구문은 다소 모호하므로 예를 들어 설명하겠습니다.
1. "js1.js"와 "js2.js"라는 두 개의 새로운 js 파일을 만듭니다.
2. 코드 추가
// js2.js 파일
var func2 = function() {
this.name = "Programmer";
};
var o = {};
func2.apply (o);
경고(o.name);
3. 두 개의 코드를 각각 실행하면 첫 번째 파일의 name 속성이 전역 개체 창에 로드된 반면 두 번째 파일의 name 속성은 수신 개체 o에 있는 것을 확인할 수 있습니다. , 하나는 함수 호출과 동일하고 두 번째는 메소드 호출과 동일합니다.
여기의 매개변수는 메소드 자체의 매개변수이지만 배열 형식으로 저장해야 합니다. 예를 들어 코드는
// 메소드 정의
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배 증가합니다. 마우스가 떠나면 높이가 아래에 직접 로드됩니다.