JavaScript_javascript 기술로 개체를 만드는 방법-JS 튜토리얼-php.cn

JavaScript_javascript 기술로 개체를 만드는 방법

WBOY

풀어 주다： 2016-05-16 17:24:13

원래의

939명이 탐색했습니다.

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

가장 간단한 객체
JavaScript에서 중괄호 {} 쌍으로 객체를 정의할 수 있습니다. 이 작성 방법은 실제로 Object의 생성자를 호출하는 것과 동일합니다

코드 복사 코드는 다음과 같습니다.

var obj={};
 var obj2= new Object();

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

코드 복사 코드는 다음과 같습니다.

var obj={};
 =0; a:0,
 fn:function( ){
                   경고(this);

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

추상화

반복되는 코드이므로 추상화할 수 있고, 함수를 사용하여 이러한 반복 작업을 수행할 수 있으며, 객체 생성 시 특별히 생성된 메서드를 호출할 수 있습니다. 다른 매개변수를 전달하기만 하면 됩니다.

코드 복사

코드는 다음과 같습니다.

function createObj(a,fn){

obj={};

obj.a=a; obj.fn=fn; return obj; } var obj=createObj(2,function( ){ 경고(this.a);

이렇게 많은 수의 객체를 생성할 때 이 메소드를 호출하면 일부 반복적인 작업을 수행할 수 있습니다. 생성된 객체의 유형을 결정해야 하는 경우가 많기 때문입니다. 위의 코드에 따르면 원래 Object 객체 인스턴스는 일부 속성과 메서드만 확장합니다.

스타일

이제 함수가 다시 등장할 차례입니다. JavaScript에서 함수는 객체입니다. 객체를 생성할 때 위의 createObj 메서드를 버리고 함수를 직접 객체로 사용하는 방법은 무엇일까요? 객체로서의 기능.

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

2. 함수가 생성자로 사용되면(new 연산자를 통해 호출됨) 생성자에 대한 일부 기본 지식이 가난한 중산층 농민 버전의 jQuery에 언급되어 있습니다.

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

3. 그러면 유형 식별 문제를 해결하기 위해 함수를 사용하는 방법은 무엇입니까? 각 함수 인스턴스 객체에는 생성자 속성("has"가 없지만 대응 가능)이 있습니다. objectof가 XXX의 인스턴스인지 확인하는 연산자입니다.

연습도 안 하고 말로만 하지 말고 코딩하세요

코드 복사 코드는 다음과 같습니다.

함수 사람(이름){
 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

이거면 완벽할 텐데, 아니! 생성자는 개체마다 다를 수 있지만 메서드는 개체의 모든 인스턴스에서 반복되어야 합니다.

코드 복사 코드는 다음과 같습니다.

함수 사람(이름){
 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이 정확히 동일하더라도 동일한 것은 아닙니다. 함수 개체에 수천 개의 메서드가 있는 경우 각 인스턴스에는 이러한 메서드의 복사본이 포함되어야 하는데 이는 매우 실망스럽습니다. 기억은 말문이 막힌다.

더 이상 헛소리는 그만

반복 작업이 필요 없고 스타일리쉬하며 일반적인 객체 방법의 반복이 필요하지 않은 객체를 구성하는 거의 완벽한 방법이 있습니까? ? 실제로 함수를 사용하는 것은 이미 요구 사항에 가깝다는 것을 알 수 있습니다. 단 하나의 차이점이 있습니다. 즉, 함수 개체의 모든 인스턴스가 공유하는 컨테이너가 필요하다는 것입니다. 이 컨테이너가 준비되었는지 확인 - —prototype, 프로토타입을 모르는 학생들은 JavaScript 프로토타입

을 살펴보세요.

코드 복사 코드는 다음과 같습니다.

함수 사람(이름){
 this.name=name;
 }

 Person.prototype.share=[];

 사람. printName=function(){
                                                         ; ;

 console.log(person1.printName==person2.printName);//true

이런 방식으로 각 Person 인스턴스에는 고유한 속성 이름이 있을 뿐만 아니라 모든 인스턴스에서 공유하는 속성 공유 및 메소드 printName이 있어 일반적인 객체 처리의 경우 항상 세련되고 사랑스러운 방식을 만들 수 있습니다. .객체 모드.