this关键字研究-javascript

this关键字研究.

由于javascript灵活的语言特性，让很多人无所适从，尤其是其中的this关键字更是多变.

其实上述问题都是对javascript语言了解的不够深入，如果了解的稍微深入点，this就轻而易举，也就两句话的事。

-------------------------------------------start

/* 简介 */

javascript quirksmode 网站这样一句话
　　this always refers to the “owner” of the function we're executing, or rather, to the object that a function is a method of.
　　即this总是指向执行函数的所有者，更精确的说，是指向函数方法所属的那个对象
window下调用的一个方法 foo() 是window.foo() 因此this指向对象window

其实javascript是一门面向对象的语言，后续写上研究文章.

/*  阐述 */

// 基础函数，后面很多会用到
function doSomething(){
  this.style.background = 'red';
}

doSomething();
// 全局作用域下调用，doSomething是window对象的方法，因此this指向window，window对象没有style属性，报错


var obj = {
        name : 'han',
        sayName : function () {
            alert(this.name);
        }
    }
obj.sayName();  // 'han' 
// obj sayName()中this指向obj自己，因此输出obj.name 

两个例子印证了上面简介的两句话。

/* copy函数 */

element.onclick = doSomething; 
// 这里是copy了一份函数function到onclick属性中，onclick属性因此变成了对象的一个方法,方法就是完全复制了一份doSomething内容

/* 引用函数 */

// 行内事件注册
<element onclick="doSomething()">  // 点击时会报错
alert(oDiv.onclick);
/* 
        function onclick(event){
            doSomething();
        }      
*/

从这个里面你将看到猫腻,

这个相当于是onclick属性是对doSomething函数的引用，当点击的时候，会去script代码块中去查找doSomething函数，然后执行,

这时doSomething函数仍然属于window对象

winodw对象没有style属性，这时会报错, Cannot set property 'background' of undefined  不能为undefined类型设置style属性

这里仅仅是引用了doSomethig函数，this关键字没有展示在onclick方法中，因此this不会指向HTMLelement对象.

 

-----------------------------------------summary

/* 下列是copy函数完成 */

　　　　 element.onclick = doSomething;
      　element.addEventListener('click',doSomething,false);
        element.onclick = function () {this.style.color = '#cc0000'}
        <element onlick="this.style.color =    '#cc0000';">

/* 下列是引用函数 */

　　　　 element.onclick = function () { doSomething()}
        element.attachEvent('click',doSomething);
        <element onclick = "doSomething()">

 

IE 下attachEvent绑定事件不是很好，函数是引用类型，因此函数中this指向和函数所属对象，
因此无法知道执行时间的HTML对象

/* 行间事件处理解决方案 参数传递 */

<element click="doSomething(this)">

function doSomething (obj) {
// obj是引用了HTML对象，因此可以使用下面方法
　　obj.style.background = 'red';
}

 

-------------------------------------the end