먼저, 참조를위한 JS 프로토 타입 상속의 예를 공유하십시오. 특정 내용은 다음과 같습니다
1. JS 프로토 타입 상속
<! docType html> <html> <head> <meta charset = "utf-8"> <title> js 프로토 타입 상속 </title> </head> <body> <!-프로토 타입 상속-> <script type = "text/javascript"> // clone () 함수를 만드는 데 사용됩니다. {}; //이 문장은 프로토 타입 상속의 핵심입니다. 함수의 프로토 타입 객체는 객체 literal_f.prototype = obj입니다. 새로운 _f를 반환합니다. } // 객체 문자 그대로 첫 번째 var 동물을 선언합니다. }} // 사람의 서브 클래스를 정의 할 필요가 없으며 복제 var cat = clone (동물)을 수행합니다. // 사람이 제공 한 기본값을 직접 얻거나 속성 및 메소드 Console.log (cat.eat ())를 추가하거나 수정할 수 있습니다. cat.somthing = '오렌지'; console.log (cat.eat ()); // 서브 클래스를 선언하고 복제 var var = clone (cat); </script> </body> </html>2. JavaScript 프로토 타입 상속의 작업 원리
JavaScript는 프로토 타입 상속을 채택하는 것으로 잘 알려져 있지만, 구현의 하나의 인스턴스 만 제공하기 때문에 새 연산자는 기본적으로 설명이 항상 혼란 스럽습니다. 프로토 타입 상속이 무엇인지, JavaScript에서 프로토 타입 상속을 사용하는 방법을 설명해 봅시다.
프로토 타입 상속의 정의
JS 프로토 타입 상속에 대한 설명을 읽으면 종종 다음 텍스트가 표시됩니다.
객체의 속성을 찾을 때 JavaScript는 주어진 이름의 속성이 발견 될 때까지 프로토 타입 체인을 위로 횡단합니다. - 자바 스크립트의 비밀 정원에서
대부분의 JavaScript 구현은 __proto__ 속성을 사용하여 객체의 프로토 타입 체인을 나타냅니다. 이 기사에서는 __proto__와 프로토 타입의 차이점을 볼 수 있습니다.
참고 : __proto__는 코드에 나타나지 않아야하는 비공식적 사용입니다. 여기서 우리는 그것을 사용하여 JavaScript 프로토 타입 상속이 어떻게 작동하는지 설명합니다.
다음 코드는 JS 엔진의 속성을 찾는 방법을 보여줍니다.
함수 getProperty (obj, prop) {if (obj.hasownproperty (prop)) return obj [prop] else if (obj .__ proto__! == null) return getProperty (obj .__ proto__, prop) else return return}}일반적인 예를 들어 보겠습니다. 2 차원 지점에는 2 차원 좌표 XY가 있으며 이는 인쇄 방법과 유사합니다.
앞에서 언급 한 프로토 타입 상속의 정의를 사용하여 x, y 및 print의 세 가지 속성이있는 객체 지점을 만듭니다. 새로운 2 차원 지점을 만들려면 새 객체를 만들어 __proto__ 속성을 가리키도록합니다.
var point = {x : 0, y : 0, print : function () {console.log (this.x, this.y); }}; var p = {x : 10, y : 20, __proto__ : point}; p.print (); // 10 20JavaScript 이상한 프로토 타입 상속
혼란스러운 것은 프로토 타입 상속을 가르치는 사람이 그러한 코드를 제공하지는 않지만 다음과 같은 코드를 제공한다는 것입니다.
함수점 (x, y) {this.x = x; this.y = y; } point.prototype = {print : function () {console.log (this.x, this.y); }}; var p = 새로운 포인트 (10, 20); p.print (); // 10 20이것은 내가 말한 것과 다릅니다. 여기서 포인트는 기능이되고 프로토 타입 속성도 있으며 새 연산자가 있습니다. 이것으로 무슨 일이 일어나고 있습니까?
새로운 운영자의 작동 방식
Creator Brendan Eich는 JS가 Java 및 C ++와 같은 전통적인 객체 지향 프로그래밍 언어와 크게 다르지 않기를 원했습니다. 이 언어에서는 새 연산자를 사용하여 새 개체를 클래스에 인스턴스화합니다. 그래서 그는 JS에서 새로운 운영자를 썼습니다.
인스턴스 속성을 초기화하기위한 C ++에는 생성자 개념이 있으므로 새 연산자는 함수를 대상으로해야합니다.
객체 방법을 한 곳에 넣어야합니다. 프로토 타입 언어를 사용하기 때문에 기능의 프로토 타입 속성에 넣을 것입니다.
새 연산자는 함수 f와 그 매개 변수를 수락합니다 : 새로운 f (인수 ...). 이 과정은 세 단계로 나뉩니다.
클래스 인스턴스를 만듭니다. 이 단계는 빈 객체의 __proto__ 속성을 f.prototype로 설정하는 것입니다.
인스턴스를 초기화하십시오. 함수 f는 매개 변수에 전달되어 호출되며 키워드는이 인스턴스로 설정됩니다.
인스턴스를 반환합니다.
이제 새로운 작품을 알았으므로 JS 코드에서 구현할 수 있습니다.
기능 new (f) {var n = { '__proto__': f.prototype}; /*1 단계*/ return function () {f.apply (n, arguments); /*2 단계*/ return n; /*3 단계*/}; }그의 작업 상황의 작은 예 :
함수점 (x, y) {this.x = x; this.y = y; } point.prototype = {print : function () {console.log (this.x, this.y); }}; var p1 = 새로운 포인트 (10, 20); p1.print (); // 10 20 Console.log (P1 인스턴스 포인트); // true var p2 = new (point) (10, 20); p2.print (); // 10 20 Console.log (P2 인스턴스 포인트); // 진실자바 스크립트의 진정한 프로토 타입 상속
JS의 ECMA 사양은 프로토 타입 상속에 새 연산자를 사용할 수 있습니다. 그러나 그레이트 마스터 Douglas Crockford는 진정한 프로토 타입 상속을 달성하기 위해 새로운 것을 사용하는 방법을 발견했습니다! 그는 물체를 적어 둡니다.
Object.create = function (parent) {function f () {} f.prototype = parent; 새로운 f ()를 반환합니다. };이것은 이상하게 보이지만 상당히 간결합니다. 새로운 객체를 생성하고 설정하려는 모든 값으로 프로토 타입을 만듭니다. __proto__를 허용하면 다음에 쓸 수도 있습니다.
object.create = function (parent) {return { '__proto__': parent}; };다음 코드를 통해 우리의 요점은 실제 프로토 타입 상속을 채택 할 수 있습니다.
var point = {x : 0, y : 0, print : function () {console.log (this.x, this.y); }}; var p = object.create (point); px = 10; py = 20; p.print (); // 10 20결론적으로
우리는 JS 프로토 타입 상속이 무엇인지, JS가 특정 방식으로 구현할 수있는 방법을 배웠습니다. 그러나 실제 프로토 타입 상속 (예 : Object.Create 및 __Proto__)을 사용하면 다음과 같은 단점이 있습니다.
표준 결함 : __ proto__는 표준 사용법이거나 심지어 비 승인 사용이 아닙니다. 동시에, 원래 개체.
불량한 최적화 : 기본이든 사용자 정의 된 객체이든 크리에이티브의 성능은 새로운 것보다 훨씬 적으며 전자는 후자보다 10 배 느린 속도가 느립니다.
위의 내용은이 기사에 관한 모든 것입니다. 모든 사람의 학습에 도움이되기를 바랍니다.