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. 记录一次Git远程仓库版本回退

    操作过程: 首先查看远程仓库版本,如下图所见,最近一次提交为2018-03-19 22:16:25 第一步:使用git log命令查看历史提交记录,选择要回退的版本号,commit后面一串字符,这里我 ...

  2. linux修改键盘按键

    我的电脑:Fedora-19 $ uname -a Linux localhost.localdomain 3.11.10-200.fc19.i686 #1 SMP Mon Dec 2 20:48:2 ...

  3. drugs

    1. 摘录:未来简史 2. 毒品禁药扫盲 3. 毒品争议 4. 部分毒品列表 5. 影视作品里常出现的几种毒品 1. 摘录:未来简史 第一章 人类的新议题 幸福快乐的权利 (P36) 人们喝酒是为了遗 ...

  4. Time Series_1_BRKA Case

    Berkshire Hathaway (The most expensive stock ever in the world) 1.1 Download data require(quantmod) ...

  5. 易升地址，windows 10, 1511 升级 1607 仍然有效

    https://www.microsoft.com/zh-cn/software-download/windows10 易升地址, windows 10 ,1511 升级 1607 仍然有效

  6. 前端学习笔记系列一：1.export default / export const

    export default 是默认导出 export const 是命名导出 参考:Javascript (ES6), export const vs export default(基本上就是翻译这 ...

  7. springboot中文官方文档

    springboot中文官方文档 https://www.breakyizhan.com/springboot/3028.html spring框架 https://www.breakyizhan.c ...

  8. 如果shell到win上出现乱码怎么办

    如果shell到win上出现这样的乱码怎么办? 如果出现了乱码,不慌一条命令搞定它!!! chcp 65001

  9. 51nod 1378：夹克老爷的愤怒 很好玩的一道树状dp

    1378 夹克老爷的愤怒 基准时间限制:1 秒 空间限制:131072 KB 分值: 80 难度:5级算法题  收藏  取消关注 夹克老爷逢三抽一之后,由于采用了新师爷的策略,乡民们叫苦不堪,开始组织 ...

  10. XV6源代码阅读-文件系统

    Exercise1 源代码阅读 文件系统部分 buf.h fcntl.h stat.h fs.h file.h ide.c bio.c log.c fs.c file.c sysfile.c exec ...