> 웹 프론트엔드 > JS 튜토리얼 > 자바스크립트 학습 노트 - 함수(5): 생성자_기본 지식

자바스크립트 학습 노트 - 함수(5): 생성자_기본 지식

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

Javascript의 생성자도 다른 언어와 다릅니다. new 키워드로 호출된 모든 함수는 생성자로 사용될 수 있습니다.
생성자 본문 내에서 이는 새로 생성된 개체를 가리킵니다. 생성자 본문에 반환 표현식이 표시되지 않으면 기본적으로 새로 생성된 객체인 이를 반환합니다.

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

함수 Foo() {
This.bla = 1;
}
Foo.prototype.test = function() {
console.log(this.bla);
};
var test = new Foo();

위 코드는 Foo를 생성자로 호출하고 새 개체의 프로토타입(__proto__)을 Foo.prototype으로 지정합니다.
생성자 내에서 반환 식을 정의하면 생성자는 전체 식을 반환하지만 이 반환 식은 개체여야 합니다.

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

함수 바() {
2개 반납;
}
new Bar(); // 새로운 객체
함수 테스트() {
This.value = 2;
복귀 {
foo: 1
};
}
new Test(); // 반환된 객체

new가 생략되면 함수는 새 객체를 반환할 수 없습니다.

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

함수 Foo() {
This.bla = 1; // 전역 객체에 설정됩니다
}
푸(); // 정의되지 않음

위의 예는 일부 시나리오에서도 작동할 수 있지만 Javascript의 작동 메커니즘으로 인해 전역 개체를 가리킵니다.

공장 모드

new 키워드 없이 작업을 수행하려면 생성자가 명시적으로 값을 반환해야 합니다.

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

함수 바() {
변수 값 = 1;
복귀 {
메소드: function() {
             반환 값;
}
}
}
Bar.prototype = {
foo: 함수() {}
};
새로운 바();
바();

위의 예에서 new를 사용하지 않고 Bar 함수를 호출하는 효과는 동일합니다. 메소드가 포함된 새로 생성된 객체가 반환됩니다. 이는 실제로 클로저입니다.
여기서 주목해야 할 점은 new Bar()가 Bar.prototype을 반환하지 않고 반환 표현식 내에서 함수 메서드의 프로토타입 객체를 반환한다는 것입니다.
위의 예에서는 new를 사용하는 것과 사용하지 않는 것 사이에 기능적 차이가 없습니다.

팩토리 패턴을 통해 새로운 객체 생성

new를 사용하지 않으면 오류가 발생할 수 있으므로 new를 사용하지 말라고 종종 상기시킵니다.
객체를 생성하려면 팩토리 패턴을 사용하고 팩토리 패턴 내에 새 객체를 생성하는 것을 선호합니다.

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

함수 Foo() {
var obj = {};
Obj.value = 'blub';

var private = 2;
Obj.someMethod = 함수(값) {
This.value = 값;
}

obj.getPrivate = function() {
         비공개로 반품;
}
객체 반환;
}

위 코드는 new를 사용하는 것보다 오류가 덜 발생하고 개인 변수를 사용할 때 더 편리하지만 몇 가지 단점도 있습니다.

프로토타입 객체는 공유할 수 없기 때문에 더 많은 메모리가 필요합니다.
상속을 구현하려면 팩토리 패턴에서 다른 객체의 모든 메서드를 복사하거나 이를 새 객체의 프로토타입으로 사용해야 합니다.
new를 사용하지 않기 위해 프로토타입 체인을 버리는 것은 Javascript 언어의 정신에 어긋나는 것 같습니다.

요약

new를 사용하면 오류가 발생할 가능성이 더 높지만 이것이 프로토타입 체인 사용을 포기할 이유는 아닙니다. 최종 접근 방식은 애플리케이션의 요구 사항에 따라 다릅니다. 가장 좋은 방법은 스타일을 선택하고 고수하는 것입니다.

간단히 말하면 생성자는 인스턴스 객체를 초기화하고, 객체의 프로토타입 속성은 인스턴스 객체를 상속합니다.

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