美文网首页
理解原型对象与原型链

理解原型对象与原型链

作者: 机智的老刘明同志 | 来源:发表于2019-06-24 11:54 被阅读0次

    背景:

            Javascript语言的继承机制,没有子类和父类的概念,也没有类(class)和实例(instance)的区分。

            为了实现继承(将所有对象联系起来),js的创始人最终还是采用了 new命令(只不过在Javascript语言中,new命令后面跟的不是类,而是构造函数。)


    new运算符的缺点:

            每一个实例对象,都有自己的属性和方法的副本。这样无法做到数据共享,也造成了极大的资源浪费。


    prototype属性的引入 :

            通俗一点的理解:将所有实例对象需要共享的属性方法放在prototype指向的对象中;不需要共享的属性和方法就放在构造函数中


    原型对象:

            看了上面的内容之后。通俗一点的说 prototype 属性指向的对象 就是原型对象(里面存放着的是所有实例对象所共享的属性和方法)

            实例一旦创建出来就会自动引用prototype对象的属性和方法!所以实例对象的属性和方法一般分为两种:一种是自身的,一种是引用自prototype的。看下图代码

            当代码读取某个对象的某个属性的时候,都会执行一次搜索。首先从对象实例本身开始,如果在实例中找到了该属性,则返回该属性的值,如果没有找到,则顺着prototype属性的指向,到原型对象中去找,如果如果找到就返回该属性值。(如果实例本身与原型对象的属性同名,实例本身优先级高)

    原型链:

            在说原型链之前,还需要了解__proto__属性

            1.构造函数生成实例对象

            2.实例对象有__proto__属性。函数有prototype属性       

            3.实例对象.__proto__ === 函数.prototype


            接下来假设如下条件

            constructor1.prototype = instance2  (构造函数1的原型对象是实例2)

            鉴于上述规则生效,如果试图引用constructor1构造的实例instance1的某个属性p1:

            1).首先会在instance1内部属性中找一遍;

            2).接着会在instance1.__proto__(也就是constructor1.prototype)中找一遍,而constructor1.prototype 实际上是instance2, 也就是说在instance2中寻找该属性p1;

            3).如果instance2中还是没有,此时程序不会灰心,它会继续在instance2.__proto__(也就是constructor2.prototype)中寻找...直至Object的原型对象

            搜索轨迹: instance1--> instance2 --> constructor2.prototype…-->Object.prototype

            这种搜索的轨迹,形似一条长链, 又因prototype在这个游戏规则中充当链接的作用,于是我们把这种实例与原型的链条称作原型链.(如果还不理解,看如下代码)   

            1.instabce这个实例自身中没有getFatherValue()方法

            2.去找instabce的原型对象(也就是 new Father()这个实例对象中找)

            3.new Father()这个实例对象中也没有,去他的原型对象上找

            4.找到了!


    new的过程:

            var ClassA= function(){};

            var p = new ClassA();

            1. 创建空对象;

                var p = {};

            2. 设置新对象的constructor属性为构造函数的名称,设置新对象的__proto__属性指向构造函数的prototype对象;

                p .__proto__ = ClassA.prototype;

            3. 使用新对象调用函数,函数中的this被指向新实例对象:

                ClassA.call(p );  //{}.构造函数();

            4. 将初始化完毕的新对象地址,保存到等号左边的变量中


    原型对象的结构:

            函数的原型对象constructor默认指向函数本身。

            原型对象除了有原型属性外,为了实现继承,还有一个原型链指针__proto__,该指针指向上一层的原型对象,而上一层的原型对象的结构依然类似,这样利用__proto__一直指向Object的原型对象上

            Object的原型对象用Object.prototype.__proto__ = null表示原型链的最顶端,如此变形成了javascript的原型链继承,同时也解释了为什么所有的javascript对象都具有Object的基本方法。


    扩展函数:

        hasOwnProperty: 

            JavaScript 中唯一一个查找属性但是不查找原型链的函数

            console.log(instance1.hasOwnProperty('age'));//true

        instanceof :

            该对象是否是构造函数的一个实例

    相关文章

      网友评论

          本文标题:理解原型对象与原型链

          本文链接:https://www.haomeiwen.com/subject/wrmiqctx.html