프로토타입 상속만큼 간단하지 않습니다! ! Prototype_javascript 기술에 대한 심층 탐구

1 프로토타입이란

JavaScript에서 객체의 프로토타입 속성은 객체 유형의 프로토타입에 대한 참조를 반환할 수 있습니다. 다소 헷갈리는 설명입니다. 이를 이해하려면 먼저 객체 유형(Type)과 프로토타입(prototype)의 개념을 올바르게 이해해야 합니다.
앞서 객체의 클래스(Class)와 객체 인스턴스(Instance) 사이에 '생성' 관계가 있다고 말씀드렸습니다. 따라서 '클래스'를 객체 특성의 모델링으로, 객체를 클래스로 간주합니다. 특성 또는 클래스(Class)는 객체의 유형(Type)입니다. 예를 들어 이전 예에서 p1과 p2의 유형은 모두 Point입니다. JavaScript에서는 다음과 같이 instanceof 연산자를 통해 확인할 수 있습니다.
p1 instanceof Point
p2 instanceof Point

Point는 p1과 p2의 유일한 유형이 아니므로 Object는 Point보다 더 일반적인 클래스이므로 Object와 Point 사이에 파생된 관계가 있다고 말합니다. 이 관계를 "상속"이라고 한다는 것은 나중에 알 수 있습니다. 이는 객체 간의 일반화된 관계의 특수한 경우이며 객체지향에서는 없어서는 안 될 기본 관계입니다.
객체 지향 분야에서 설명 가능한 추상 관계의 쌍은 인스턴스와 유형만이 아닙니다. JavaScript에서 또 다른 중요한 추상 관계는 유형(Type)과 프로토타입(prototype)입니다. 이 관계는 더 높은 수준의 추상 관계입니다. 타입과 인스턴스 사이의 추상 관계로 3계층 체인을 형성하게 됩니다. > 실생활에서 우리는 종종 무언가가 다른 것을 기반으로 한다고 말합니다. 이 두 가지는 동일한 유형일 수도 있고 다른 유형일 수도 있습니다. "follow the gourd and draw the gourd"라는 관용어에서, 여기서 조롱박은 프로토타입이고, 조롱박은 타입을 표현하기 위해 "ladle.prototype = 특정 조롱박" 또는 "ladle.prototype = 새로운 조롱박"입니다. ()".
프로토타입을 깊이 이해하기 위해서는 디자인 패턴 중 하나인 프로토타입 패턴을 공부하면 됩니다. 이 패턴의 핵심은 프로토타입 인스턴스를 사용하여 생성할 객체의 유형을 지정하고, 이러한 프로토타입을 복사하여 새로운 객체를 생성하는 것입니다. JavaScript 프로토타입은 이 방법과 유사합니다.

프로토타입 패턴에 대한 자세한 내용은 "디자인 패턴"("Design Patterns")을 참조하세요. 이는 이 기사의 범위를 벗어납니다.

유형과 인스턴스 간의 관계와 달리 프로토타입과 유형 간의 관계에서는 유형이 한 번에 하나의 프로토타입만 가질 수 있어야 합니다(그리고 인스턴스는 분명히 한 번에 여러 유형을 가질 수 있습니다). JavaScript의 경우 이 제한에는 두 가지 의미가 있습니다. 첫 번째는 각 특정 JavaScript 유형에 하나의 프로토타입만 있다는 것입니다. 기본적으로 이 프로토타입은 Object 객체입니다(Object 유형이 아니라는 점에 유의하세요!). 두 번째는 이 객체가 속한 유형이 프로토타입 관계를 만족하는 유형 체인이어야 한다는 것입니다. 예를 들어 p1의 유형은 Point와 Object이고 Object 객체는 Point의 프로토타입입니다. 유형이 ClassA, ClassB, ClassC 및 Object인 개체가 있는 경우 이 네 가지 클래스는 완전한 프로토타입 체인을 형성해야 합니다. 예:
                                //TODO:


다음 그림에서는 설명합니다. JavaScript의 객체, 유형 및 프로토타입 간의 관계:
//TODO:

흥미롭게도 JavaScript는 유형의 프로토타입 유형을 지정하지 않습니다(이 역시 매우 어색한 문장입니다). 어떤 유형이든, 일반적으로 일종의 객체일 수 있습니다. 이러한 방식으로 객체-유형-프로토타입(객체)은 JavaScript를 가져오는 링 구조 또는 기타 흥미로운 토폴로지 구조를 형성할 수 있습니다. 영리할 뿐만 아니라 아름다움도 가득합니다. 다음 섹션에서는 주로 프로토타입의 사용법을 소개합니다.



2가지 프로토타입 활용팁

프로토타입 활용팁을 이해하기 전에 먼저 프로토타입의 특성을 이해해야 합니다. 우선, JavaScript는 각 유형(Type)에 대한 프로토타입 속성을 제공합니다. 이 속성은 객체를 가리키며 이 객체는 이 유형의 "프로토타입"이 됩니다. 이는 이 유형으로 생성된 모든 객체가 프로토타입의 특성을 가짐을 의미합니다. . 또한 JavaScript 객체는 동적이며 프로토타입도 예외는 아닙니다. 프로토타입에 속성을 추가하거나 빼면 이 유형의 프로토타입이 변경됩니다. 예를 들면 다음과 같습니다.

[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.

]


다른 사람에게 a라는 속성을 객체 유형의 프로토타입에 추가하면 객체 자체에 a라는 동일한 이름의 속성이 포함됩니다. 프로토타입 속성을 "덮어쓰지만" 프로토타입 속성은 사라지지 않습니다. 삭제 연산자를 사용하여 객체 자체의 속성 a를 삭제하면 객체의 프로토타입 속성이 다시 표시됩니다. 이 기능을 사용하면 개체 속성의 기본값을 설정할 수 있습니다. 예:

[Ctrl A 모두 선택 참고:

외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.
]

위의 예는 Point 객체의 기본값이 (0,0)이므로 p1의 값은 (0,0)이고 p2의 값은 (1,2)입니다. p2의 값은 삭제로 변경될 수 있습니다. p2.x, p2.y를 삭제하고 (0,0)으로 돌아갑니다. 더 흥미로운 예는 다음과 같습니다.

[Ctrl A 모두 선택 참고: <script> function Point(x,y) { this.x = x; this.y = y; } var p1 = new Point(1,2); var p2 = new Point(3,4); Point.prototype.z = 0; //动态为Point的原型添加了属性 alert(p1.z); alert(p2.z); //同时作用于Point类型创建的所有对象 </script>외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 <script> function Point(x, y) { if(x) this.x = x; if(y) this.y = y; } Point.prototype.x = 0; Point.prototype.y = 0; var p1 = new Point; var p2 = new Point(1,2); </script>]<script> function classA() { this.a = 100; this.b = 200; this.c = 300; this.reset = function() { for(var each in this) { delete this[each]; } } } classA.prototype = new classA(); var a = new classA(); alert(a.a); a.a *= 2; a.b *= 2; a.c *= 2; alert(a.a); alert(a.b); alert(a.c); a.reset(); //调用reset方法将a的值恢复为默认值 alert(a.a); alert(a.b); alert(a.c); </script>   

利用prototype还可以为对象的属性设置一个只读的getter，从而避免它被改写。下面是一个例子： 

<script> function Point(x, y) { if(x) this.x = x; if(y) this.y = y; } Point.prototype.x = 0; Point.prototype.y = 0; function LineSegment(p1, p2) { //私有成员 var m_firstPoint = p1; var m_lastPoint = p2; var m_width = { valueOf : function(){return Math.abs(p1.x - p2.x)}, toString : function(){return Math.abs(p1.x - p2.x)} } var m_height = { valueOf : function(){return Math.abs(p1.y - p2.y)}, toString : function(){return Math.abs(p1.y - p2.y)} } //getter this.getFirstPoint = function() { return m_firstPoint; } this.getLastPoint = function() { return m_lastPoint; } this.length = { valueOf : function(){return Math.sqrt(m_width*m_width + m_height*m_height)}, toString : function(){return Math.sqrt(m_width*m_width + m_height*m_height)} } } var p1 = new Point; var p2 = new Point(2,3); var line1 = new LineSegment(p1, p2); var lp = line1.getFirstPoint(); lp.x = 100; //不小心改写了lp的值，破坏了lp的原始值而且不可恢复 alert(line1.getFirstPoint().x); alert(line1.length); //就连line1.lenght都发生了改变 </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

   

将this.getFirstPoint()改写为下面这个样子：
this.getFirstPoint = function()
{
        function GETTER(){};
        GETTER.prototype = m_firstPoint;
        return new GETTER();
}
则可以避免这个问题，保证了m_firstPoint属性的只读性。 

<script> function Point(x, y) { if(x) this.x = x; if(y) this.y = y; } Point.prototype.x = 0; Point.prototype.y = 0; function LineSegment(p1, p2) { //私有成员 var m_firstPoint = p1; var m_lastPoint = p2; var m_width = { valueOf : function(){return Math.abs(p1.x - p2.x)}, toString : function(){return Math.abs(p1.x - p2.x)} } var m_height = { valueOf : function(){return Math.abs(p1.y - p2.y)}, toString : function(){return Math.abs(p1.y - p2.y)} } //getter this.getFirstPoint = function() { function GETTER(){}; GETTER.prototype = m_firstPoint; return new GETTER(); } this.getLastPoint = function() { function GETTER(){}; GETTER.prototype = m_lastPoint; return new GETTER(); } this.length = { valueOf : function(){return Math.sqrt(m_width*m_width + m_height*m_height)}, toString : function(){return Math.sqrt(m_width*m_width + m_height*m_height)} } } var p1 = new Point; var p2 = new Point(2,3); var line1 = new LineSegment(p1, p2); var lp = line1.getFirstPoint(); lp.x = 100; //不小心改写了lp的值，但是没有破坏原始的值 alert(line1.getFirstPoint().x); alert(line1.length); //line1.lenght不发生改变 </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

   

实际上，将一个对象设置为一个类型的原型，相当于通过实例化这个类型，为对象建立只读副本，在任何时候对副本进行改变，都不会影响到原始对象，而对原始对象进行改变，则会影响到副本，除非被改变的属性已经被副本自己的同名属性覆盖。用delete操作将对象自己的同名属性删除，则可以恢复原型属性的可见性。下面再举一个例子： 

<script> function Polygon() { var m_points = []; m_points = Array.apply(m_points, arguments); function GETTER(){}; GETTER.prototype = m_points[0]; this.firstPoint = new GETTER(); this.length = { valueOf : function(){return m_points.length}, toString : function(){return m_points.length} } this.add = function(){ m_points.push.apply(m_points, arguments); } this.getPoint = function(idx) { return m_points[idx]; } this.setPoint = function(idx, point) { if(m_points[idx] == null) { m_points[idx] = point; } else { m_points[idx].x = point.x; m_points[idx].y = point.y; } } } var p = new Polygon({x:1, y:2},{x:2, y:4},{x:2, y:6}); alert(p.length); alert(p.firstPoint.x); alert(p.firstPoint.y); p.firstPoint.x = 100; //不小心写了它的值 alert(p.getPoint(0).x); //不会影响到实际的私有成员 delete p.firstPoint.x; //恢复 alert(p.firstPoint.x); p.setPoint(0, {x:3,y:4}); //通过setter改写了实际的私有成员 alert(p.firstPoint.x); //getter的值发生了改变 alert(p.getPoint(0).x); </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

   

注意，以上的例子说明了用prototype可以快速创建对象的多个副本，一般情况下，利用prototype来大量的创建复杂对象，要比用其他任何方法来copy对象快得多。注意到，用一个对象为原型，来创建大量的新对象，这正是prototype pattern的本质。
下面是一个例子： 

<script> var p1 = new Point(1,2); var points = []; var PointPrototype = function(){}; PointPrototype.prototype = p1; for(var i = 0; i < 10000; i++) { points[i] = new PointPrototype(); //由于PointPrototype的构造函数是空函数，因此它的构造要比直接构造//p1副本快得多。 } </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

   

除了上面所说的这些使用技巧之外，prototype因为它独特的特性，还有其它一些用途，被用作最广泛和最广为人知的可能是用它来模拟继承，关于这一点，留待下一节中去讨论。

3 prototype的实质

        上面已经说了prototype的作用，现在我们来透过规律揭示prototype的实质。
        我们说，prototype的行为类似于C++中的静态域，将一个属性添加为prototype的属性，这个属性将被该类型创建的所有实例所共享，但是这种共享是只读的。在任何一个实例中只能够用自己的同名属性覆盖这个属性，而不能够改变它。换句话说，对象在读取某个属性时，总是先检查自身域的属性表，如果有这个属性，则会返回这个属性，否则就去读取prototype域，返回protoype域上的属性。另外，JavaScript允许protoype域引用任何类型的对象，因此，如果对protoype域的读取依然没有找到这个属性，则JavaScript将递归地查找prototype域所指向对象的prototype域，直到这个对象的prototype域为它本身或者出现循环为止，我们可以用下面的图来描述prototype与对象实例之间的关系：
        //TODO:

4 prototype的价值与局限性

        从上面的分析我们理解了prototype，通过它能够以一个对象为原型，安全地创建大量的实例，这就是prototype的真正含义，也是它的价值所在。后面我们会看到，利用prototype的这个特性，可以用来模拟对象的继承，但是要知道，prototype用来模拟继承尽管也是它的一个重要价值，但是绝对不是它的核心，换句话说，JavaScript之所以支持prototype，绝对不是仅仅用来实现它的对象继承，即使没有了prototype继承，JavaScript的prototype机制依然是非常有用的。
        由于prototype仅仅是以对象为原型给类型构建副本，因此它也具有很大的局限性。首先，它在类型的prototype域上并不是表现为一种值拷贝，而是一种引用拷贝，这带来了“副作用”。改变某个原型上引用类型的属性的属性值（又是一个相当拗口的解释:P），将会彻底影响到这个类型创建的每一个实例。有的时候这正是我们需要的（比如某一类所有对象的改变默认值），但有的时候这也是我们所不希望的（比如在类继承的时候），下面给出了一个例子：

<script> function ClassA() { this.a=[]; } function ClassB() { this.b=function(){}; } ClassB.prototype=new ClassA(); var objB1=new ClassB(); var objB2=new ClassB(); objB1.a.push(1,2,3); alert(objB2.a); //所有b的实例中的a成员全都变了！！这并不是这个例子所希望看到的。 </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]