Javascript原型(三)

代码分析(一)

function Phone(ram) {
    this.ram = ram;
    this.call = function(){}
}
var p = new Phone("16GB");
var q = new Phone("32GB");
  • 首先分析构造函数 Phone,定义一个 Phone 构造函数(因为下面是要对此函数使用 new 操作创建新对象的,所以这里说
    Phone 是构造函数,其实如果说 Phone 是一个普通函数也是可以的)

    function Phone(ram) {
        this.ram = ram;
        this.call = function(){}
    }

    clipboard.png

    注意:

    1. 在此图中,并没有ramcallramcall是构造函数体里的东西,是构造函数通过new创建出的对象里的属性(绝对不要理解成是构造函数本身的属性),也就是说this.ram=ram,是新创建出来的对象里面有个ram属性,值是创建对象时从外部传递进来的值。
    2. 构造函数本身有什么属性呢?构造函数本身有name属性,凡是函数都有一个属性叫做name。比如Person这个构造函数,它的name属性值就是Person;而`var
      person = function(){...};像这样的声明,name属性的值就是person`。如下图所示:

      clipboard.png

以上代码完整的图如下所示:

clipboard.png

代码分析(二)

function Phone() {
    this.ram = "16GB";
}
Phone.prototype.call = function(){}
var p = new Phone();
var q = new Phone();

clipboard.png

  • Phone构造函数中有prototype原型属性,此属性指向原型
  • 原型中有constructor属性,此属性指向构造函数
  • 原型有call属性,此属性指向一个函数
  • 通过Phone构造函数,实例化出了两个对象,这两个实例对象中分别都有__proto__原型对象属性,此属性指向原型,与Phone构造函数中的prototype属性指向的是同一对象
  • 正是由于pq对象都指向同一个原型对象,所以当调用p.call()或者q.call()的时候,即使实例化对象本身中不存在此方法,此方法也会正常执行,因为实例化对象中没有,就会自动去原型中查找,原型中有,就调用了,这也就是原型继承
  • 开发中的用法是在构造函数中定义属性,在原型中定义方法

代码分析(三)

function Phone(){
    this.ram = "16GB";
}
Phone.prototype = {
    sayHello: function(){}
};
var p = new Phone();
var q = new Phone();

内存图如下所示:

clipboard.png

右上角的刚开始的原型对象(有constructor的),没有任何属性指向它了,时间长了,它就被回收了,但是在没回收之前,它是存在的,并不是一没有东西指向它了,它就消失了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章