美文网首页
day05-前端面试技巧-(原型链)

day05-前端面试技巧-(原型链)

作者: 东邪_黄药师 | 来源:发表于2019-03-03 23:35 被阅读5次
    创建对象有几种方法:

    第一种方式:字面量

    var o1 = {name: 'o1'};
    var o2 = new Object({name: 'o2'});
    

    第二种方式:构造函数:

          var M = function (name) { this.name = name; };
          var o3 = new M('o3');
    

    第三种方式:Object.create

          var p = {name: 'p'};
          var o4 = Object.create(p);
    
    原型 构造函数 实例 原型链
    image.png
    原型是什么

    原型指的就是原型对象,至于是谁的原型对象,需要靠函数的prototype属性和实例的proto属性来区别。
    构造函数是什么
    所谓的构造函数其实就是一个普通的函数前面加了new运算符,其实质也是一个函数,所以构造函数都有函数的prototype属性。

    实例是什么

    实例就是通过构造函数创建出来的对象。

    原型链是什么

    指从一个实例对象开始往上找,这个实例对象的proto属性所指向的则是这个实例对象的原型对象,如果用obj表示这个实例,则原型对象表示为obj.proto。同时,这个原型对象顾名思义也是一个对象,而且它也有上一级的原型对象,相对于上一级原型对象而言,它也是一个实例对象,那么它也拥有proto属性,它的proto属性也指向它的原型对象,后面也以此类推,一直到Object.prototype这个原型为止,Object.prototype为原型链的末尾点。

    四者之间的关系:
    构造函数与实例之间的关系:

    如前所述,实例是通过构造函数创建

    构造函数与原型(对象)之间的关系

    构造函数通过其属性prototype去寻找它关联的原型,如果用M表示构造函数,M.prototype所指的就是它关联的原型对象,而原型对象可以通过构造器constructor来寻找与自身关联的构造函数,所以就有M.prototype.conctructor===M。


    image.png
    实例与原型之间的关系

    其实在前面的原型链解释那里就说了实例与原型之间的关系,但是这里也还是赘述一下,因为等下5、6、7点结合来谈。很简单,就一句话可以概括,实例通过它的proto属性去寻找它关联的原型对象,所以原型对象又可以表示为obj.proto。若用obj.proto=obj关联的原型对象,而结合第6点,M.prototype=M关联的原型对象,又因为第5点,obj是M创建的,所以obj关联的对象就是M关联的对象(其实这里可用instanceof来判断实例与构造函数是否引用同一地址,事实是引用了同一地址。后面第9点会讲到instanceof),最终,obj.proto===M.prototype为true。这在控制台可验证。

    image.png
    原型对象上的属性、方法可以被实例共享,原因看代码演示
     var M = function (name) {
                this.name = name
            } 
            //构造函数原型对象上定义属性和方法
            M.prototype.country = 'US'
            M.prototype.say=function(){
                console.log("hhh")
            }
            var obj1 = new M('Jane')
            var obj2 = new M('Tom')
    
    image.png
    instabceof的原理
    image.png
    首先,通过instanceof能做什么呢?instanceof可以判断实例对象的proto属性是否与构造函数的prototype属性指向同一地址,是的话返回true,否则fasle。
    而原型对象上还有上一级的原型对象,上一级原型对象也有对应的构造函数,事实上,实例的proto属性与在原型链上的所有构造函数的prototype属性都指向同一个地址,所以有如下的结果。
    image.png
    new运算符
    image.png

    相关文章

      网友评论

          本文标题:day05-前端面试技巧-(原型链)

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