JS中this和对象作为函数参数的区别

一个简单的例子

要求：

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)函数，这个时候将自身作为参数传递过去改变属性。