var obj = new Object(); obj.name = "Koji"; //객체에 속성 추가 obj.age = 21; / 객체에 메소드 추가"/> var obj = new Object(); obj.name = "Koji"; //객체에 속성 추가 obj.age = 21; / 객체에 메소드 추가">

 >  기사  >  웹 프론트엔드  >  기본 메소드 및 팩토리 메소드를 사용하여 JavaScript 객체 인스턴스를 생성하는 방법에 대한 자세한 코드 설명

기본 메소드 및 팩토리 메소드를 사용하여 JavaScript 객체 인스턴스를 생성하는 방법에 대한 자세한 코드 설명

伊谢尔伦
伊谢尔伦원래의
2017-07-24 15:28:051247검색

JS에는 클래스라는 개념이 없지만, JS의 문법적 특징을 활용하여 클래스라는 개념을 가지고 객체를 생성할 수 있습니다.

원래 방법

<script type="text/javascript"> 
var obj = new Object(); 
obj.name = "Koji"; //为对象添加属性 
obj.age = 21; 
obj.showName = function(){ //为对象添加方法 
alert(this.name); 
} 
obj.showAge = function(){ 
alert(this.age); 
} 

obj.showName(); //Koji 
obj.showAge(); //21 

</script>

위 방법은 new 키워드를 통해 객체를 생성한 후, JS의 특성에 맞는 속성과 메소드를 동적 언어로 추가하여 객체를 구성하는 방법입니다. 메소드를 호출하는 객체입니다. 이 접근 방식의 문제점은 객체를 여러 번 생성해야 하는 경우 코드를 여러 번 반복해야 하므로 코드 재사용에 도움이 되지 않는다는 것입니다.

팩토리 메소드

<script type="text/javascript"> 
function createObj(){ 
var obj = new Object(); //创建对象 

obj.name = "Koji"; 
obj.age = 21; 
obj.showName = function(){ 
alert(this.name); 
} 
obj.showAge = function(){ 
alert(this.age); 
} 

return obj; //返回对象 
} 

var obj1 = createObj(); 
var obj2 = createObj(); 

obj1.showName(); //Koji 
obj2.showAge(); //21 

</script>

이 방법은 코드 재사용률을 향상시키며, 팩토리 메소드를 변경하고 매개변수 값을 전달할 수도 있습니다.

<script type="text/javascript"> 
function createObj(name, age){ //构造对象时可以传入初始化参数 
var obj = new Object(); //创建对象 

obj.name = name; 
obj.age = age; 
obj.showName = function(){ 
alert(this.name); 
} 
obj.showAge = function(){ 
alert(this.age); 
} 

return obj; //返回对象 
} 

var obj1 = createObj("Koji", 22); 
var obj2 = createObj("Luo", 21); 

obj1.showName(); //Koji 
obj1.showAge(); //22 
obj2.showName(); //Luo 
obj2.showAge(); //21 

</script>

위의 방법은 코드 재사용률을 향상시킬 수 있지만 객체지향의 클래스 개념에 비해 큰 결함이 있습니다. 객체지향에서는 객체의 속성은 비공개이고 객체의 메소드는 공유된다는 점을 강조합니다. 위의 팩토리 메소드는 객체를 생성할 때 각 객체에 대해 고유한 전용 메소드를 생성해야 합니다. 동시에 각 객체에 대해 논리적으로 동일한 메서드를 생성하면 메모리가 낭비됩니다. 개선 사항은 다음과 같습니다.

<span style="font-size:14px;">
<script type="text/javascript"> 

function createObj(name, age){ 
var obj = new Object(); //创建对象 

obj.name = name; 
obj.age = age; 
obj.showName = showName; 
obj.showAge = showAge; 

return obj; //返回对象 
} 

function showName(){ //函数也是一个对象 
alert(this.name); 
} 

function showAge(){ 
alert(this.age); 
} 

var obj1 = createObj("Koji", 22); 
var obj2 = createObj("Luo", 21); 

obj1.showName(); //Koji 
obj1.showAge(); //22 
obj2.showName(); //Luo 
obj2.showAge(); //21 

</script></span>

위에서는 두 개의 함수 개체를 정의하여 함수 개체를 보유하는 서로 다른 개체의 개인 문제를 해결합니다. 이제 모든 객체 메소드는 위의 두 함수에 대한 참조를 보유합니다.

위 내용은 기본 메소드 및 팩토리 메소드를 사용하여 JavaScript 객체 인스턴스를 생성하는 방법에 대한 자세한 코드 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.