JS中this和对象作为函数参数的区别
来源:互联网 发布:考研英语网络课程 编辑:程序博客网 时间:2024/05/17 16:12
一个简单的例子
要求:
1、一个列表有一些简单的包含文字的行
2、鼠标移到某一行上时背景色改为色值为 #f2f2f2,移开鼠标时则恢复为原背景色 #fff
3、点击添加按钮,能动态在最后添加一行
提示
- 获取表格的行,getElementsByTagName 。
- 使用for进行循环,为每行添加事件及背景颜色设置
<script type="text/javascript"> //页面初始化的过程帮已存在的每一行添加绑定 window.onload = function(){//鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。 for(i=1;i<document.getElementsByTagName("tr").length;i++) {//程序还有动态添加行数的功能,所以最好给每行绑定鼠标事件独立出来作为一个函数。//等下动态添加的行直接调用下面的函数就能实现绑定,而不用全部重新进行初始化绑定。 highLight(document.getElementsByTagName("tr")[i]); } } //highLight函数用来绑定鼠标事件
如何编写highLight函数
第一种做法
function highLight(obj) { obj.setAttribute("onmouseover","over(obj)"); obj.setAttribute("onmouseout","out(obj)");}//这里给传递过来的对象obj设置背景function over(obj) { obj.style.backgroundColor="#ccc";}function out(obj) { obj.style.backgroundColor="#fff";}
以上的程序是给传递过来的对象obj设置onmouseover和onmouseout属性(和over以及out函数绑定),并将这个对象obj再继续传递给over和out函数去改变背景。
然而以上做法是错误的
我们在highLight()函数中帮表中的每一行的”onmouseover”属性绑定了”over(obj)”。这时候这个obj是初始化函数传递过来的,参数又是局部变量,程序执行结束之后就会删除这个对象参数。当我们再一次将鼠标移到表中,每一行的onmouseover属性就会调用over(obj),这个时候已经不知道obj是谁了。
第二种做法
我们需要使用this关键字:
function highLight(obj) { obj.setAttribute("onmouseover","over(this)"); obj.setAttribute("onmouseout","out(this)"); } function over(obj) { obj.style.backgroundColor="#ccc"; } function out(obj) { obj.style.backgroundColor="#fff"; }
这个时候函数是可行的。
在highLight(obj)函数是在页面加载阶段就运行结束了,这个时候就把onmouseover属性和over(this)绑定。鼠标移动到那一行触发onmouseover接着调用了over()函数,并把this也就是目前的对象传递过去执行函数。
而第一个例子highLight(obj)函数把自己的obj参数传递给over()函数,这个obj对象只在hightLigt()函数运行时有效。之后触发onmouseover执行over(obj)时,over函数想调用obj对象的进行设置,可是这个时候obj对象早就不见了。
如下程序也是同样的道理
function highLight(obj) { obj.setAttribute("onmouseover" ,"obj.style.backgroundColor='#ccc'"); obj.setAttribute("onmouseout" , "obj.style.backgroundColor='#fff'");}
同样触发了onmouseover便会触发设置,这个时候已经不知道obj是什么了。
function highLight(obj) { obj.setAttribute("onmouseover" , "this.style.backgroundColor='#ccc'"); obj.setAttribute("onmouseout" , "this.style.backgroundColor='#fff'"); }
这里的this表示一个调用了属性设置函数的对象,这个对象便是highLight(obj)函数的参数obj;所以每个obj都将onmouseover属性和他自身的backgroundColor赋值操作绑定。每次触发都会调用被触发的对象进行属性设置,而不是像之前调用highLight函数传递过来的对象。故这种方法也是正确的。
总结
一、参数对象的生命周期就只在函数被调用的时候存在,所以在单次操作例如给对象设置某个属性的时候使用。例如obj.setAttribute(),这个对象属性设置就可以用obj。
二、this代表着某个行对象,每次鼠标移过去,触发了这个行对象的onmouseover,就调用over(this)函数,这个时候将自身作为参数传递过去改变属性。
- JS中this和对象作为函数参数的区别
- C语言中指针变量作为函数参数和一般变量作为函数参数的区别
- jQuery中使用this作为函数参数
- java的synchronized(参数),参数是this对象和参数是非this对象的区别
- js中函数可以作为参数和返回值
- js中创建对象是,工厂方式与构造函数方式中this的区别
- js中创建对象时,工厂方式与构造函数方式中this的区别
- C和C++函数指针作为函数参数的区别
- <a>标签中href属性动作和onclick事件的区别以及传递this参数对象
- 作为函数参数时String和String[]数组的区别
- 普通变量和数组作为函数参数的区别
- js函数作为另一个函数的参数
- Jsp中this作为JS方法参数问题
- 对象作为函数参数
- 对象作为函数参数
- JS: addEventListener 和 attachEvent 绑定的函数中this的区别
- CPen 对象不能作为函数的参数
- jquery中this与$(this)的用法区别.和于js中的this区别
- C#用API如何遍历所有窗口句柄
- Node.js初学笔记(使用InteliJ IDEA创建的项目)
- 推荐系统学习--基于item的协同过滤算法及python实现
- PT项目--含税价PB00采购定价方案实例之二
- Android常用代码之普通及系统权限静默安装APK
- JS中this和对象作为函数参数的区别
- spark读取MySQL大Table的效能问题
- JFinal结合Sigar、echarts实现后台服务器监控
- less详解
- hostapd和wpa_supplicant工具移植到ARM Linux
- 贪心+二分
- Android性能模式 第一季
- 字符串String的 简单处理
- java中的内部类创建对象方法