原型模式故事链(2)--原型链的四大理论

时间 2019-12-05

标签原型模式故事四大理论繁體版

原文原文链接

上一章：new一个对象的过程 https://segmentfault.com/a/11...javascript

原型链4大理论：
1.全部的引用类型都有一个_proto_属性，称之为隐式原型。html

2.全部的函数(Function)都有一个prototype属性，称之为显式原型或者直接叫原型。java

3.全部引用类型的隐式原型指向它构造函数的显式原型。segmentfault

4.当试图获得一个对象的某个属性时，若是这个对象自己没有这个属性，那么它会去到_proto_中寻找。（也就至关于会去构造函数的prototype中寻找）函数

画了一个图：
this

ps:关于JS的数据类型在下一章有spa

那咱们来验证一下：prototype

验证：
理论1：全部的引用类型都有一个_proto_属性，称之为隐式原型。日志

//引用类型
    var obj = {
        x:1,
        y:2
    }
    console.log('obj:',obj)

    var arr = [1,2,3]
    console.log('arr:',arr)

    //值类型
    var str = 'abc';
    var num = 123;
    console.log('str:',str)
    console.log('num:',num)

控制台打印的日志以下：
code

能够看出，值类型的都有隐式原型。理论1成立。

理论2就不验证了，写原型模式时。自己就能够直接用。例如：Animal.prototype={}

理论3：3.全部引用类型的隐式原型指向它构造函数的显式原型。在上一章new一个对象的过程当中步骤2验证过，成立。传送门在顶部。

理论4：当试图获得一个对象的某个属性时，若是这个对象自己没有这个属性，那么它会去到_proto_中寻找。（也就至关于去构造函数的prototype中寻找）

这个是很重要的一个理论。详细讲解一下。

<!DOCTYPE html>
<html>
<head>
    <title>原型模式</title>
</head>
<body>

<script type="text/javascript">
    //构造函数
    function Animal(name){
        this.name = name;
        console.log('this:',this)
    }
    
    // 原型
    Animal.prototype = {
        eat:function(val){
            console.log(this.name + ' like eat '+ val);
        }
    }

    // 实例化
    var cat = new Animal('橘猫');

    cat.eat('鱼呀鱼');//橘猫 like eat 鱼呀鱼
</script>
</body>
</html>

在上述代码中，在new以后cat就至关于Animal这个函数。可是在Animal中并无eat()这个方法。
根据理论4，在_proto_中找到了eat()因此能成功执行。为何_proto_中就有eat()呢。由于在new的时候，步骤2时设置新的对象的隐式原型指向其构造函数的显式原型。

咱们再来看看一个东西：

<!DOCTYPE html>
<html>
<head>
    <title>原型模式</title>
</head>
<body>

<script type="text/javascript">
    //构造函数
    function Animal(name){
        this.name = name;
    }
    
    // 原型
    Animal.prototype = {
        eat:function(val){
            console.log(this.name + ' like eat '+ val);
        }
    }

    // 实例化
    var cat = new Animal('橘猫');
    console.log('cat',cat)
    cat.eat('鱼呀鱼');//橘猫 like eat 鱼呀鱼
    cat.toString();//不会报错，能成功执行
</script>
</body>
</html>

控制台打印日志以下：

上图能够看到cat执行toString()并不会报错，说明这个方法存在。可是既不在构造函数里，也不在原型里，那在哪里呢？
根据理论4，若是这个对象自己没有这个属性，那么它会去到_proto_中寻找。（也就至关于去构造函数的prototype中寻找），因此在Animal.prototype中找不到，那么因为Animal.prototype是一个对象，属于引用类型，也知足定理4，因此在Animal.prototype的_proto_中继续找，也就是到Object.prototype中找，恰好找到了！
这个一层一层的往上找就是所谓的原型链。（具体看最开始画的那个图）
也不能无限的往上找，避免死循环，在往上就是null了。

哎哟说了这么多，请看：
下一回：JS的数据类型 https://segmentfault.com/a/11...