자바스크립트에서 객체를 생성하는 방법은 무엇입니까?

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!