Javascript_javascript 팁에서 사용자 정의 개체를 생성하는 방법 요약

Javascript로 객체를 생성하는 방법에는 여러 가지가 있습니다.

객체 생성자/객체 리터럴:

디자인 패턴을 제외하고 가장 기본적인 방법은 먼저 개체 생성자를 호출하여 개체를 만든 다음 개체에 속성을 추가하는 것입니다.

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

var 학생 = 새 객체();
학생.이름 = "샤오밍";
학생.나이 = 20;
Student.getName = 함수 () {
경고(this.name);
}

JavaScript 객체 리터럴에 익숙한 학생은 더 간결해 보이는 더 나은 작성 방법으로 변경할 수 있습니다.

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

var 학생 = {
         이름: "샤오홍",
나이: 18세,
          getName: 함수 () {
경고(this.name);
}
};

단점: 위 방법의 단점은 동일한 인터페이스를 사용하여 유사한 객체를 많이 생성할 때 대량의 중복 코드가 생성된다는 것입니다. 이는 이해하기 쉬울 것입니다. 함수(메서드 또는 클래스)는 일반적으로 공용 메서드를 생성하는 데 사용됩니다. 위의 객체 생성 프로세스에는 함수의 그림자가 전혀 없으므로 재사용이 없습니다.

공장 모드:

팩토리 패턴은 객체를 생성하는 구체적인 프로세스를 추상화합니다. 블랙박스와 마찬가지로 함수를 호출하고(공장에 들어가서) 해당 매개변수(각종 원자재)를 전달하면 해당 객체(공장에서 생산한 제품)가 나옵니다. 팩토리 패턴은 유사한 객체를 여러 개 생성하는 문제를 해결합니다.

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

함수 StudentFactory(이름,나이) {
        var Student = new Object();
             학생.이름 = 이름;
            학생.나이 = 나이;
            Student.sayName = 함수 () {
경고(this.name);
         }
          복학생;
}
var p1 = StudentFactory("ming", 20);
var p2 = StudentFactory("홍", 18);

단점: 팩토리 패턴에도 단점이 있습니다. 가장 큰 단점은 객체 유형 인식 문제입니다. 객체가 Object 유형(p1 인스턴스of Object)인지 확인할 수만 있고, 구체적으로 어떤 유형인지 확인할 수는 없습니다. 팩토리 패턴을 사용하여 생성된 학생들은 실제로 유사한 속성과 방법을 가지지만 다른 값을 갖습니다. 현재 더 나은 해결책은 모든 개체가 Student 유형에 속하도록 Student 함수를 만드는 것입니다. 따라서 팩토리 패턴이 나쁜 것이 아니라 생성자 패턴이 더 낫다는 것입니다.

사용자 정의 유형 생성자:

생성자를 사용하여 특정 유형의 개체를 만들 수 있습니다.

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

기능 학생(이름,나이) {
This.name = 이름;
이.나이=나이;
This.sayName = 함수 () {
경고(this.name);
         }
}
var p3 = 신입생("ming", 20);
var p4 = new Student("홍", 18);
경고(학생의 p3 인스턴스)
경고(p3.sayName==p4.sayName); //false

단점: 사용자 정의 생성자의 단점은 각 객체가 자체 메서드를 다시 생성한다는 것입니다. 실제로 이러한 메서드의 기능은 동일하지만(sayName과 같이) 동일하지 않습니다(p3.sayName 및 p4.sayName). 같지 않음).

프로토타입 모드:

빈 함수를 정의한 다음 모든 속성과 메서드를 프로토타입에 추가하여 모든 개체가 이러한 속성과 메서드를 공유하도록 합니다.

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

함수 Student() {};
Student.prototype.name = "밍";
Student.prototype.age = 20;
Student.prototype.friends = ['qi'];
Student.prototype.sayName = 함수 () {
경고(this.name);
};

단점: 일부 속성은 공유할 수 없으며 공유하면 친구와 같은 문제가 발생합니다. 각 반 친구의 대부분의 친구는 다릅니다.

생성자와 프로토타입의 조합:

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

기능 학생(이름, 나이, 친구) {
This.name = 이름;
이.나이=나이;
This.friends = 친구;
}
Student.prototype = {
         생성자: 학생,
            sayName: 함수 () {
경고(this.name);
         }
};

요약: 생성자와 프로토타입의 조합은 사용자 정의 유형을 생성하는 데 널리 알려진 방법입니다. 위의 방법들 중에서 가장 좋은 방법이기도 합니다.

/************************************************** ************************************************** ***********/

사실 위의 개체를 생성하는 방법은 여러 가지가 있지만 지속적인 최적화가 필요한 몇 가지 특수한 시나리오가 여전히 있을 수 있습니다.

동적 프로토타입 모드:

생성자와 프로토타입의 조합을 최적화한 것입니다. 이러한 공유 속성 및 메서드의 경우 초기화되면 효율성을 높이기 위해 다시 초기화할 필요가 없습니다.

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

        기능 학생(이름, 나이) {
This.name = 이름;
이.나이=나이;
If ((typeof this.sayName) != "함수") {
                  Student.prototype.sayName = 함수 () {
경고(this.name);
                }
           }
}
      var stu = new Person("ming", 20);
//경고(stu 인스턴스of Student);
stu.sayName();
　　 var stuNew = new Person("홍", 18);
//alert(stuNew 인스턴스of Student);
　　　stuNew.sayName();

여러 학생 객체를 생성할 때 sayName 메소드는 한 번만 초기화됩니다.

마지막으로 객체를 생성하는 매우 유용한 방법이 있는데, 이는 안전한 생성자입니다.

확실한 생성자 패턴:

이 모드에서는 this 및 new 사용이 금지되며 모든 객체에는 공개 속성이 없습니다. 변수의 값은 읽을 수만 있고 수정할 수는 없습니다.

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

////확실한 생성자 패턴
함수 학생(이름, 나이) {
        var o = new Object();
             o.sayName = 함수 () {
경고(이름);
          }
          반품 오;
}
var stu = 학생("ming", 21);
stu.sayName();

위 내용은 Javascript에서 사용자 정의 개체를 생성하는 몇 가지 일반적인 방법을 요약한 것입니다. 더 나은 아이디어가 있으면 저에게 연락해 주세요. 이 기사는 지속적으로 업데이트될 예정입니다.