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 混合构造原型 运用的更多相关文章

  1. js的原型

    在讲js的原型之前,必须先了解下Object和Function. Object和Function都作为JS的自带函数,Object继承自己,Funtion继承自己,Object和Function互相是 ...

  2. 前端基本知识（二）：JS的原型链的理解

    之前一直对于前端的基本知识不是了解很详细,基本功不扎实,但是前端开发中的基本知识才是以后职业发展的根基,虽然自己总是以一种实践是检验真理的唯一标准,写代码实践项目才是唯一,但是经常遇到知道怎么去解决这 ...

  3. js javascript 原型链详解

    看了许多大神的博文,才少许明白了js 中原型链的概念,下面给大家浅谈一下,顺便也是为了巩固自己 首先看原型链之前先来了解一下new关键字的作用,在许多高级语言中,new是必不可少的关键字,其作用是为了 ...

  4. 攻略前端面试官（三）：JS的原型和原型链

    本文在个人主页同步更新~ 背就完事了 介绍:一些知识点相关的面试题和答案 使用姿势:看答案前先尝试回答,看完后把答案收起来检验成果~ 面试官:什么是构造函数 答:构造函数的本质是一个普通函数,他的特点 ...

  5. 怎么理解js的原型链继承？

    前言 了解java等面向对象语言的童鞋应该知道.面向对象的三大特性就是:封装,继承,多态. 今天,我们就来聊一聊继承.但是,注意,我们现在说的是js的继承. 在js的es6语法出来之前,我们想实现js ...

  6. 我去！JS的原型是咋回事？

    我去!JS的原型是咋回事? 最近写公司的项目,写着写着发现自己的原型的理解还是不够透彻,又去网上查了一番资料,顺便总结一下,在顺便给到的朋友能提供一点帮助.如有遗漏,欢迎交流. 原型是啥?为什么要用原 ...

  7. 关于JS对象原型prototype与继承，ES6的class和extends · kesheng's personal blog

    传统方式:通过function关键字来定义一个对象类型 1234567891011 function People(name) { this.name = name}People.prototype. ...

  8. 基础1：JS的原型和原型链究竟

    JS的原型和原型链究竟是什么? 1. 从JS创建一个对象开始说起: 1.1 工厂模式创建对象 (缺点是无法知道创建出来的对象是一个什么类型的对象) function createPerson(name ...

  9. 自己对js对原型链的理解

    js对象分为2种 函数对象和普通对象 函数对象 比如 function Show(){}var x=function Show2(){}var b=new Function("show3&q ...

随机推荐

  1. mathematica练习程序（第一章 Mathematica的基本量）

    虽然过去有用Mathematica解过一些问题,不过对这个语言并没有系统学习过. 所以最近想重新把Mathematica系统的学一遍. 偶然在B站上找到了这样一组教程:https://www.bili ...

  2. 移动硬盘在MAC找不着了

    原因: 移动硬盘,还没有推出的时候,我就直接拔了,导致文件被损坏了. 在MAC系统下,试了很多命令,一不小心加载上了. 但是只读模式,此时我想应该是有损坏了,系统也提示要重新格式化,这个代价太大了,里 ...

  3. 三、多线程基础-自旋_AQS_多线程上下文

    1. 自旋理解    很多synchronized里面的代码只是一些很简单的代码,执行时间非常快,此时等待的线程都加锁可能是一种不太值得的操作,因为线程阻塞涉及到用户态和内核态切换的问题.既然sync ...

  4. bzoj 4487: [Jsoi2015]染色问题

    先贴一个题解吧,最近懒得要死2333,可能是太弱的原因吧,总是扒题解,(甚至连题解都看不懂了),blog也没更新,GG http://blog.csdn.net/werkeytom_ftd/artic ...

  5. SpringBoot集成百度UEditor图片上传后直接访问404解决办法

    SpringBoot项目上传图片一般是上传至远程服务器存储,开发过程中可能会上传至当前项目的某个静态目录中,此时就会遇到这个问题,文件在上传之后直接访问并不能被访问到,必须重新加载项目. 首先分析一下 ...

  6. lambda表达式和for_each，find_if

    1 lambda表达式可以允许我传递任意可调用对象,必须要有捕获列表和函数体,标准形式是[捕获列表] (参数列表)->return tpye{函数体} 谓词:一元谓词指的是只能接受一个传入参数, ...

  7. Mybatis入门(六)联查之多对一

    Mysql可以联查,但Mybatis也可以联查只是没有MySQL联查的舒服需要配置很多文件. 开始搭建环境: MySQL新建两个表一个Student一个Teacher表: Teacher表: CREA ...

  8. css 文本溢出省略号

    单行溢出显示省略号: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 多行溢出显示省略号: text-overflow: ...

  9. php 打印格式化显示利器 <pre>

    当我们PHP调试的时候,用var_dump 或 print_r打印json数据或array数组时,html页面没有换行显示,看到的内容一大堆,不好定位. 输出前添加 <pre>,便可以自动 ...

  10. PCA算法提取人脸识别特征脸（降噪）

    PCA算法可以使得高维数据(mxn)降到低维,而在整个降维的过程中会丢失一定的信息,也会因此而实现降噪除噪的效果,另外,它通过降维可以计算出原本数据集的主成分分量Wk矩阵(kxn),如果将其作为数据样 ...