美文网首页
prototype原型

prototype原型

作者: oyakuki | 来源:发表于2017-05-10 14:36 被阅读0次

    之前我们说过函数也是对象的一种,对象是若干属性的集合,那么函数肯定也是若干属性的集合呢,

    javascript事先给我们做了一个表态,给函数加上了一个叫prototype的属性,这个属性同时又是一个对象,里面包含一个默认属性constructor,指向函数本身。

    prototype

    如上图,SuperType是是一个函数,右侧的方框就是它的原型。
    原型既然是一个对象,当然不可能只有constructor一个属性,我们可以可以给其增加一些其他的属性,如下图:

    object

    里面有些方法是不是看着很眼熟呢?也可以自己添加属性和方法:

         function Fn() { }
            Fn.prototype.name = 'oyakuki';
            Fn.prototype.getYear = function () {
                return new Date().getFullYear() - 1988;
            };
            console.log(Fn.prototype);
    
    

    打印输出的结果如下图:

    Paste_Image.png

    可以看到多了一个getYear方法和name属性;
    但是这样做,有什么用呢?
    我们还是从jquery看:

    var $div = $("div");
    $div.attr("class","newclassname");
    

    上面的代码我们很容易理解,$('div')返回的是一个对象,对象——被函数创建的。假设创建这一对象的函数是 myjQuery。它其实是这样实现的:

    myjQuery.prototype.attr = function () {
     //……
    };
    $('div') = new myjQuery();
    

    如果还不是太理解的话,套用我们的代码解释一下:

    function Fn() { }
            Fn.prototype.name = 'oyakuki';
            Fn.prototype.getYear = function () {
                return new Date().getFullYear() - 1988;
            };
    
    
    var fn = new Fn();
    console.log(fn.name);        //oyakuki
    console.log(fn.getYear());  //29
    

    即,Fn是一个函数,fn对象是从Fn函数new出来的,这样fn对象就可以调用Fn.prototype中的属性。

    因为每个对象都有一个隐藏的属性——“proto”,这个属性引用了创建这个对象的函数的prototype。即:fn.proto === Fn.prototype.

    相关文章

      网友评论

          本文标题:prototype原型

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