자바스크립트 공부노트(6)_자바스크립트 스킬

1. 팩토리 메소드
나만의 이해: 객체의 많은 인스턴스를 생성하려면 이러한 인스턴스는 동일한 속성을 가지지만 속성 값은 다릅니다. 이때 팩토리 함수를 생성해야 합니다.
팩토리 기능: 특정 유형의 객체를 생성하고 반환합니다.
팩토리 함수의 속성이 메소드인 경우 팩토리 함수 외부에서 객체의 메소드를 정의한 다음 속성을 통해 메소드를 가리킬 수 있으므로 매번 자체 속성 메소드를 호출하는 것을 피할 수 있습니다. 이러한 방식으로 각 객체는 모두 동일한 기능을 공유합니다.
예:

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

<스크립트 유형 ="text /javascript">
//팩토리 함수 외부에서 객체를 정의하는 방법
function ShowNameFn() {
alert(this.Name)
}//객체 생성 공장 모드에서
function CreatBOFn(sName, iAge, bSex) {
var BO = new Object()
BO.Name = sName;
BO.Age =
BO. Sex = bSex; BO.ShowName = ShowNameFn; //이 속성은 실제로 함수, 메서드
return BO;
}
//Button 테스트 호출
Function () {
var oPerson1 = CreatBOFn("Zhang San", 18, true); //인스턴스를 생성하는 것은 실제로 메서드를 직접 호출하는 것입니다.
oPerson1.ShowName();
< /script>


요약: 팩토리 함수는 클래스나 객체를 이렇게 정의하고, 인스턴스 생성 시 이 팩토리 함수를 호출합니다.

2. 생성자 방법

첫 번째 단계는 생성자의 이름인 클래스 이름을 선택하는 것입니다. 아래 코드를 보면 BO 이름의 첫 글자가 대문자입니다. 위의 팩토리 함수와 유사하다는 것을 알 수 있습니다. 예:

코드 복사 코드는 다음과 같습니다. //-- --- -두 번째: 생성자 방법--------------------------------

함수 Car(color, Money) {

this.Color = color;
this.Money = 돈;
this.ShowMoney = function() {
alert(this.Money)
}
//버튼 호출 테스트
function NewCarFn() {
var Car1 = new Car("red", "230,000 RMB")
Car1.ShowMoney()
}
/ /------------------------------------------------ - ---------


이전 팩토리 함수 방식과의 차이점 비교:
① 생성자 내부에 객체가 생성되지 않지만 this 키워드를 사용합니다.
② new 연산자를 사용하여 생성자를 호출합니다.

3. 프로토타입 방법

객체의 프로토타입 속성을 이용하면 새로운 객체를 생성하는 프로토타입으로 간주하고, 빈 생성자를 사용하여 클래스 이름을 설정한 후, 속성과 메서드에는 프로토타입 속성이 직접 할당됩니다.
프로토타입 메소드의 문제점: 우선 이 생성자에는 매개변수가 없습니다. 프로토타입 메소드를 사용할 때 생성자에 매개변수를 전달하여 속성의 값을 초기화할 수 없습니다. 객체가 생성된 후에는 속성의 기본값을 변경해야 합니다.
둘째, 속성이 함수가 아닌 객체를 가리키는 경우 객체는 여러 인스턴스에 의해 공유되며, 그 중 하나가 변경되면 다른 객체도 변경됩니다. 예:




코드 복사

코드는 다음과 같습니다. //첫 번째 정의 빈 생성자 function Car() {

}

//속성 및 메서드는 프로토타입 속성에 직접 할당됩니다.
Car.prototype.Color = "Red,"
Car.prototype; .Money = " 200,000";
Car.prototype.Drivers = new Array("작은삼", "작은사");
var Car1 = new Car()
Car1.Drivers.push("小五" ; 🎜>alert(Car1.Drivers);
var Car2 = new Car();
alert(Car2.Drivers); //인스턴스 2에서 객체의 값이 변경되었습니다! 출력 "작은, 작은, 작은 다섯"



4. 생성자/프로토타입 방식 혼합

생성자와 프로토타입 방식을 조합하여 사용하면 생성자와 프로토타입을 함께 사용할 수 있다. 다른 언어와 마찬가지로 메소드를 함께 사용하여 객체를 생성합니다.

생성자는 객체의 모든 비기능적 속성을 정의하고, 프로토타입은 객체의 기능적 속성(메서드)을 정의합니다.
예:


코드 복사

코드는 다음과 같습니다.

function BOStudent(이름,나이) {
this.Name = 이름;
this.Age = 나이
this.Course = new Array("중국어","수학") ;
}
BOStudent.prototype.ShowName = function() {
alert(this.name)
}//디버깅하려면 버튼을 클릭하세요.
function Admixture() {
var stu1 = new BOStudent("Zhang San", 20); //첫 번째 BO 새로 만들기
var stu2 = new BOStudent("Li Si", 22); //두 번째 BO 새로 만들기
stu1.course.push("Physics"); //객체 1에 물리 코스 항목 추가
alert(stu1.course)
alert(stu2.course);


생성자/프로토타입 혼합 접근 방식은 ECMAScript가 채택한 주요 접근 방식으로, 부작용이 없는 다른 접근 방식의 특징을 가지고 있습니다.

5. 동적 프로토타입 방법
대부분의 객체지향 언어에서는 클래스를 정의할 때 속성과 메서드가 함께 패키지됩니다. 위의 하이브리드 생성자/프로토타입 메서드에서는 속성과 메서드가 분리되어 있습니다. 일부 사람들은 생성자 내부에서 속성을 찾고 외부에서 메서드를 찾는 것이 비논리적이라고 생각하므로 동적 프로토타입 메서드가 탄생했습니다.
차이점은 객체에 할당된 메소드의 위치가 다르다는 것입니다. 동적 프로토타입 메서드는 생성자 내부에 있는 반면, 위의 네 번째 메서드는 생성자 외부에 있습니다. 예:

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

function BODynamicPrototype(name , age) {

this.Name = name;
this.Age = age;
this.Course = new Array("111", "222")
//_initialized 플래그가 여부를 결정합니다. 초기화되었습니다. 즉, 프로토타입에 메서드가 할당되었는지 여부에 관계없이 메서드는 한 번만 생성되고 할당됩니다.
if (typeof BODynamicPrototype._initialized == "undefine") {
BODynamicPrototype.prototype.ShowName = function() {
Alert(this.Name);
};
BODynamicPrototype._initialized = true;
}
}

//디버깅하려면 버튼을 클릭하세요.
function DynamicPrototype() {
var stu1 = new BODynamicPrototype("aaa", 20); //새 첫 번째 BO
var stu2 = new BODynamicPrototype("bbb", 22); //새 두 번째 BO
stu1.Course .push("333"); //객체 1에 물리 코스 항목 추가
alert(stu1.course)
alert(stu2.course);


6. 혼합 팩토리 메소드

다른 객체의 새 인스턴스만 반환하는 가짜 생성자를 만드는 것이 목적입니다. 이 접근 방식은 객체 메서드의 내부 관리 측면에서 고전적인 접근 방식과 동일한 문제를 가지고 있습니다. 적극 권장: 꼭 필요한 경우가 아니면 사용을 피하세요!