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的原型
在讲js的原型之前,必须先了解下Object和Function. Object和Function都作为JS的自带函数,Object继承自己,Funtion继承自己,Object和Function互相是 ...
- 前端基本知识(二):JS的原型链的理解
之前一直对于前端的基本知识不是了解很详细,基本功不扎实,但是前端开发中的基本知识才是以后职业发展的根基,虽然自己总是以一种实践是检验真理的唯一标准,写代码实践项目才是唯一,但是经常遇到知道怎么去解决这 ...
- js javascript 原型链详解
看了许多大神的博文,才少许明白了js 中原型链的概念,下面给大家浅谈一下,顺便也是为了巩固自己 首先看原型链之前先来了解一下new关键字的作用,在许多高级语言中,new是必不可少的关键字,其作用是为了 ...
- 攻略前端面试官(三):JS的原型和原型链
本文在个人主页同步更新~ 背就完事了 介绍:一些知识点相关的面试题和答案 使用姿势:看答案前先尝试回答,看完后把答案收起来检验成果~ 面试官:什么是构造函数 答:构造函数的本质是一个普通函数,他的特点 ...
- 怎么理解js的原型链继承?
前言 了解java等面向对象语言的童鞋应该知道.面向对象的三大特性就是:封装,继承,多态. 今天,我们就来聊一聊继承.但是,注意,我们现在说的是js的继承. 在js的es6语法出来之前,我们想实现js ...
- 我去!JS的原型是咋回事?
我去!JS的原型是咋回事? 最近写公司的项目,写着写着发现自己的原型的理解还是不够透彻,又去网上查了一番资料,顺便总结一下,在顺便给到的朋友能提供一点帮助.如有遗漏,欢迎交流. 原型是啥?为什么要用原 ...
- 关于JS对象原型prototype与继承,ES6的class和extends · kesheng's personal blog
传统方式:通过function关键字来定义一个对象类型 1234567891011 function People(name) { this.name = name}People.prototype. ...
- 基础1:JS的原型和原型链究竟
JS的原型和原型链究竟是什么? 1. 从JS创建一个对象开始说起: 1.1 工厂模式创建对象 (缺点是无法知道创建出来的对象是一个什么类型的对象) function createPerson(name ...
- 自己对js对原型链的理解
js对象分为2种 函数对象和普通对象 函数对象 比如 function Show(){}var x=function Show2(){}var b=new Function("show3&q ...
随机推荐
- 如何反编译MIPS64伪代码?用Ghidra
在分析固件时,碰到MIPS64架构的程序会很头疼,虽然用IDA能够反编译出汇编代码,但是没办法F5一键反编译成伪代码,如果单看汇编,看久了脑壳痛. 后来Google到了一个好工具,Ghidra,发音和 ...
- Oracle性能优化小结
Oracle性能优化小结 原则一.注意where子句中的连接顺序 Oracle采用自下而上的顺序解析where子句,根据这个原理,表之间的连接必须卸载其他where条件之前,哪些可以滤掉最大数量记录的 ...
- SQLyog连接报错 Error No.2058 Plugin caching_sha2_password could not be loaded
参考链接:https://blog.csdn.net/qq_22766431/article/details/80628583 win10系统更新安装Mysql8.0,连接SQLyog的时候出现下面错 ...
- 19 包含min函数的栈
题目描述 定义栈的数据结构,请在该类型中实现一个能够得到栈最小元素的min函数. 思路:一个栈存普通元素,一个最小栈存放目前位置最小的元素,只在压入的时候判断是否为空以及最小元素,其他情况正常处理 ...
- Redis详解(三)——事务
Redis详解(三)--事务 Redis事务的概念: Redis 事务的本质是一组命令的集合.事务支持一次执行多个命令,一个事务中所有命令都会被序列化.在事务执行过程,会按照顺序串行化执行队列中的命令 ...
- Java连载79-Calendar解析
一. Calendar解析 package com.bjpowernode.java_learning; import java.util.Date; import java.text.ParseEx ...
- cmf公共函数解析
cmf公共函数解析-common.php 路径:thinkcmf\simplewind\cmf\common.php方法: 方法 作用 返回值 cmf_get_current_admin_id ...
- 从0开始自己配置一个vps虚拟服务器(3)
安装数据库mysql,因为这个服务器比较烂,我只能装低版本的数据库.尝试了很多遍,终于装上去了,高版本应该没那么麻烦. 我安装了很多遍,下载的安装包,都没有安装成功. mysql各版本安装地址: (我 ...
- 适配器之SimpleAdapter
前言: 在写适配器时,SimpleAdapter会经常使用到,虽然他比ArrayAdapter复杂,但是也提供了更多的功能 正文: 我们接下来先从SimpleAdapter中较为简单的显示两行文本开始 ...
- linux下安装redis,按照redis官网安装不成功需要提前安装c++环境(安装成功并可以测试)
这个安装是一种便捷的安装,没有几句,但是完全按照官网上的来没有安装成功,有前提条件的 打开linux root登录 然后在usr下面建文件夹redis,进入 在该文件加下,直接按照官网的指导进行安装即 ...