prototype/constructor/__proto__之prototype简单应用

一、简单使用构造原型加prototype造简单的轮子。

1、想jQ那样获取HTML元素，先看JS代码

 function Cmf() { //创建构造函数

     this.arry = []

 }
 Cmf.prototype.getNode = function(tag, id) { //给构造函数定义一个getNode方法
     if (tag.indexOf('.') == 0) { //如果传入的是类class形式 .nav
         var oparent = id ? document.getElementById(id) : document;
         var oparentallchild = oparent.getElementsByTagName("*"); //选取oparent里面的所有的子项目
         for (var i = 0; i < oparentallchild.length; i++) {

             if (oparentallchild[i].className == tag.substring(1)) {

                 this.arry.push(oparentallchild[i])
             }
         }
     }else if(tag.indexOf('#') == 0&&id==null){  //如果传入的是id形式的 如#d
         this.arry.push(document.getElementById(tag.substring(1)))
     }else{ //如果传入的div 或者span形式的
         var Tagname=document.getElementsByTagName(tag)
         for(var i=0;i<Tagname.length;i++){
             this.arry.push(Tagname[i])
         }
     }
     return this
 }

 Cmf.prototype.html=function(h){  //设置获取html
     for(var i=0;i<this.arry.length;i++){
     if(h){
         this.arry[i].innerHTML=h
         return this
         }else{
             return this.arry[i].innerHTML
         }
     }

 }

 Cmf.prototype.css=function(attr,value){ //设置css样式
     console.log(this.arry)
     for(var i=0;i<this.arry.length;i++){
         if(value){
             console.log(this.arry[i])
             this.arry[i].style[attr]=value
             return this
         }else{
             if (typeof window.getComputedStyle != 'undefined') {//W3C
                 return window.getComputedStyle(this.arry[i], null)[attr];
             } else if (typeof this.arry[i].currentStyle != 'undeinfed') {//IE
                 return this.arry[i].currentStyle[attr];
             }
         }
     }
 }

 var cmf=function(){  //每次调用都实例化一次
     return new Cmf()
 }

a、上面是通过构造函数加原型给HTML元素封装html()或者css()方法；this.arry储存这html元素，getNode方法是获取html元素存到this.arry里面，为啥要返回this呢（25行，32行，46行）

this代表这你实例化之后的那个对象，这样可以进行链式操作。

b、注意 this.arry（3行）的位置，不能写成Cmf.prototype.arry=[]；为什么呢？先来一张图

比如这个构造函数Box，实例出两个对象对象box1和box2，在这张图的堆内存可以看出构造函数Box里面的方法和属性是不共享的,而Box的原型里面的方法和属性是共享的。

当写成Cmf.prototype.arry=[]时候，第一次cmf.getNode(#mm)它返回的arry只有#mm节点，第二次cmf.getNode(#nn)它返回的有#mm和#nn这两个节点，因为第一次把节点元素#mm储存在原型里面，第二次在push()时也把#nn储存进去了。

c、第58行中

每次调用cmf()方法都重新实例化一次。如果 new cmf=new Cmf()，只实例化一次，多次使用时就会出现this.arry数组中有其他对象。