자바스크립트에서 객체를 생성하는 방법은 무엇입니까?
- 青灯夜游원래의
- 2021-06-17 13:56:0113979검색
JavaScript에서 개체를 만드는 방법: 1. new 키워드를 사용하여 생성자를 호출하여 개체를 만듭니다. 2. 팩토리 메서드를 사용하여 개체를 만듭니다. 3. 생성자 메서드를 사용하여 개체를 만듭니다. 5. 혼합을 사용하여 생성자/프로토타입 방법을 사용하여 객체를 만듭니다. 6. 동적 프로토타입 방법을 사용하여 객체를 만듭니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.
JavaScript의 문법적 특징을 활용하여 클래스라는 개념으로 객체를 생성할 수 있습니다.
방법 1: 기존 방법 - new 키워드를 사용하여 생성자를 호출하여 개체를 만듭니다.
코드는 다음과 같습니다.
<script>
var obj = new Object();
obj.name = "Kitty";//为对象增加属性
obj.age = 21;
obj.showName = function () {//为对象添加方法
console.log(this.name);
};
obj.showAge = function(){
console.log(this.age);
};
obj.showName();
obj.showAge();
</script>이 방법은 개체를 생성합니다. new 키워드를 입력하고, 동적언어인 자바스크립트의 특성에 맞게 속성과 메소드를 추가하고 객체를 구성합니다. this는 메소드가 호출되는 객체를 나타냅니다.
이 방법의 문제점은 객체를 여러 번 생성해야 하는 경우 코드를 여러 번 반복해야 하므로 코드 재사용에 도움이 되지 않는다는 것입니다.
방법 2: 팩토리 메소드
코드는 다음과 같습니다.
<script>
function createObj(){
var obj = new Object();//创建对象
obj.name = "Kitty";
obj.age = "21";
obj.showName = function () {
console.log(this.name);
};
obj.showAge = function () {
console.log(this.age);
};
return obj;
}
var obj1 = createObj();
var obj2 = createObj();
obj1.showName();
obj1.showAge();
obj2.showName();
obj2.showAge();
</script>이 방법도 객체 생성을 구현하지만 유사하게 객체를 여러 개 생성해야 하는 경우 횟수 및 속성 내용이 다른 경우 코드를 여러 번 반복해야 합니다. 코드 재사용률을 재고해야 하며, 그런 다음 코드를 수정하여 코드 재사용률을 높이고, 팩토리 메서드를 변경하여 매개변수 할당을 전달할 수 있습니다.
개선된 코드는 다음과 같습니다.
<script>
function createObj(name,age){
var obj = new Object();
obj.name = name;
obj.age = age;
obj.showName = function () {
console.log(this.name);
};
obj.showAge = function(){
console.log(this.age);
};
return obj;
}
var obj1 = new createObj("Kitty","21");
var obj2 = new createObj("Luo","22");
obj1.showName();//Kitty
obj1.showAge();//21
obj2.showName();//luo
obj2.showAge();//22
</script>이 방법은 코드의 재사용률을 높일 수는 있지만 객체지향에서의 클래스 개념에 비하면 큰 결함이 있습니다. 객체지향에서는 객체의 속성은 비공개이지만 객체의 메소드는 공유된다는 점을 강조합니다. 위의 팩토리 메소드는 객체를 생성할 때 각 객체에 대해 고유한 전용 메소드를 생성해야 합니다. 동시에 각 객체에 대해 논리적으로 동일한 메소드가 생성되므로 메모리 낭비입니다.
개선된 코드는 다음과 같습니다.
<script>
function createObj(name,age){
var obj = new Object();
obj.name = name;
obj.age = age;
obj.showName = showName;
obj.showAge = showAge;
return obj;
}
function showName(){
console.log(this.name);
}
function showAge(){
console.log(this.age);
}
var obj1 = new createObj("Kitty","21");
var obj2 = new createObj("Luo","22");
obj1.showName();//Kitty
obj1.showAge();//21
obj2.showName();//luo
obj2.showAge();//22
</script>위는 여러 함수 객체를 정의하여 함수 객체를 보유하는 다양한 객체의 개인 문제를 해결합니다. 이제 모든 객체 메소드는 위의 두 함수에 대한 참조를 보유합니다. 그러나 이런 방식으로 객체의 기능과 객체는 서로 독립적이며, 이는 특정 메소드가 특정 클래스에 속한다는 객체지향적 사고와 일치하지 않습니다.
방법 3: 생성자 메서드
코드는 다음과 같습니다.
<script>
function Person(name,age){
this.name = name;
this.age = age;
this.showName = function () {
console.log(this.name);
};
this.showAge = function () {
console.log(this.age);
};
}
var obj1 = new Person("Kitty","21");
var obj2 = new Person("Luo","22");
obj1.showName();//Kitty
obj1.showAge();//21
obj2.showName();//luo
obj2.showAge();//22
</script>생성자 메서드는 팩토리 메서드와 동일하며 전용 함수 객체를 생성합니다. 각 개체. 물론 이러한 함수 개체는 생성자 외부에서 정의할 수도 있으므로 개체와 메서드는 서로 독립적입니다.
생성자를 사용할 때 가장 큰 문제는 모든 속성이 각 인스턴스에 대해 한 번 생성된다는 것입니다. 이는 숫자 속성에는 허용되지만 함수 메서드의 각 인스턴스를 만들어야 하는 경우에는 무리입니다.
Person()의 새 인스턴스를 만들려면 new 연산자를 사용해야 합니다. 이런 방식으로 생성자를 호출하는 것은 실제로 다음 네 단계를 거칩니다.
- 创建一个新对象；
- 将构造函数的作用域赋给新对象（因此this就指向了这个新对象）；
- 执行构造函数中的代码（为这个新对象添加属性）；
- 返回新对象。
方法四：原型方法
代码如下：
<script>
function Person(){} //定义一个空构造函数，且不能传递参数
//将所有的属性的方法都赋予prototype
Person.prototype.name = "Kitty";
Person.prototype.age = 21;
Person.prototype.showName = function (){
console.log(this.name);
};
Person.prototype.showAge = function (){
console.log(this.age);
};
var obj1 = new Person("Kitty","21");
var obj2 = new Person("Luo","22");
obj1.showName();//Kitty
obj1.showAge();//21
obj2.showName();//luo
obj2.showAge();//22
</script>当生成Person对象时，prototype的属性都赋给了新的对象。那么属性和方法是共享的。首先，该方法的问题是构造函数不能传递参数，每个新生成的对象都有默认值。其次，方法共享没有任何问题，但是，当属性是可改变状态的对象时，属性共享就有问题。
修改代码如下：
<script>
function Person(){} //定义一个空构造函数，且不能传递参数
//将所有的属性的方法都赋予prototype
Person.prototype.age = 21;
Person.prototype.array = new Array("Kitty","luo");
Person.prototype.showAge = function (){
console.log(this.age);
};
Person.prototype.showArray = function (){
console.log(this.array);
};
var obj1 = new Person();
var obj2 = new Person();
obj1.array.push("Wendy");//向obj1的array属性添加一个元素
obj1.showArray();//Kitty,luo,Wendy
obj2.showArray();//Kitty,luo,Wendy
</script>上面的代码通过obj1的属性array添加元素时，obj2的array属性的元素也跟着受到影响，原因就在于obj1和obj2对象的array属性引用的是同一个Array对象，那么改变这个Array对象，另一引用该Array对象的属性自然也会受到影响，混合的构造函数/原型方式使用构造函数定义对象的属性，使用原型方法定义对象的方法，这样就可以做到属性私有，而方法共享。
方法五：混合的构造函数/原型方式
代码如下：
<script>
function Person(name,age){
this.name = name;
this.age = age;
this.array = new Array("Kitty","luo");
}
Person.prototype.showName = function (){
console.log(this.name);
};
Person.prototype.showArray = function (){
console.log(this.array);
};
var obj1 = new Person("Kitty",21);
var obj2 = new Person("luo",22);
obj1.array.push("Wendy");//向obj1的array属性添加一个元素
obj1.showArray();//Kitty,luo,Wendy
obj1.showName();//Kitty
obj2.showArray();//Kitty,luo
obj2.showName();//luo
</script>属性私有后，改变各自的属性不会影响别的对象。同时，方法也是由各个对象共享的。在语义上，这符合了面向对象编程的要求。
方法六：动态原型方法
代码如下：
<script>
function Person(name,age){
this.name = name;
this.age = age;
this.array = new Array("Kitty","luo");
//如果Person对象中_initialized 为undefined，表明还没有为Person的原型添加方法
if(typeof Person._initialized == "undefined"){
Person.prototype.showName = function () {
console.log(this.name);
};
Person.prototype.showArray = function () {
console.log(this.array);
};
Person._initialized = true;
}
}
var obj1 = new Person("Kitty",21);
var obj2 = new Person("luo",22);
obj1.array.push("Wendy");//向obj1的array属性添加一个元素
obj1.showArray();//Kitty,luo,Wendy
obj1.showName();//Kitty
obj2.showArray();//Kitty,luo
obj2.showName();//luo
</script>这种方法和构造函数/原型方式大同小异。只是将方法的添加放到了构造函数之中，同时在构造函数Person上添加了一个属性用来保证if语句只能成功执行一次，在实际应用中，采用最广泛的构造函数/原型方法。动态原型方法也很流行，它在功能上和构造函数/原型方法是等价的。不要单独使用构造函数和原型方法。
更多编程相关知识，请访问：编程视频！！
위 내용은 자바스크립트에서 객체를 생성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!