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

朱雀 2021-09-22 07:12 312阅读 1赞

## 一个简单的例子 ##

> 要求：  
> 1、一个列表有一些简单的包含文字的行  
> 2、鼠标移到某一行上时背景色改为色值为 \#f2f2f2，移开鼠标时则恢复为原背景色 \#fff  
> 3、点击添加按钮，能动态在最后添加一行

**提示**  
\- 获取表格的行，getElementsByTagName 。  
\- 使用for进行循环，为每行添加事件及背景颜色设置

--------------------

## **如何编写highLight函数** ##

**第一种做法**

以上的程序是给传递过来的对象obj设置onmouseover和onmouseout属性（和over以及out函数绑定），并将这个对象obj再继续传递给over和out函数去改变背景。

*然而以上做法是错误的*

> 我们在highLight()函数中帮表中的每一行的”onmouseover”属性绑定了”over(obj)”。这时候这个obj是初始化函数传递过来的，参数又是局部变量，程序执行结束之后就会删除这个对象参数。当我们再一次将鼠标移到表中，每一行的onmouseover属性就会调用over(obj)，这个时候已经不知道obj是谁了。

**第二种做法**

我们需要使用this关键字：

*这个时候函数是可行的。*

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