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

Meils 发布于2019-08-02 11:47 / 2975人阅读

摘要：所有引用类型的隐式原型指向它构造函数的显式原型。理论就不验证了，写原型模式时。原型模式构造函数原型实例化橘猫鱼呀鱼橘猫鱼呀鱼在上述代码中，在之后就相当于这个函数。

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

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

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

3.所有引用类型的隐式原型指向它构造函数的显式原型。

4.当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么它会去到_proto_中寻找。（也就相当于会去构造函数的prototype中寻找）

画了一个图：

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

那我们来验证一下：

验证：
理论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)

控制台打印的日志如下：

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

理论2就不验证了，写原型模式时。本身就可以直接用。例如：Animal.prototype={}

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

理论4：当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么它会去到_proto_中寻找。（也就相当于去构造函数的prototype中寻找）

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




    原型模式

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

我们再来看看一个东西：




    原型模式

控制台打印日志如下：

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

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

GPU云服务器云服务器 js原型链的继承原型原型链原型模式原型链

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53120.html

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

摘要：所有引用类型的隐式原型指向它构造函数的显式原型。理论就不验证了，写原型模式时。原型模式构造函数原型实例化橘猫鱼呀鱼橘猫鱼呀鱼在上述代码中，在之后就相当于这个函数。上一章：new一个对象的过程 https://segmentfault.com/a/11... 原型链4大理论：1.所有的引用类型都有一个_proto_属性，称之为隐式原型。 2.所有的函数(Function)都有一个pro...

MRZYD 2019-08-29 17:04 评论0 收藏0
原型模式故事链(2)--原型链的四大理论

摘要：所有引用类型的隐式原型指向它构造函数的显式原型。理论就不验证了，写原型模式时。原型模式构造函数原型实例化橘猫鱼呀鱼橘猫鱼呀鱼在上述代码中，在之后就相当于这个函数。上一章：new一个对象的过程 https://segmentfault.com/a/11... 原型链4大理论：1.所有的引用类型都有一个_proto_属性，称之为隐式原型。 2.所有的函数(Function)都有一个pro...

MarvinZhang 2019-08-23 12:31 评论0 收藏0
原型模式故事链(4)--JS执行上下文、变量提升、函数声明

摘要：代码在执行之前会先全局中变量提升函数声明。函数的执行上下文，也就是在这个函数范围内找到函数执行上下文中函数范围内，所有用声明的变量。函数执行时，按照执行位置查找变量作用域只会向上查找。下一回变量作用域与闭包上一章：JS的数据类型传送门：https://segmentfault.com/a/11... 好！话不多少，我们就开始吧。对变量提升和函数声明的理解，能让你更清楚容易的理解，...

melody_lql 2019-08-29 17:05 评论0 收藏0
原型模式故事链(4)--JS执行上下文、变量提升、函数声明

摘要：代码在执行之前会先全局中变量提升函数声明。函数的执行上下文，也就是在这个函数范围内找到函数执行上下文中函数范围内，所有用声明的变量。函数执行时，按照执行位置查找变量作用域只会向上查找。下一回变量作用域与闭包上一章：JS的数据类型传送门：https://segmentfault.com/a/11... 好！话不多少，我们就开始吧。对变量提升和函数声明的理解，能让你更清楚容易的理解，...

zhigoo 2019-08-02 11:48 评论0 收藏0