JavaScript의 프로토 타입 분석 [권장]

최근에 JavaScript를 배우고 JS 객체 지향의 프로토 타입을 배우고있을 때 많은 통찰력이 있습니다. 뭔가 잘못되면 수정 될 수 있기를 바랍니다.

객체 지향 언어로서 JS는 자연스럽게 상속의 개념을 가지고 있지만 JS에는 클래스의 개념이 없으므로 Java와 유사한 확장은 없습니다. 따라서 JS의 상속은 주로 JS의 프로토 타입 (체인)에 의존한다고 생각합니다.

그렇다면 프로토 타입은 무엇입니까? 우리는 JS의 함수도 객체라는 것을 알고 있습니다. 기능을 만들 때 기능에는 실제로 프로토 타입이라는 속성이 있습니다. 이 속 유형을 프로토 타입 속성이라고합니다. 이 기능의 프로토 타입 객체를 가리키는 포인터입니다. 이 프로토 타입 객체에는 생성자라는 기본 속성이 있습니다. 이 속 유형은 프로토 타입 유형이있는 함수를 가리 킵니다.

 함수 person () {} person.prototype = {// 생성자 : person; First_name : "Guo", Hair_Color : "Black", City : "Zhengzhou", act : function () {alert ( "Eatting");}};

이것을 예를 들어, 우리는 먼저 기능인을 만들었습니다. 이 함수에는 기본 속성 프로토 타입이있어 Person.ProptType 객체를 가리 킵니다. 이 객체에는 기본 속성 생성자가 있습니다. (사실, 여기의 기본값은 객체를 가리키는 것이며, 수정은 나중에 이루어집니다)

생성자를 통해 인스턴스를 만들 때 어떻게됩니까?

 function person () {} person.prototype = {first_name : "guo", Hair_color : "Black", City : "Zhengzhou", act : function () {alert ( "Eatting");}}; var boy = new Person (); var girl = 새로운 사람 ();

현재 생성자와 JS의 함수의 차이가 새로운 키워드이며 새 연산자를 사용하는 함수가 생성자라는 것을 알아야합니다. 사람의 인스턴스 객체를 생성하고 소년, 소녀에 저장하면이 두 인스턴스 객체는 _proto_ (ecmascript5에서 [[prototype]]로 표시 될 수있는 기본 속성을 생성합니다. 이 속 유형은 생성자의 프로토 타입 객체, 즉 Boy._proto _--> person.prototype (생성자와 관련이 없습니다)를 가리 킵니다. 현재 소년이나 소녀는 포인트를 사용하여 프로토 타입 객체에서 속 유형을 호출 할 수 있습니다. 현재, 당신은 소년과 소녀가 프로토 타입 객체의 속 유형을 공유한다는 것을 알아야합니다. isprotptypeof () 또는 object.getPrototypof () (이 함수의 리턴 값은 프로토 타입 객체, 즉 _proto_의 값)로 위의 결론을 확인할 수 있습니다.

 Alert (person.prototype.isprototypof (Boy)); // true alert (object.getPrototypof (boy) .first_name); // "guo"

현재 우리는 추가 확인을 수행 할 수 있습니다. 인스턴스에서 프로토 타입 객체 속성으로 복제 된 속성을 작성하면 어떻게됩니까?

 var boy = new Person (); var girl = 새로운 사람 (); boy.heair_color = "빨간색"; Alert (Boy.Hair_Color); // Red Alert (girl.heair_color); // Black Alert (Object.getPrototypof (Boy) .Hair_Color); //검은색

인스턴스에서 선언 된 중복 속성은 프로토 타입 객체의 특성을 차단하지만, 프로토 타입 객체의 속 유형에만 영향을 미치지 않을 것이며 (Object.getPrototype (Boy) .Hair_Color == Black) 또는 프로토 타입 대상 (girl.Hair_Color == 검은 색)에 영향을 미치지 않을 것입니다. 동시에 삭제 연산자를 사용하여 인스턴스 객체에서 선언 한 속성을 삭제하여 마스킹 효과를 취소 할 수 있습니다. hasownproperty ()를 사용하여 인스턴스 (true) 또는 프로토 타입 객체 (false)에 속이 존재하는지 확인할 수 있습니다.

 ALERT (Boy.HasOwnProperty ( "Hair_Color")); //진실

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

 var key = Object.keys (person.prototype); 경고 (키);

이것들을 배운 후에는 위의 쓰기 방법을 사용하여 프로토 타입 객체를 선언하면 문제가있을 것입니다. 생성자는 더 이상 사람을 가리키지 않으며, 이는 기본적으로 프로토 타입 속성을 포함하는 함수를 가리키는 것과 상반됩니다. 기능이 생성 될 때마다 프로토 타입 객체가 자동으로 생성 되며이 개체는 기본적으로 생성자를 만듭니다. 따라서 여기서 우리의 본질은 기본 프로토 타입을 다시 작성하는 것이므로 새로운 생성자는 더 이상 개인 기능을 가리키지 않는 객체 기능을 가리키는 것도되었습니다. 생성자가 정말로 중요하다면 생성자 : 사람을 작성해야합니다.

그 후, 우리는 프로토 타입의 역학을 알아야합니다. 프로토 타입 객체의 속성을 변경하면 인스턴스가 프로토 타입 객체의 일반적인 변경 전후에 생성되는지 여부에 관계없이 인스턴스에 반영됩니다.

 function person () {} person.prototype = {first_name : "guo", hair_color : "black", city : "zhengzhou", act : function () {alert ( "eatation");}}; var boy = new Person (); person.prototype.hobby = "농구"; var girl = 새로운 사람 (); 경고 (Boy.Hobby); //농구

위의 코드에 표시된 바와 같이, 인스턴스 생성 후 프로토 타입 객체 속성의 수정이 발생하더라도 Boy 인스턴스는 여전히 Person.prototype.hobby를 공유합니다.

그러나이 상황은 프로토 타입 객체 속성이 수정 될 때만 발생합니다. 프로토 타입 객체 속성이 완전히 다시 작성되면 프로토 타입 객체 속성을 다시 작성한 후 인스턴스 생성을 배치해야합니다. 그렇지 않으면 오류가 발생합니다.

 기능인 () {} var girl = new person (); person.prototype = {first_name : "guo", Hair_color : "black", city : "zhengzhou", act : function () {alert ( "eatation");}}; var boy = new Person (); person.prototype.hobby = "농구"; 경고 (Boy.Hobby); // Basketball Alert (girl.first_name); //한정되지 않은

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

 function person () {} person.prototype = {first_name : "guo", Hair_color : "black", friends : [ "nick", "John"], City : "Zhengzhou", act () {alert ( "eatation");}}; var boy = new Person (); boy.friends.push ( "Mike"); var girl = 새로운 사람 (); 경고 (Boy.Friends); // Nick, John, Mike Alert (girl.friends); // Nick, John, Mike

친구가 소년이 아닌 프로토 타입 객체에 존재하기 때문에 위의 문장이 적용되지 않으므로 수정 이이 환경에 영향을 미칩니다. (우리는 Boy를 통해 소년 인스턴스의 속성을 만들 수 있습니다 .Frindes = []) 그러면 생성자 패턴과 프로토 타입 패턴의 조합을 도입해야합니다.

 기능인 (Hair_Color, City) {this.Hair_Color = Hair_Color; this.city = 도시; this.friends = [ "John", "Nick"]; } person.prototype = {생성자 : person, first_name : "guo", act : function () {alert ( "eatation"); }}; var boy = 새로운 사람 ( "검은 색", "Zhengzhou"); var girl = 새로운 사람 ( "빨간색", "Shenyang"); boy.friends.push ( "Nick"); Alert (girl.friends); 경고 (Boy.Friends);

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

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

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

JavaScript [권장]의 위의 프로토 타입 분석은 내가 공유하는 모든 컨텐츠입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.