웹 프론트엔드 JS 튜토리얼 JavaScript는 어떻게 객체를 생성하나요? 객체를 인스턴스화하는 방법

JavaScript는 어떻게 객체를 생성하나요? 객체를 인스턴스화하는 방법

Nov 20, 2018 am 11:24 AM
javascript 객체 생성

이 글의 내용은 js로 객체를 생성하고 인스턴스화하는 세 가지 방법을 누구나 이해할 수 있도록 JavaScript에서 객체를 생성하는 방법을 소개하는 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

구문 측면에서 JavaScript는 유연한 객체 지향 언어입니다. JavaScript가 객체를 생성하고 인스턴스화하는 다양한 방법을 다루기 전에 JavaScript는 클래스 없는 언어이며 함수는 클래스를 시뮬레이션하는 방식으로 사용된다는 점에 유의해야 합니다. [추천 관련 비디오 튜토리얼: JavaScript 튜토리얼]

함수를 클래스로 사용하기:

이것은 JavaScript에서 객체를 생성하고 인스턴스화하는 가장 간단한 방법 중 하나입니다. 우리는 고전적인 JavaScript 함수를 정의하고 new 키워드를 사용하여 함수의 객체를 만든 다음 this 키워드를 사용하여 함수의 속성과 메서드를 만듭니다.

<script> 
    // 作为一个类的功能。
    function copyClass(name, age) { 
        this.name = name; 
        this.age = age; 
        this.printInfo = function() { 
            console.log(this.name); 
            console.log(this.age); 
        } 
    } 
  
// 创建copyClass的对象
// 初始化参数
var obj = new copyClass("Vineet", 20); 
  
//调用copyClass对象的方法
obj.printInfo(); 
</script>
로그인 후 복사

실행 결과:

JavaScript는 어떻게 객체를 생성하나요? 객체를 인스턴스화하는 방법

설명:

클래스에는 특정 매개변수와 소수의 멤버 함수라는 두 가지 주요 구성요소가 있습니다. 이 메소드에서는 name과 age라는 두 개의 매개변수를 사용하는 클래스와 유사한 함수를 선언합니다(이 키워드는 제공된 매개변수의 이름 및 age와 클래스의 이름 및 age를 구별하는 데 사용됩니다). 이 매개변수의 값. 그런 다음 단순히 copyClass 객체 obj를 생성하고 초기화하고 해당 메서드를 호출합니다.

객체 리터럴 사용:

리터럴은 객체를 정의하는 더 작고 간단한 방법입니다.

아래에서는 개체 텍스트를 사용하여 이전 개체와 정확히 동일한 개체를 만들고 인스턴스화합니다.

<script> 
    // 创建对象
    var obj = { 
        name : "", 
        age : "", 
        printInfo : function() { 
            console.log(this.name); 
            console.log(this.age); 
        } 
    } 
  
// 初始化参数
obj.name = "小明"; 
obj.age = 19; 
  
// 使用对象的方法
obj.printInfo(); 
</script>
로그인 후 복사

실행 결과:

JavaScript는 어떻게 객체를 생성하나요? 객체를 인스턴스화하는 방법

설명:

이 방법은 실제로 이전 방법과 동일하게 작동하지만 매개변수(이름 및 나이)와 방법(printInfo)을 바인딩하는 대신 개체 자체에 개체를 초기화하고 간단히 메서드를 사용할 수 있습니다.

싱글톤 함수 사용:

세 번째 방법은 우리가 이미 본 다른 두 가지 방법을 조합한 것입니다. 함수를 사용하여 개별 개체를 정의할 수 있습니다.

<script> 
// 创建单个对象
var obj = new function() { 
        this.name = ""; 
        this.age = ""; 
        this.printInfo = function() { 
            console.log(this.name); 
            console.log(this.age); 
   }; 
} 
  
// 初始化对象
obj.name = "小明"; 
obj.age = 20; 
  
// 对象的调用方法
obj.printInfo(); 
</script>
로그인 후 복사

실행 결과:

JavaScript는 어떻게 객체를 생성하나요? 객체를 인스턴스화하는 방법

설명:

이것은 처음 두 메소드의 조합입니다. 메소드와 매개변수를 함수에 바인딩하지만 별도의 함수를 선언하지는 않습니다(메서드와 마찬가지로). )에 1개의 copyClass가 있습니다. 대신 함수 구조를 사용하여 객체를 선언하기만 하면 됩니다.

요약: 위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

위 내용은 JavaScript는 어떻게 객체를 생성하나요? 객체를 인스턴스화하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

ActiveX 컴포넌트가 객체를 생성할 수 없는 문제를 해결하는 방법 ActiveX 컴포넌트가 객체를 생성할 수 없는 문제를 해결하는 방법 Jan 24, 2024 pm 02:48 PM

ActiveX 컴포넌트가 객체를 생성할 수 없는 문제를 해결하는 방법

WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 Dec 17, 2023 pm 02:54 PM

WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법

WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 Dec 17, 2023 pm 05:30 PM

WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술

WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법 WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법 Dec 17, 2023 am 09:39 AM

WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법

JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법 JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법 Dec 17, 2023 pm 12:09 PM

JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법

간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법 간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법 Jan 05, 2024 pm 06:08 PM

간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법

JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축 JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축 Dec 17, 2023 pm 05:13 PM

JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축

자바스크립트에서 insertBefore를 사용하는 방법 자바스크립트에서 insertBefore를 사용하는 방법 Nov 24, 2023 am 11:56 AM

자바스크립트에서 insertBefore를 사용하는 방법

See all articles