javaScript의 프로토타입 분석 [권장]_javascript 기술-JS 튜토리얼-php.cn

javaScript의 프로토타입 분석 [권장]_javascript 기술

WBOY

풀어 주다： 2016-05-16 15:02:09

원래의

1299명이 탐색했습니다.

최근에 JavaScript와 js 객체지향의 프로토타입을 배우면서 많은 것을 배웠습니다. 잘못된 점이 있으면 바로잡아 주셨으면 좋겠습니다.

객체지향 언어인 js는 당연히 상속 개념이 있지만, js에는 클래스 개념도 없고, java와 유사한 확장도 없기 때문에 js에서의 상속은 주로 Prototype(체인)에 의존한다고 생각합니다. ) js에서.

그럼 프로토타입이란 무엇일까요? 우리는 js의 함수도 객체라는 것을 알고 있습니다. 함수는 실제로 프로토타입이라는 속성을 가지고 있습니다. 이 속성 유형은 함수의 프로토타입을 가리키는 포인터입니다. .Object, 이 프로토타입 객체에는 protptype 속성이 있는 함수를 가리키는 생성자라는 기본 속성이 있습니다.

function Person(){}
    Person.prototype={
　　　　　// constructor:Person;
      first_name:"guo",
      hair_color:"black",
      city:"zhengzhou",
      act:function(){alert("eatting");}
    };

로그인 후 복사

이를 예로 들어보겠습니다. 먼저 Person 함수를 만듭니다. 이 함수에는 Person.propttype 객체를 가리키는 기본 속성 프로토타입이 있습니다. 이 객체에는 Person.prototype.constructor라는 기본 속성이 있습니다. >Person. (실제로 여기서 기본값은 Object를 가리키는 것입니다. 나중에 수정하겠습니다.)

생성자를 통해 인스턴스를 생성하면 어떻게 되나요?

function Person(){} 
  Person.prototype={ 
    first_name:"guo", 
    hair_color:"black", 
    city:"zhengzhou", 
    act:function(){alert("eatting");} 
  }; 
  var boy=new Person(); 
  var girl=new Person();

로그인 후 복사

이때, js에서 생성자와 함수의 차이점은 new 키워드이고, new 연산자를 사용하는 함수는 생성자라는 점을 알아야 합니다. Person의 인스턴스 객체를 생성하고 이를 boy와 girl에 저장하면 이 두 인스턴스 객체는 _proto_(ECMAScript5에서 [[prototype]]로 표시될 수 있음)라는 기본 속성을 생성합니다. 이 속성은 프로토타입 생성자를 가리킵니다. boy._proto_--->Person.prototype인 함수의 객체입니다(생성자와 아무 관련이 없습니다). 이때, 소년과 소녀는 프로토타입 객체의 속성을 점으로 호출할 수 있습니다. 이때 소년과 소녀는 프로토타입 객체의 속성을 공유한다는 것을 알아야 합니다. isProtptypeOf() 또는 object.getPrototypeOf()를 통해 위의 결론을 확인할 수 있습니다(이 함수의 반환 값은 _proto_의 값인 프로토타입 개체입니다).

alert(Person.prototype.isPrototypeOf(boy)); //true 
alert(Object.getPrototypeOf(boy).first_name);  //"guo"

로그인 후 복사

이 시점에서 추가 검증을 할 수 있습니다. 프로토타입 객체 속성과 동일한 이름의 속성이 인스턴스에 생성되면 어떻게 될까요?

var boy=new Person(); 
var girl=new Person(); 
boy.hair_color="red";  
alert(boy.hair_color);  //red 
alert(girl.hair_color); //black 
alert(Object.getPrototypeOf(boy).hair_color);  //black

로그인 후 복사

인스턴스에 선언된 동일한 이름의 속성이 프로토타입 객체의 속성을 차단하지만 일시적으로 덮어쓸 뿐 프로토타입 객체의 속성 유형(Object.getPrototypeOf( boy).hair_color== black), 프로토타입 객체 속성 유형(girl.hair_color==black)을 공유하는 다른 인스턴스 객체에는 영향을 미치지 않습니다. 동시에 삭제 연산자를 사용하여 인스턴스 개체에서 선언한 속성을 삭제하여 차단 효과를 취소할 수 있습니다. hasOwnProperty()를 사용하여 속성이 인스턴스(true)에 있는지 또는 프로토타입 객체(false)에 있는지 확인할 수 있습니다.

alert(boy.hasOwnProperty("hair_color")); //true

로그인 후 복사

Object.keys()를 사용하여 속성을 열거할 수 있습니다.

var key=Object.keys(Person.prototype); 
alert(key);

로그인 후 복사

이것을 배우고 나면 위의 작성 방법을 사용하여 프로토타입 객체를 선언하면 문제가 발생한다는 것을 알게 될 것입니다. 이는 프로토타입 객체의 생성자 속성이 가리킨다고 말한 것과 반대입니다. 기본적으로 프로토타입 속성을 포함하는 함수에 추가됩니다. 그 이유는 함수가 생성될 때마다 프로토타입 객체가 자동으로 생성되고 이 객체는 기본적으로 생성자를 생성하기 때문입니다. 따라서 여기서 우리의 본질은 기본 프로토타입을 다시 작성하여 새 생성자도 Object 함수를 가리키고 더 이상 Person 함수를 가리키지 않도록 하는 것입니다. 생성자가 정말 중요하다면 constructor:Person.

을 작성해야 합니다.

이후에는 프로토타입 객체의 속성을 변경하면 프로토타입 객체의 속성 유형이 변경되기 전이나 후에 인스턴스가 생성되는지에 관계없이 인스턴스에 반영됩니다. 🎜>

function Person(){} 
Person.prototype={ 
  first_name:"guo", 
  hair_color:"black", 
  city:"zhengzhou", 
  act:function(){alert("eatting");} 
}; 
 
var boy=new Person(); 
Person.prototype.hobby="basketball"; 
var girl=new Person(); 
alert(boy.hobby); //basketball

로그인 후 복사

위 코드에서 볼 수 있듯이 인스턴스 생성 후 프로토타입 객체 속성이 수정되더라도 소년 인스턴스는 여전히 Person.prototype.hobby를 공유합니다.

단, 이런 상황은 프로토타입 객체 속성을 수정한 경우에만 발생하며, 프로토타입 객체 속성을 완전히 다시 작성한 경우에는 프로토타입 객체 속성을 다시 작성한 후에 인스턴스 생성을 해야 하며, 그렇지 않으면 오류가 발생합니다.

function Person(){} 
    var girl=new Person(); 
    Person.prototype={ 
      first_name:"guo", 
      hair_color:"black", 
      city:"zhengzhou", 
      act:function(){alert("eatting");} 
    }; 
 
    var boy=new Person(); 
    Person.prototype.hobby="basketball"; 
     
    alert(boy.hobby);  //basketball 
    alert(girl.first_name);  //undefined

로그인 후 복사

'차폐' 문제로 돌아가서, 인스턴스 객체의 속성(프로토타입 객체의 특정 속성과 동일한 이름을 사용)을 생성하면 프로토타입 객체의 속성이 차단되지만 영향을 미치지 않는다는 것을 앞서 배웠습니다. 다른 인스턴스 개체. 여기에 오류가 있습니다. 이 상황은 기본 데이터 유형에만 적용됩니다. 속성 값이 유형을 참조하면 다음 코드를 참조하십시오.

function Person(){}
    
    Person.prototype={
      first_name:"guo",
      hair_color:"black",
      friends:["Nick","John"],
      city:"zhengzhou",
      act:function(){alert("eatting");}
    };

    var boy=new Person();
    boy.friends.push("Mike");
    var girl=new Person();
    alert(boy.friends);  //Nick,John,Mike
    alert(girl.friends); //Nick,John,MIke

로그인 후 복사

위 문장이 적용되지 않음을 알 수 있는데, 그 이유는 소년이 아닌 프로토타입 객체에 친구가 존재하므로 그의 수정이 이 환경에 영향을 미치기 때문입니다. (boy.frindes=[]를 통해 boy 인스턴스의 속성을 생성할 수 있습니다.) 그런 다음 생성자 모드와 프로토타입 모드의 결합 사용을 도입해야 합니다.

function Person(hair_color,city){ 
       
      this.hair_color=hair_color; 
      this.city=city; 
      this.friends=["John","Nick"]; 
    } 
    Person.prototype={ 
      constructor:Person, 
      first_name:"guo", 
      act:function() { 
         
        alert("eatting"); 
      } 
    }; 
    var boy=new Person("black","zhengzhou"); 
    var girl=new Person("red","shenyang"); 
    boy.friends.push("Nick"); 
    alert(girl.friends); 
    alert(boy.friends);

로그인 후 복사

이 모드는 현재 ECMAScript에서 사용자 정의 유형을 생성하는 데 가장 널리 사용되고 인식되는 방법이며 기본 모드로도 사용할 수 있습니다.

그러나 다른 객체 지향 언어로 작업하는 프로그래머에게는 이 패턴이 이상해 보일 수 있습니다. 모든 정보를 생성자에 캡슐화하기 위해 동적 프로토타입 패턴이 나타났습니다. 동적 모드는 주로 if 문을 사용하여 리소스를 절약하기 위해 프로토타입 객체를 초기화해야 하는지 여부를 결정합니다.

또한 공유 속성이 없어 사용되지 않는 상황에 적응할 수 있는 안전한 구성 모드가 있습니다.

위 JavaScript [권장]의 프로토타입 분석은 모두 편집자가 공유한 내용이므로 참고가 되셨으면 좋겠습니다. Script Home에 많은 지원 부탁드립니다.