JS：原型链

在了解了原型之后，再学习原型链。

找个例子，根据在上一个随笔中的例4所示：

https://www.cnblogs.com/LIXI-/p/16392589.html

原型链如图：

 

 

 

例1：

        function fn() {};
        var f1 = new fn();
        var arr = [];
        
        console.log(arr.__proto__===f1.__proto__);  //false
        console.log(arr.__proto__.__proto__===f1.__proto__.__proto__);  //true

分析：

arr1.__proto__ ==> Array.prototype ==> new Object()，对象不同，其原型对象也不同；

原型对象的原型则相同。

 

 

例2：

 

        function fa() {
            this.name = 'lili';
            this.age = 40;
        }
        var f1 = new fa();

        function son() {
            this.gender = 'girl';
            // this.age = 20;
        }

        son.prototype = new fa();
        var s1 = new son();

        console.log(s1.name);
        console.log(s1.age);

打印结果：

lili

40

 

理解：首先创建了fa和son两个函数，并创建新对象f1，让son的原型对象继承到一个fa，再创建一个s1对象，此时，s1的原型继承了fa，在寻找name和age的时候先到son的s1的成员中找，再到prototype中找。

若son中age已经定义了，那么就不会到下一层去找fa的age属性。

 

 

 

问：s1和f1有什么关系？

答：s1 的原型对象的原型对象是f1的原型对象。

 

例3：

        function fn() {
            this.a = 1;
            this.b = 2;
            this.c = 3;
        }

        function fm() {
            this.d = 4;
            this.e = 5;
        }
        var f1 = new fn();
        f1.f = 6;

        fm.prototype = f1;
        var f2 = new fm();
        f2.g = 7;
        
        console.log(f2.a,f2.b, f2, f2.c)

        var f3 = new fm()
        console.log(f3.a, f3.b, f3, f3.c)
        console.log(f3.g, f3.f, f2.f, f2.g)

打印结果：

1 2 fm {d: 4, e: 5, g: 7} 3
1 2 fm {d: 4, e: 5} 3
undefined 6 6 7

 

理解如图：