지난 기사에서 javascript 객체지향 기본을 소개했습니다. 이 기사에서는 javascript 객체지향에 대해 계속해서 자세히 알아봅니다. JS의 구문은 매우 유연합니다. 간단한 객체 생성을 위해. 이러한 지나치게 유연한 위치는 때때로 혼란스럽기 때문에 오늘은 JS에서 객체를 생성하는 데 일반적으로 사용되는 몇 가지 방법을 정리하겠습니다.
머리말
객체 생성자를 사용하거나 객체 리터럴을 사용하면 객체를 생성하는 데 매우 편리할 수 있지만 이 방법에는 분명한 단점이 있습니다. 인터페이스를 사용하여 여러 객체를 생성하면 중복되는 코드가 많이 생성됩니다. 따라서 이 문제를 해결하기 위해 사람들은 공통 객체에 다음과 같은 방법을 사용하기 시작했습니다.
공장 모드
이 패턴은 객체를 생성하는 특정 프로세스를 추상화하고 함수를 사용하여 특정 인터페이스로 객체의 세부 사항을 생성합니다
function cPerson(name,sex,age){ var o = new Object(); o.name = name; o.sex = sex; o.age = age; o.show = function(){ console.log(this.name,this.age,this.sex); } return o; } var p1 = cPerson('谦龙','男','100'); p1.show(); var p2 = cPerson('雏田','女','14'); p2.show();
공장 모드 테스트
팩토리 메소드의 문제점: 팩토리 모드를 사용하면 모든 정보를 포함하는 객체를 생성할 수 있으며 이 함수는 수없이 호출될 수 있습니다. 유사한 객체를 여러 개 생성하는 문제는 해결되지만 객체 인식 문제(즉, 객체의 유형을 아는 방법)는 해결되지 않습니다
생성자 패턴
function CPerson(name,sex,age) {//注意这里 构造函数首字母大写 this.name = name; this.sex = sex; this.age = age; this.show = function () { console.log(this.name, this.age, this.sex); } } var p1 = new CPerson('谦龙','男','100'); p1.show(); var p2 = new CPerson('雏田','女','14'); p2.show();
생성자 패턴 테스트
다음과 같이 생성자가 팩토리 패턴과 약간 다르다는 점에 유의하세요
생성자의 첫 글자는 대문자로 표기
명시적으로 생성된 개체가 없습니다
이 개체에 속성과 메서드 할당
반품문의 불가
이러한 방식으로 생성자를 호출하면 대략 여러 단계를 거칩니다.
새 개체 만들기
이 객체에 생성자의 범위를 할당합니다(그래서 이것이 이 객체를 가리킵니다).
생성자에서 코드를 실행합니다(즉, 새 개체에 속성과 메서드를 추가하는 과정)
반품 대상
참고: 생성자는 실제로 일반 함수와 크게 다르지 않습니다. 유일한 차이점은 호출 방법에 있습니다. 다음은 다양한 호출 방법을 보여줍니다
// 调用方式1 new 方式 var p1 = new CPerson('谦龙','男','100'); p1.show();//谦龙 100 男 // 调用方式2 普通函数调用 CPerson('谦龙','男','100'); window.show()//谦龙 100 男 注意属性和方法会被设置到window对象上 // 调用方式3 在另一个对象的作用域中调用 var obj = new Object(); CPerson.call(obj,'谦龙','男','100'); obj.show(); //谦龙 100 男 在obj的作用域
생성자 문제: 생성자 사용의 주요 문제는 각 메서드를 각 인스턴스에서 다시 생성해야 한다는 것입니다. p1과 p2 모두 표시 메서드가 있지만 함수가 안에 있기 때문에 동일한 함수의 인스턴스가 아닙니다. js의 객체 따라서 공유된 표시 방법은 동일하지 않습니다.
프로토타입 모드
각 함수에는 객체를 가리키는 포인터인 프로토타입 속성이 있습니다. 이 객체의 목적은 특정 유형의 모든 인스턴스에서 공유할 수 있는 속성과 메서드를 포함하는 것입니다. 즉, 생성자를 호출하여 생성된 객체의 프로토타입 객체
장점은 객체의 모든 인스턴스가 해당 속성 메서드를 공유할 수 있다는 것입니다. 즉, 생성자에서 인스턴스 정보를 정의할 필요가 없습니다
function CPerson(){ } CPerson.prototype.name='谦龙'; CPerson.prototype.sex='男'; CPerson.prototype.age=100; CPerson.prototype.show=function(){ console.log(this.name, this.age, this.sex); } var p1 = new CPerson(); p1.show(); //谦龙 100 男 var p2 = new CPerson(); p2.show();//谦龙 100 男 console.log(p1.show == p2.show)//true
위 내용은 js 객체지향(팩토리 모드, 생성자 모드, 프로토타입 모드)에서 객체를 생성하는 몇 가지 일반적인 방법에 대한 내용입니다. 마음에 드셨으면 좋겠습니다.