美文网首页
原型和原型链的简单理解

原型和原型链的简单理解

作者: 猫晓封浪 | 来源:发表于2018-08-11 22:20 被阅读0次
    原型

    在JS中原型就是prototype对象,用来表示类型之间的关系。

    原型链

    JS中对象和对象之间是有联系的,通过prototype对象指向父类对象,在指向Object对象。而通过的方式就是_proto_连接,而_proto_最终指向null

    通过四个全局对象来了解原型和原型链

    这四个全局对象为:Number()String()Boolean()Object
    上述四个对象都可以通过下边两种方法实现:

    var n1=1
    var n2=new Number(1)
    var s1='1'
    var s2=new String('1')
    var b1=true
    var b2=new Boolean(true)
    var o1={}
    var o2=new Object
    

    上述的两种方法区别在内存上的区别。
    我们知道1.toString()会报错,但是这里我们通过n1.toString()返回的就是字符串'1'n1.toString()方法不会报错,但是n1只是通过赋值的方法的来的,并没有.toString()方法。这个时候就是JS通过创建临时对象var temp=new Number(1)在这个临时对象中对n1的值进行.toString()方法,再将得到的返回给n1.toString(),临时对象用完就自动抹杀。
    还有一个例子,我们对n1进行n1.xxx=2这是也不会报错,就是用临时方法在heap内存上创建的,但是再取n1.xxx时为undefined。就验证了用完就抹杀,即不存在的原理。
    为什么new Number()有.toString()方法呢?我们打印出n2看看他有没有这个属性。

    可以看到除了打印出n2的值还有一个__proto__:Number,点开这个属性可以看到萝莉了很多属性,其中就包括.toString(),所以n2可以调用.toString()方法。
    __proto__:Number所表示的就是number共有的属性。
    此时在图中我们看到n2.__proto__===Number.prototype的结果为true。就是指n2__proto__指向了Number.prototype,即Number的共有属性中去,可以从第一张图中可以看到n2__proto__中还有一个__proto__:Object的隐藏属性。点开就可以看到关于Object的共有属性。

    综上:我们可以总结出来,当我们new出来一个对象的时候,再去使用一个方法时,会首先从它自身的构造函数(或者系统自带函数)的原型对象(函数.prototype)中去找,如果没有改属性是就会通过__proto__属性去下一个Object共有属性中去寻找,直到最后为null。可以画图理解为:
    上图中prototype对象就是原型,用过__proto__将他们连接就是原型链。
    即:对象.__proto__===函数.prototype其中__proto__是每个对象都有的一个属性,而prototype函数才由的属性。
    对象具有__proto__,可以成为隐式原型,一个对象的隐式原型指向该对象的构造函数的原型。
    综上有:
    var n = new Number();
    n.__proto__===Number.prototype//true
    n.__proto__.__proto__===Object.prototype//true
    n.__proto__.__proto__.__proto__===null//true
    

    String()Boolean()同理,而Object则是比其他三种少了一个函数.prototype环节。

    易踩坑小知识
    var f=false
    var f1=new Boolean(false)
    if(f){console.log(1)}//无
    if(f1){console.log(2)}//2
    

    因为f2可以看做是对象,对象的Boolean值为true。所以只会输出2,没有1

    相关文章

      网友评论

          本文标题:原型和原型链的简单理解

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