js 混合构造原型运用

1.给10个div添加点击事件

<body>
    <div class="sd">sdss</div>
    <div class="sd">hsdjs</div>
    <div class="sd">sdss</div>
    <div class="sd">hsdjs</div>
    <div class="sd">sdss</div>
    <div class="sd">hsdjs</div>
    <div class="sd">sdss</div>
    <div class="sd">hsdjs</div>
    <div class="sd">sdss</div>
    <div class="sd">hsdjs</div>
</body>

　一般写法

var divs = document.getElementsByClassName('sd');
for(var i = 0; i< divs.length; i++){
    divs[i].onclick = function(){
        /*点击事件*/
    }
}

每一个onclick 事件都是一个新的function 就会在内存里面定义10次。

用混合构造改写。让10个function只占用一遍内存

function SetDom(dom){
    this.dom = dom;

}
SetDom.prototype.setClick = function(){
    this.dom.onclick = function(){
        /*点击事件*/
    }
}
for(var i = 0; i< divs.length; i++){
    var div = new SetDom(divs[i]);  
    div.setClick();
}

/*注意点*/

1.必须把变量的定义写进构造里面，避免定义在原型中，引用类型的数据覆盖。

2.事件定义在构造的原型对象上面，可以让事件在内存只定义一次。

js 混合构造原型 运用

js 混合构造原型运用