> 웹 프론트엔드 > JS 튜토리얼 > Javascript 생성자에 대한 자세한 설명_기본지식

Javascript 생성자에 대한 자세한 설명_기본지식

WBOY
풀어 주다: 2016-05-16 16:33:07
원래의
1443명이 탐색했습니다.

1. 생성자란

Java, C, PHP와 같은 일부 객체 지향 언어에서는 생성자가 매우 일반적입니다. Javascript에서 생성자는 먼저 new 연산자를 사용하여 호출할 수 있고 특수 유형의 객체를 생성하는 일반 함수입니다.

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

// "Benjamin"은 생성자입니다
var benjamin = new Benjamin("zuojj", "남성");

위의 예에서 benjamin은 Benjamin 객체인데 어떻게 인스턴스화되나요?

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

함수 Benjamin(사용자 이름, 성별) {
This.username = 사용자 이름;
This.sex = 섹스;
}
var benjamin = new Benjamin("zuojj", "남성");
//출력: Benjamin{sex: "male",username: "zuojj"}
console.log(벤자민);

보시다시피 "Benjamin" 생성자는 전달된 매개변수를 수신하여 this 객체에 할당합니다. 이는 new 연산자가 생성자를 호출할 때 생성자의 this 객체에 new 연산에서 반환된 객체가 할당되기 때문입니다.
이는 위의 코드가 다음과 동일함을 의미합니다.

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

벤자민 = {
"사용자 이름": "zuojj",
"섹스": "남성"
}

2. 생성자를 사용하는 이유

생성자를 사용하는 데는 여러 가지 이유가 있습니다.
1. 생성자를 사용한다는 것은 동일한 기본 구조를 사용하여 이러한 모든 객체를 생성할 수 있음을 의미합니다
2. 생성자를 사용한다는 것은 "benjamin" 객체가 명시적으로 "Benjamin" 함수의 인스턴스로 표시된다는 의미입니다.

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

함수 Benjamin(사용자 이름, 성별) {
This.username = 사용자 이름;
This.sex = 섹스;
}
var benjamin = new Benjamin("zuojj", "남성");
var 벤 = {
"사용자 이름": "zuojj",
"섹스": "남성"
}
//출력: true
console.log(벤자민 인스턴스);
//출력: false
console.log(벤자민의 벤 인스턴스);

3. 생성자를 사용한다는 것은 여러 인스턴스에서 공유할 수 있도록 프로토타입에 공개 메서드를 정의할 수 있다는 의미입니다.

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

함수 Benjamin(사용자 이름, 성별) {
This.username = 사용자 이름;
This.sex = 섹스;
}
Benjamin.prototype.getName = function() {
return this.username;
}
var benjamin = new Benjamin("zuojj", "남성");
var ben = new Benjamin("레몬", "여성");
//출력: zuojj
console.log(benjamin.getName());
//출력: 레몬
console.log(ben.getName());

3. 주의사항

1.새로운 키워드
생성자를 인스턴스화할 때 new 키워드를 사용하는 것을 잊지 마십시오. new 키워드를 사용할지 여부는 this 개체에 큰 영향을 미칩니다. new 키워드가 없으면 this 개체는 전역 개체(브라우저의 창 및 전역 개체)를 가리킵니다. 마디). 따라서 생성자를 정의할 때 함수 이름의 첫 글자를 대문자로 표기하는 것이 좋습니다.
2. 호출된 함수에 명시적인 반환 표현식이 없으면 암시적으로 this 개체, 즉 새로 생성된 개체를 반환합니다. 그렇지 않으면 반환된 결과에 영향을 주지만 개체를 ​​반환하는 경우에만

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

함수 바() {
2개 반납;
}
var bar = new Bar();
//새로 생성된 객체를 반환
//출력: Bar {}
console.log(bar);
함수 테스트() {
This.value = 2;
복귀 {
foo: 1
};
}
var test = new Test();
//반환된 객체
//출력: 객체 {foo: 1}
console.log(테스트)

우리가 주목해야 할 점은
a) new Bar()는 숫자 2의 리터럴 값이 아닌 새로 생성된 객체를 반환합니다. 따라서 new Bar().constructor === Bar이지만 숫자 객체가 반환되면 결과가 다릅니다.
b) 여기에서 얻은 새로운 Test()는 아래와 같이 new 키워드를 통해 새로 생성된 객체가 아니라 함수에 의해 반환된 객체입니다.

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

함수 바() {
2개 반납;
}
var bar = new Bar();
함수 BarN() {
새 번호(2)를 반환합니다.
}
var barn = new BarN();
//출력: true
console.log(bar.constructor === Bar);
//출력: 숫자 {}
console.log(헛간);
//출력: false
console.log(barn.constructor === BarN);
//출력: true
console.log(barn.constructor === 숫자);
/*---------------------*/
함수 테스트() {
This.value = 2;
복귀 {
foo: 1
};
}
var test = new Test();
//출력: 정의되지 않음
console.log(test.value);
//출력: 1
console.log(test.foo);

위 내용은 생성자 함수에 대한 요약입니다. 글에 부적절한 내용이 있으면 비판하고 수정하도록 하겠습니다.

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿