JS 原型以及原型链

Posted 2021-01-17 ﾉ→_→ (←_←

 

 // 原型链图(点击此处放大图片)

 

    /**
     * 原型对象
     * 无论什么时,只要创建一个新函数,就会根据一组特定的规则为该函数创建一个 prototype 属性
     * 这个属性指向该函数的原型对象。默认情况下，所有原型对象都会自动获得一个 constructor(构造函数)
     * 属性，这个属性包含一个指向 prototype 属性所在函数的指针。当构造函数创建一个新实例后，
     * 该实例的内部包含一个指针[[Prototype]](内部属性),指向构造函数的原型对象。
     */

    /**
     * 如：
     * 创建一个函数 A：function A(){}
     * function A(){} 会有一个属性： prototype 属性
     * function A(){} 的原型对象为： A.prototype
     * function A(){} 的原型对象会自动获得一个 constructor 属性： A.prototype.constructor
     * 那么：
     * function A(){} 中的 prototype 属性 ---(指向)---> A.prototype (function A(){} 的原型对象)
     * A.prototype.constructor (constructor属性) ---(指向)---> function A(){} (函数 A)
     */
    function A(){}
    console.log(A.prototype.constructor==A);//true 可见原型对象中的 constructor 指向函数A

    /**
     * 如：
     * 使用 new 关键字结合 A() 函数来创建实例 obj
     * 则 obj 这个实例会有一个 [[Prototype]] 内部属性指向 A 的原型对象 A.prototype
     * Firefox、Safari 和Chrome 在每个对象上都支持一个属性 __proto__ ,它就相当于 [[Prototype]]
     */

    var obj=new A();
    console.log(obj.__proto__==A.prototype);//true 可见实例中的 [[Prototype]] 指向函数原型 A.prototype
    
    A.prototype.name="guang";//给A的原型对象增加一个name:"guang"属性
    A.prototype.sayName=function(){return this.name};//给A的原型对象增加一个sayName方法
    var obj=new A();
    console.log(obj.sayName());//guang

 

    // 上图展示了A 构造函数、A 的原型属性以及A 现有的实例 obj之间的关系。
    // 在此，A.prototype 指向了原型对象，而A.prototype.constructor 又指回了A。
    // 原型对象中除了包含constructor 属性之外，还包括后来添加的其他属性。A 的每个实例—
    // 都包含一个内部属性，该属性仅仅指向了 A.prototype原型对象,而构造函数没有直接的关系。
    // 虽然这 obj实例不包含属性和方法，但却可调用 A.sayName(),这是通过查找对象属性的过程来实现的。

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

    // 对于上面的例子而言，在调用A.sayName()的时候，会先后执行两次搜索
    // 首先，解析器会问：“实例A 有sayName 属性吗？”答：“没有。”然后，它继续搜索，再
    // 问：“A 的原型有sayName 属性吗？”答：“有。”于是，它就读取那个保存在原型对象中的函数。
    // 而这正是多个对象实例共享原型所保存的属性和方法的基本原理。

    /**
     * 原型链
     * 每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。
     * 当一个原型对象是另一个原型对象的实例时，该原型对象将包含一个指向另一个原型的指针。相应地，另一个原型中也包含着一个指向
     * 另一个构造函数的指针。假如另一个原型又是另一个类型的实例，那么上述关系依然成立，如此层层递进，就构成了实例与原型的链条
     */

    function SuperType(){
        this.property = true;
    }
    SuperType.prototype.getSuperValue = function(){
            return this.property;
    };
    function SubType(){
        this.subproperty = false;
    }
    //继承了SuperType
    SubType.prototype = new SuperType();
    SubType.prototype.getSubValue = function (){
        return this.subproperty;
    };
    var instance = new SubType();
    console.log(instance.getSuperValue()); //true

      console.log(instance.constructor == SubType,instance.constructor == SuperType); //false true

//以上代码定义两个类型：SuperType、SubType。通过创建 SuperType的实例,原型对象 SubType.prototype 继承了SuperType的属性
//本质上是通过重写原型对象实现继承。如图：

 

 

// 在上面的代码中，并没有使用SubType 默认提供的原型，而是给它换了一个新原型；这个新原型
// 就是SuperType 的实例。于是，新原型不仅具有作为一个SuperType 的实例所拥有的全部属性和方法，
// 而且其内部还有一个指针，指向了SuperType 的原型。
// 最终结果就是这样的：instance 指向SubType的原型， SubType 的原型又指向SuperType 的原型。
// getSuperValue() 方法仍然还在 SuperType.prototype 中，但property 则位于SubType.prototype 中。
// 这是因为property 是一个实例属性，而getSuperValue()则是一个原型方法。既然SubType.prototype 现在是SuperType
// 的实例，那么property 当然就位于该实例中了。此外，要注意instance.constructor 现在指向的
// 是SuperType，这是因为SubType 的原型指向了另一个对象——>SuperType 的原型，而这个原型对象的constructor 属性指向的是SuperType。
// 在通过原型链实现继承的情况下，搜索过程就得以沿着原型链继续向上。就拿上面的例子来说，调用
// instance.getSuperValue()会经历三个搜索步骤：1>搜索实例；2>搜索SubType.prototype；3>搜索SuperType.prototype，
// 4>最后一步才会找到该方法。在找不到属性或方法的情况下，搜索过程总是要一环一环地前行到原型链末端才会停下来。

 

// 事实上，因为所有引用类型默认都继承了Object，而这个继承也是通过原型链实现的。
// 因此默认原型都会包含一个内部指针，指向Object.prototype。这也正是所有自定义类型都会继承toString()、valueOf()等方法的根本原因。对该例子来说完整的原型链应该如下：