지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 자바스크립트에서 객체를 생성하는 방법은 무엇입니까?

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

青灯夜游
풀어 주다： 2023-01-06 11:17:37
원래의
13992명이 탐색했습니다.

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

관련 라벨：
javascript 对象
원천：php.cn
이전 기사：360에서 자바스크립트를 활성화하는 방법 다음 기사：자바스크립트에는 여러 개의 대화 상자가 있습니다
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
JavaScript를 사용하지 않고 클릭 시 이미지 소스를 동적으로 수정하는 CSS 전용 방법 img:active와 같은 CSS만 사용하여 마우스 클릭 시 이미지의 소스를 변경해야 합니다.{}
에서 2024-04-06 19:25:49
0
1
505
d3.js를 확대할 때 산점도 값이 유지되지 않습니다. d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...
에서 2024-04-06 18:16:26
0
1
403
공급업체별 의사 요소에 대한 JavaScript 호버 이벤트 나는 아래에 HTMLinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',fun...
에서 2024-04-06 15:35:24
0
1
274
Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...
에서 2024-04-06 14:54:03
0
2
421
CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요. 클래스 Collapseshow를 사용하여 패널의 카드 제목 스타일을 지정하고 싶습니다. 이 예에서는 첫 번째 패널입니다. CSS를 사용하여 .accordion.c...
에서 2024-04-06 12:53:11
0
1
376
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿