//해당 객체를 생성하기 위한 생성자를 정의합니다. 이는 Java의 생성자 함수와 비교할 수 있습니다. Person(name, age){ //new Person을 호출할 때, 실행 전 코드의 첫 번째 줄에서는 Person 객체를 생성하고 // 메모리에 있는 객체의 인덱스를 this 키워드에 할당합니다. 이때 this 키워드를 통해 새로 생성된 객체에 속성이나 메소드를 추가하는 등의 작업을 수행할 수 있습니다."/> //해당 객체를 생성하기 위한 생성자를 정의합니다. 이는 Java의 생성자 함수와 비교할 수 있습니다. Person(name, age){ //new Person을 호출할 때, 실행 전 코드의 첫 번째 줄에서는 Person 객체를 생성하고 // 메모리에 있는 객체의 인덱스를 this 키워드에 할당합니다. 이때 this 키워드를 통해 새로 생성된 객체에 속성이나 메소드를 추가하는 등의 작업을 수행할 수 있습니다.">

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

생성자 메소드를 사용하여 JavaScript 객체 클래스 인스턴스를 생성하는 방법에 대한 자세한 코드 설명

伊谢尔伦
伊谢尔伦원래의
2017-07-24 15:33:151201검색

생성자 메소드

<script type="text/javascript"> 
//定义一个构造函数,用来生成对应的对象,可以类比Java中的构造函数 
function Person(name, age){ 

//当调用new Person的时候,在执行第一行代码前,先生成一个Person对象,并将对象在内存中的 
//索引赋值给this关键字,此时可以通过this关键字操作新生成的对象,如下面的添加属性或方法 

this.name = name; //this关键字不能少。为当前对象,即this关键字引用的对象的name属性赋值 
//,实际相当于为当前对象添加name属性后,再为其name属性赋值。 
this.age = age; 

this.showName = function(){ //为当前对象添加方法 
alert(this.name); 
} 
this.showAge = function(){ 
alert(this.age); 
} 

//将当前对象返回给赋值符号左边的变量(不必明确使用return) 
} 

var obj1 = new Person("Koji", 22); //生成一个Person对象 
var obj2 = new Person("Luo", 21); 

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

</script>

생성자 메소드는 팩토리 메소드와 동일하며, 각 객체에 대해 전용 함수 객체를 생성합니다. 물론 이러한 함수 개체는 생성자 외부에서 정의할 수도 있으므로 개체와 메서드는 서로 독립적입니다. 프로토타입 방법: 이 방법은 객체의 프로토타입 속성을 사용합니다.

<script type="text/javascript"> 
function Person(){} //定义一个空构造函数,且不能传递参数 

//将所有的属性的方法都赋予prototype属性 

Person.prototype.name = "Koji"; //添加属性 
Person.prototype.age = 22; 

Person.prototype.showName = function(){ //添加方法 
alert(this.name); 
} 

Person.prototype.showAge = function(){ 
alert(this.age); 
} 

var obj1 = new Person(); //生成一个Person对象 
var obj2 = new Person(); 

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

</script>

Person 객체가 생성되면 프로토타입 속성이 새 객체에 할당됩니다. 그런 다음 속성과 메서드가 공유됩니다. 이 메서드의 첫 번째 문제는 생성자가 매개 변수를 전달할 수 없으며 새로 생성된 각 개체에 기본값이 있다는 것입니다. 둘째, 메소드 공유에는 문제가 없으나, 속성이 상태를 변경할 수 있는 객체인 경우 속성 공유에 문제가 있다.

<script type="text/javascript"> 
function Person(){} //定义一个空构造函数,且不能传递参数 

Person.prototype.age = 22; 
Person.prototype.array = new Array("Koji", "Luo"); 

Person.prototype.showAge = function(){ 
alert(this.age); 
} 

Person.prototype.showArray = function(){ 
alert(this.array); 
} 

var obj1 = new Person(); //生成一个Person对象 
var obj2 = new Person(); 

obj1.array.push("Kyo"); //向obj1的array属性添加一个元素 

obj1.showArray(); //Koji,Luo,Kyo 
obj2.showArray(); //Koji,Luo,Kyo 

</script>

위 코드에서 obj1부터 obj1까지의 배열 속성에 요소를 추가하면 obj2의 배열 속성 요소도 영향을 받습니다. 그 이유는 obj1과 obj2 개체의 배열 속성이 동일한 Array 개체를 참조하기 때문입니다. 이 Array 객체를 변경하면 Array 객체를 참조하는 다른 속성이 자연스럽게 영향을 받게 됩니다.


혼합된 생성자/프로토타입 메서드

생성자를 사용하여 객체의 속성을 정의하고, 프로토타입을 사용하여 객체의 메서드를 정의합니다. 속성은 비공개이고 메소드는 공유됩니다.

<script type="text/javascript"> 
function Person(name, age) { 
this.name = name; 
this.age = age; 
this.array = new Array("Koji", "Luo"); 
} 

Person.prototype.showName = function() { 
alert(this.name); 
} 

Person.prototype.showArray = function() { 
alert(this.array); 
} 

var obj1 = new Person("Koji", 22); //生成一个Person对象 
var obj2 = new Person("Luo", 21); 

obj1.array.push("Kyo"); //向obj1的array属性添加一个元素 

obj1.showArray(); //Koji,Luo,Kyo 
obj1.showName(); //Koji 
obj2.showArray(); //Koji,Luo 
obj2.showName(); //Luo 

</script>

속성이 비공개된 후에는 해당 속성을 변경해도 다른 개체에 영향을 미치지 않습니다. 동시에 다양한 객체가 메소드를 공유합니다. 의미상 이는 객체 지향 프로그래밍의 요구 사항을 준수합니다.


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

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