> 웹 프론트엔드 > JS 튜토리얼 > JavaScript 객체란 무엇입니까? 객체 코드 생성 방법에 대한 자세한 설명

JavaScript 객체란 무엇입니까? 객체 코드 생성 방법에 대한 자세한 설명

伊谢尔伦
풀어 주다: 2017-07-24 15:36:36
원래의
1371명이 탐색했습니다.

객체란 무엇인가요? JavaScript 정의에 따르면 객체는 순서가 지정되지 않은 속성의 모음이며 해당 속성에는 기본 값, 객체 또는 함수가 포함될 수 있습니다. 즉, 객체는 특정 순서가 없는 속성 집합입니다. 각 속성은 키-값 쌍 집합인 값에 매핑됩니다. 값은 데이터일 수도 있고 객체일 수도 있습니다.

가장 간단한 개체

JavaScript의 중괄호 {} 쌍으로 개체를 정의할 수 있습니다. 이 작성 방식은 실제로 Object의 생성자를 호출하는 것과 동일합니다.

var obj={};
var obj2=new Object();
로그인 후 복사

이러한 방식으로 구성된 개체에는 프로토타입에 대한 포인터만 포함됩니다. Object 의 경우 실제 효과가 거의 없는 일부 valueOf, hasQwnProperty 및 기타 메서드를 사용할 수 있습니다. 사용자 정의 개체에는 항상 일부 사용자 정의 속성과 메서드가 있습니다.

var obj={};
            obj.a=0;
            obj.fn=function(){
                alert(this);
            }
            var obj2={
                a:0,
                fn:function(){
                    alert(this);
                }
            }
로그인 후 복사

객체를 정의한 후 "."를 통해 속성과 메소드를 추가할 수도 있고, 객체 정의 시 리터럴 할당 방식을 사용하여 속성과 메소드를 추가할 수도 있습니다. 클래스의 정적 변수 및 정적 함수와 유사하게 객체 참조를 사용하여 객체를 생성하는 데에는 명백한 결함이 있습니다. 많은 수의 객체를 정의하는 것은 매우 힘들고 거의 반복적인 코드를 계속해서 작성해야 합니다. 다시.

함수가 다시 등장할 때입니다. JavaScript에서 함수는 객체입니다. 객체를 생성할 때 위의 createObj 메서드를 버리고 함수를 직접 객체로 사용할 수 있습니다. 이것은 함수의 특수성에 달려 있습니다. 객체로.

1. 함수는 매개변수를 허용할 수 있으며 매개변수를 기반으로 동일한 유형 및 다른 값의 객체를 생성할 수 있습니다.

2. 함수가 생성자로 사용되면(new 연산자를 통해 호출됨) 반환됩니다. 가난한 중산층 농민 버전의 jQuery에서 언급한 객체 생성자에 대한 기본 지식을 얻은 후 간단히 복사하세요.

생성자의 반환 값은 함수에 반환 문이 없거나 기본을 반환하는 경우 두 가지 상황으로 나뉩니다. 유형(bool, int, string, undefined, null)인 경우 new로 생성된 익명 객체는 함수 인스턴스입니다. 참조 유형 객체(Array, Function, Object 등)가 함수 본문에 반환되면 객체입니다. new에 의해 생성된 익명 개체를 반환 값으로 덮어씁니다.

3. 그러면 유형 식별 문제를 해결하기 위해 함수를 사용하는 방법은 무엇입니까? instanceof 연산자는 개체가 XXX의 인스턴스인지 확인하는 데 사용됩니다.

코드는 다음과 같습니다.

function Person(name){
                this.name=name;
                this.fn=function(){
                    alert(this.name);
                }
            }
            var person1=new Person('Byron');
            console.log(person1.constructor==Person);//true
            console.log(person1 instanceof Person); //true
로그인 후 복사
이거면 완벽할텐데, 아니! 생성자는 개체마다 다를 수 있지만 메서드는 개체의 모든 인스턴스에서 반복되어야 합니다.
function Person(name){
                this.name=name;
                this.fn=function(){
                    alert(this.name);
                }
            }
            var person1=new Person('Byron');
            var person2=new Person('Frank');
            console.log(person1.fn==person2.fn);//false
로그인 후 복사

보세요, 비록 두 인스턴스의 fn이 정확히 동일하더라도, 같은 것은 아닙니다. 함수 객체에 수천 개의 메소드가 있다면, 각 인스턴스는 이러한 메소드의 복사본을 포함해야 하는데, 이는 매우 실망스럽습니다. 기억은 말문이 막힌다.

반복적인 작업이 필요하지 않고 스타일리쉬하며 일반적인 객체 방식을 반복할 필요가 없는 객체를 구성하는 거의 완벽한 방법이 있을까요? 실제로 함수를 사용하는 것은 이미 요구 사항에 가깝고 약간 부족하다는 것을 알 수 있습니다. 이 컨테이너에는 인스턴스의 공유 속성과 메서드가 있는 함수 개체의 모든 인스턴스가 공유하는 컨테이너가 필요합니다. 공유해야 합니다. 이 컨테이너가 준비되었습니다. —프로토타입, 프로토타입을 모르는 학생은 JavaScript 프로토타입을 살펴볼 수 있습니다

function Person(name){
                this.name=name;
            }
            Person.prototype.share=[];
            Person.prototype.printName=function(){
                alert(this.name);
            }
            var person1=new Person('Byron');
            var person2=new Person('Frank');
            console.log(person1.printName==person2.printName);//true
로그인 후 복사
이런 방식으로 Person의 각 인스턴스는 고유한 속성 이름을 가지며 또한 모든 인스턴스에서 공유되는 속성 공유 및 메소드 printName이 있어 일반적인 객체 처리에서는 항상 이 세련되고 사랑스러운 모드로 객체를 생성할 수 있습니다.

위 내용은 JavaScript 객체란 무엇입니까? 객체 코드 생성 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿