Javascript 原型模式

清疚 2023-06-09 10:25 12阅读 0赞

# Javascript 原型模式 #

我们创建的每个函数都有一个prototype(原型)属性，这个属性是一个指针，指向一个对象，而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。如果按照字面意思来理解，那么prototype就是通过调用构造函数而创建的那个对象实例的原型对象。使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法。换句话说，不必在构造函数中定义对象实例的信息，而是可以将这些信息直接添加到原型对象中，如下面的例子所示：

function Person() {
    }
    Person.prototype.name = "saimi";
    Person.prototype.age = 22;
    Person.prototype.job = "student";
    Person.prototype.sayName = function() {
        console.log(this.name);
    };
    
    var person1 = new Person();
    person.sayName();                       //"saimi"             
    
    var person2 = new Person();
    person1.sayName();                      //"saimi"
    console.log(person1.sayName == person2.sayName);             //"true"

![201910201938580.png][]

在此，我们将sayName()方法和所有属性直接添加到了Person的prototype属性中，构造函数变成了空函数。即便如此，也仍然可以通过调用构造函数来创建新对象，而且新对象还具有相同的属性和方法。但与构造函数模式不同的是，新对象的这些属性和方法是由所有实例共享的。换句话说，person1和person2访问的都是同一组属性和同一个sayName()函数。要理解原型模式的工作原理，必须先理解ECMAScript中原型对象的性质。

## 理解原型对象 ##

无论什么时候，只要创建一个新函数，就会根据一组特定的规则为该函数创建一个prototype属性，这个属性指向函数的原型对象。在默认情况下，所有原型对象都会自动获得一个constructor（构造函数）属性，这个属性包含一个指向prototype属性所在函数的指针。就拿前面的例子来说，Person.prototype.constructor指向Person。而通过这个构造函数，我们可以继续为原型对象添加其他属性和方法。

创建了自定义的构造函数之后，其原型对象默认只会取得constructor属性；至于其他方法，则都是从Object继承而来的。当调用构造函数创建一个新实例后，该实例的内部将包含一个指针（内部属性），指向构造函数的原型对象。ECMA-262第5版中管这个指针叫做\[\[Prototype\]\]。虽然在脚本中没有标准的方式访问\[\[Prototype\]\]，但Firefox、Safari和Chrome在每个对象上都支持一个属性\_\_proto\_\_；而在其他实现中，这个属性对脚本则是完全不可见的。不过要明确的真正重要的一点就是，这个连接存在于实例与构造函数的原型对象之间，而不是存在于实例与构造函数之间。

以前面使用Person构造函数和Person.prototype创建实例的代码为例，下图展示了各个对象之间的关系。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pZXZlcg_size_16_color_FFFFFF_t_70][]

上图展示了Person构造函数、Person的原型属性以及Person现有的两个实例之间的关系。在此，Person.prototype指向了原型对象，而Person.prototype.construct又指向了Person。原型对象中包含construct属性之外，还包括添加的其他属性。

Person的每个实例——person1和person2都包含一个内部属性，该属性指向了Person.prototype;换句话说，它们与构造函数没有直接的关系。此外，要格外注意的是，虽然这两个实例都不包含属性和方法，但是我们可以调用person1.sayName()。这是通过查找对象属性的方法来实现的。

虽然在所有实现中都无法访问到\[\[Prototype\]\]，但可以通过isPrototypeOf()方法来确定对象之间是否存在这种关系。从本质上讲，如果\[\[Prototype\]\]指向调用isPrototypeOf()方法的对象(Person.prototype),那么这个方法就返回true,如下所示:

console.log(Person.prototype.isPrototypeOf(person1));           //true
    console.log(Person.prototype.isPrototypeOf(person2));           //true

这里,我们用原型对象的isPrototypeOf()方法测试了person1和person2。因为它们内部都有一个指向Person.prototype的指针，因此都返回true。

ECMAScript 5增加了一个新方法，叫Object.getPrototypeOf(),在所有支持中，这个方法返回\[\[Prototype\]\]的值。例如：

var person1 = new Person("saimi",22,"student");
    console.log(Object.getPrototypeOf(person1) == Person.prototype);           //true
    console.log(Object.getPrototypeOf(person1).name);                                         //"saimi"

这里的第一行代码只是确定Object.getPrototypeOf()返回的对象实际就是这个对象的原型.第二行代码取得了原型对象中name属性的值,也就是"saimi"。使用Object.getPrototypeOf()可以方便地取得一个对象的原型。

每当代码读取某个对象的某个属性时，都会执行一次搜索，目标是具有给定名字的属性。搜索首先从对象本身开始。如果在实例中找到了具有给定名字的属性，则返回该属性的值；如果没有找到，则继续搜索指向的原型对象，在原型对象中查找具有给定名字的属性。如果在原型对象中找到了这个属性，则返回该属性的值。

##  ##

引自:《JavaScript 高级程序设计 第3版》

[201910201938580.png]: /images/20230531/bf395270aad345b79766f6fedd734cb5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pZXZlcg_size_16_color_FFFFFF_t_70]: /images/20230531/990486a20b7041939e3dc7aeb0cb570e.png