使用this.xxproperty取某些属性得到了undefined等一系列非意料中的结果
于是认为导致这种情况是因为之前有过对this.propertyX赋值从而改变了this所至。。。
好吧，不要盲从，自己亲自试验下这些关键字的作用吧
一： this
看这个代码
 |
  <SCRIPT>...
  function test()...{
 alert(this.location); //这里的this是window，你可以取到任何window的属性但别妄想取input的属性
 }
 </SCRIPT>
<INPUT onclick=test(); type=button value=click1> |
 |
当然要取到button dom node的信息也是十分简单的
|
<INPUT onclick=test(this); type=button value=click1> |
|
如上代码，传过去this，当做参数处理即可
当然也有别的看似更体面的方法
|
<SCRIPT>...
function test_handler()...{
//这里的this就不再是window了，而是我们要的button了，其实就是addHandler中所定义的事件发生体
//当然也只有等你所定义的事件（这里是onclick）触发后才有instance
alert(this.id);
 }
function addHandler()...{
document.getElementById("button1").onclick = test_handler;
}
window.onload = addHandler;
</SCRIPT><INPUT id=button1 type=button value=click1> |
|
但是不得不承认由this引起的错误代码还是会很容易就进来
看下面的代码
|
<SCRIPT>...
function test_handler(par)...{
this.par = par;
this.output = function()...{
alert(this.par);
}
}
function addHandler()...{
var obj = new test_handler("my paramters input");
document.getElementById("button1").onclick = obj.output;
}
window.onload = addHandler;
</SCRIPT><INPUT id=button1 type=button value=click1> |
|
很容易写出这样的代码。。。我们期望的结果肯定是alert出来my paramters input，但是实际上却是undefined
其实这里的错误就是最上面2种情况的综合，这里alert(this.par);中的this是button而不再是test_handler的instance了
2, call
先看一个最简单的例子
|
<SCRIPT>...
var first_json = ...{
first: 20
};
var first_obj = function(first)...{
this.first = first;
}
var obj = new first_obj(100);
function Calculate(secondNum)...{
return this.first * secondNum;
}
alert(Calculate.call(1, 5)); //NaN: Not a number
alert(Calculate.call(...{first:10}, 5)); //50
alert(Calculate.call(first_json, 5)); //100
alert(Calculate.call(obj, 5)); //500
</SCRIPT>
|
|
上面有4次call，其中理解Calculate方法中的this是得出正确答案的关键
第一次：this是1，this.first = undefined 作乘法运算当然得出NaN
第二次：this是{first:10}
第三次：.....
其实可以看出这里使用了call后我们可以轻而易举的改变this的内容，那么是否能想到在上面第一部分this的使用时某些时候用call来调用就可以避免我犯那些由于没搞清楚this是什么而导致的错误？答案是肯定的，但是先看下apply
3, apply
其实这个跟call类似，修改下刚才call中代码，如果我们要计算3个数而不是2个数的积怎么办？
|
<SCRIPT>...
var first_json = ...{
first: 20
};
var first_obj = function(first)...{
this.first = first;
}
var obj = new first_obj(100);
function Calculate()...{
var result = this.first;
for(var i = 0; i < arguments.length; i++)...{
result = result * arguments[i];
}
return result;
}
alert(Calculate.apply(1, [5, 5])); //NaN: Not a number
alert(Calculate.apply(...{first:10}, [5, 5])); //50 * 5
alert(Calculate.apply(first_json, [5, 5])); //100 * 5
alert(Calculate.apply(obj, [5, 5])); //500 * 5
alert(Calculate.call(obj, [5, 5])); //NaN: Not a number
</SCRIPT>
|
|
恩，apply的第二个参数是数组，这是call不容易做到的
4, bind
好，有了call和apply，现在试图来修改第一部分中的代码， 我为了避免混淆this内容，所以我要显示的在call的第一个参数里传我的this过去
看一下代码
|
<SCRIPT>...
function test_handler(par)...{
this.par = par;
this.output = function()...{
alert(this.par);
}
}
function addHandler()...{
var obj = new test_handler("my paramters input");
document.getElementById("button1").onclick = obj.output.call(obj);//this => var obj = new test_handler("my paramters input")
}
window.onload = addHandler;
</SCRIPT><INPUT id=button1 type=button value=click1> |
|
问题又出现了，instance是传过去了，也可以alert出来我想要的东西了，但是我得再window load的时候加载addHandler啊，这样直接call了就导致我页面load的时候就直接执行了我的函数，直接alert信息出来了，这还不止，还有个js错误。。。
似乎到这里就联想不下去了，不知道怎么解决了。。。于是又来一个新方法bind
说简单点bind的功能就是拿一个instance绑定到一个method，那么显然这个bind生效后method内部的this也就全成了之前绑定时的那个instance了，也就不存在混不混了
时间不早了，直接看下修改完成的代码吧
|
<SCRIPT>...
function test_handler(par)...{
this.par = par;
this.output = function()...{
alert(this.par);
alert(this.id);
}
}
Function.prototype.bind = function(instance)...{
var method_self = this;
temp = function()...{
return method_self.apply(instance, arguments);
};
return temp;
}
function addHandler()...{
var obj = new test_handler("my paramters input");
var btn = document.getElementById("button1");
btn.onclick = obj.output.bind(obj); //my paramters input; undefined
//btn.onclick = obj.output.bind(btn); //undefined; button1
}
window.onload = addHandler;
</SCRIPT><INPUT id=button1 type=button value=click1> |
|
注意看下上面代码中的注释为分别2种情况下的2次alert结果，完全符合意料，通过bind我们简单实现了显示传递instance