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. springboot打包的问题可执行jar和不可执行jar

    具体解释可以参看:https://www.cnblogs.com/liaojie970/p/9007577.html 如果只是想要依赖那么可以将springboot自带的打包插件换掉就可以了,换为如下 ...

  2. 构建javascript array包

    //像一个数组添加数组. copyArray = function(inSrcArray,inDestArray){ var i; for(i=0;i<inSrcArray.length;i++ ...

  3. 【Linux shell】 while read line

    循环中的重定向或许你应该在其他脚本中见过下面的这种写法:while read linedo …done < file刚开始看到这种结构时,很难理解< file是如何与循环配合在一起工作的. ...

  4. PHP 获取header 的自定义参数值

    $.ajax({ type: "GET", url: "default.aspx", beforeSend: function(request) { reque ...

  5. 奇异值分解（SVD）和主成分分析（PCA）

    参考: 奇异值分解:https://www.cnblogs.com/endlesscoding/p/10033527.html 主成分分析:https://blog.csdn.net/program_ ...

  6. IOS TableView 用法

    1.在视图上创建TableView( 拖控件),为ViewController创建UITableView属性(链接至TableView)和NSArray属性(存储数据) ViewController. ...

  7. 图的Prim,Kruskal,Dijkstra,Floyd算法

    代码部分有点问题,具体算法没问题, 最近期末考,要过段时间才会修改 //邻接矩阵,具体情况看上一篇的图的实现template<class T>class MGraph {public:   ...

  8. 1-7SpringBoot之表单验证@Valid

    SpringBoot提供了强大的表单验证功能实现,给我们省去了写验证的麻烦: 这里我们给下实例,提交一个有姓名和年龄的表单添加功能, 要求姓名不能为空,年龄必须是不小于18 : 我们先新建一个Stud ...

  9. 第3节 sqoop：2、sqoop的基本简介和安装

    3. sqoop数据迁移 3.1.概述 sqoop是apache旗下一款“Hadoop和关系数据库服务器之间传送数据”的工具. 导入数据:MySQL,Oracle导入数据到Hadoop的HDFS.HI ...

  10. redis学习记录1 特性与优点

    1.存储结构:字符串.散列.列表.集合.有序集合. redis存储结构的优势:数据在redis中的储存方式和其在程序中的储存方式相近:redis对不同数据类型提供非常方便的操作方式,如使用集合类型储存 ...