• 细说javascript的对象


    代码

    1 function Foo(name) {
    2     this.name = name;
    3 }
    4 
    5 var f1 = new Foo("kinthon");

    说明:在这里我们只讨论关于对象的,不讨论代码执行上下文的阶段;下文说到的构造子就是Java语言中的构造函数;在JS中都是引用,都是对象(除了数字字面量和"undefined")

    1)当我们的Person构造子(也就是Person函数)被解析完后,内存中的状态为

    可以看出,虽然我们只是添加了一个this.name=name;但是解析器背后为我们处理了大量的操作,常见的arguments对象,还有caller,length以及函数的name; 这里主要说明下prototype和__proto__; 对于prototype这个属性,它是一个对象,类似于一个指针,指针了我们的函数原型;在没有处理的情况下,原型的情况如下

    也就是说我们原型一开始有的属性就是一个constructor,这个属性指向了我们Person函数;在这里我们先不讲构造子的__proto__属性,所以情况如下

    2)当我们执行了

    var f1 = new Foo("kinthon");

    之后,发生了什么呢?看内存

    可以看出,f1属性中有我们设置的age属性,同时注意到这里也有一个__proto__; 通过以上的解释我们知道,如果是Person object的话,这个函数是可以通过其prototype来访问Person的原型的,但是对于用Person这个构造子构造出来的对象怎么访问Person的原型呢?也就是说实例对象怎么访问其构造子的原型,这个就是通过__proto__属性来实现的。这个属性也类似于一个指针,指向了构造子的原型。所以情况如下:

    现在我们解释下为什么在Foo下既有prototype,又有__proto__,要理解这两个的作用是不一样的,prototype是指向自身的原型,而__proto__是指向构造子的原型,那么谁会是Foo的构造子?我们知道Foo本身是一个Function,所以其构造子就是Function了,所以Foo中的__proto__也就是指向了Function 的原型了

    3)到这里我们总结下,在JS中构造子,也可以说是function,都会有一个prototype对象指向其自身的原型 ,而原型同样会有一个constructor对象指向其函数;而通过构造子实例化后的对象都会有一个__proto__对象指向了其构造子的原型;

    4)综上我们再看一个现象

    在prototype中有一个__proto__属性,这个属性指向了Object;不难理解,因为prototype也是一个对象,所以其也会有构造子和其构造子的原型,它的构造子就是Object函数对象了[在js中没有显示指定的构造子函数的对象都是以Object为构造子创建的];所以到这里我们也就不难理解,为什么我们可以在f1中调用toString()这些Object的方法了。

    最后给一个总的链图:

  • 相关阅读:
    JS DOM编程艺术——DOM获取元素—— JS学习笔记2015-7-6(第77天)
    JS DOM编程艺术的学习—— JS学习笔记2015-7-5(第76天)
    面向对象的程序设计1 理解对象—— JS学习笔记2015-7-4(第75天)
    JS 引用类型 Math 对象 JS学习笔记2015-7-3(第74天)
    JS 引用类型和值类型
    HTML5之应用缓存---manifest---缓存使用----Web前端manifest缓存
    易懂 易上手的cookie 最简单明了 js中cookie的使用方法及教程
    iOS开发-面试总结(十一)
    iOS开发-面试总结(十)
    iOS开发-面试总结(九)
  • 原文地址:https://www.cnblogs.com/kinthon/p/4973233.html
Copyright © 2020-2023  润新知