今天无意间在这里看到一篇说js中this的文章,看后满是疑问。。。
作者试用this.xXP作windowsroperty取某些属性得到了undefined等一系列非意料中的结果
于是认为导致这种情况是因为之前有过对this.propertyX赋值从而改变了this所至。。。
好吧...
一: this
看这个源代码
0. <script>
1. function test(){
2. alert(this.location); //这里的this是window,你可以取到任何window的属性但别妄想取button的属性
3. }
4. </script><input οnclick="test();" value="click1" type="button">
当然要取到button dom node的信息也是十分简单的
0. <input οnclick="test(this);" value="click1" type="button">
如上源代码,传过去this,当做参数处理即可
当然也有别的看似更体面的办法
0. <script>
1. function test_handler(){
2. //这里的this就不再是window了,而是我们要的button了,其实就是addHandler中所定义的事件发生体
3. //当然也只有等你所定义的事件(这里是onclick)触发后才有instance
4. alert(this.id);
5. }
6. function addHandler(){
7. document.getElementById("button1").onclick = test_handler;
8. }
9. window.onload = addHandler;
10. </script><input id="button1" value="click1" type="button">
但是不得不承认由this引起的错误源代码还是会很容易就进来
看下面的源代码
0. <script>
1. function test_handler(par){
2. this.par = par;
3. this.output = function(){
4. alert(this.par);
5. }
6. }
7. function addHandler(){
8. var obj = new test_handler("my paramters input");
9. document.getElementById("button1").onclick = obj.output;
10. }
11. window.onload = addHandler;
12. </script><input id="button1" value="click1" type="button">
很容易写出这样的源代码。。。我们期望的结果肯定是alert出来my paramters input,但是实际上却是undefined
其实这里的错误就是最上面2种情况的综合,这里alert(this.par);中的this是button而不再是test_handler的instance了
2, call
先看一个最简单的例子
0. <script>
1. var first_json = {
2. first: 20
3. };
4. var first_obj = function(first){
5. this.first = first;
6. }
7. var obj = new first_obj(100);
8. function Calculate(secondNum){
9. return this.first * secondNum;
10. }
11. document.writeln(Calculate.call(1, 5)); //NaN: Not a number
12. document.writeln(Calculate.call({first:10}, 5)); //50
13. document.writeln(Calculate.call(first_json, 5)); //100
14. document.writeln(Calculate.call(obj, 5)); //500
15. </script>NaN
16. 50
17. 100
18. 500
NaN
50
100
500
上面有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个数的积怎么办?
0. <script>
1. var first_json = {
2. first: 20
3. };
4. var first_obj = function(first){
5. this.first = first;
6. }
7. var obj = new first_obj(100);
8. function Calculate(){
9. var result = this.first;
10. for(var i = 0; i < arguments.length; i++){
11. result = result * arguments[i];
12. }
13. return result;
14. }
15. document.writeln(Calculate.apply(1, [5, 5])); //NaN: Not a number
16. document.writeln(Calculate.apply({first:10}, [5, 5])); //50 * 5
17. document.writeln(Calculate.apply(first_json, [5, 5])); //100 * 5
18. document.writeln(Calculate.apply(obj, [5, 5])); //500 * 5
19. document.writeln(Calculate.call(obj, [5, 5])); //NaN: Not a number
20. </script>NaN
21. 250
22. 500
23. 2500
24. NaN
NaN
250
500
2500
NaN
恩,apply的第二个参数是数组,这是call不容易做到的
4, bind
好,有了call和apply,现在试图来更改第一部分中的源代码, 我为了避免混淆this内容,所以我要显示的在call的第一个参数里传我的this过去
看一下源代码
0. <script>
1. function test_handler(par){
2. this.par = par;
3. this.output = function(){
4. alert(this.par);
5. }
6. }
7. function addHandler(){
8. var obj = new test_handler("my paramters input");
9. document.getElementById("button1").onclick = obj.output.call(obj);//this => var obj = new test_handler("my paramters input")
10. }
11. window.onload = addHandler;
12. </script><input id="button1" value="click1" type="button">
问题又出现了,instance是传过去了,也可以alert出来我想要的东西了,但是我得再window load的时候加载addHandler啊,这样直接call了就导致我页面load的时候就直接执行了我的函数,直接alert信息出来了,这还不止,还有个js错误。。。
似乎到这里就联想不下去了,不知道怎么处理了。。。于是又来一个新办法bind
说简单点bind的性能就是拿一个instance绑定到一个method,那么显然这个bind生效后method内部的this也就全成了之前绑定时的那个instance了,也就不存在混不混了
时间不早了,直接看下更改完成的源代码吧
0. <script>
1. function test_handler(par){
2. this.par = par;
3. this.output = function(){
4. alert(this.par);
5. alert(this.id);
6. }
7. }
8. Function.prototype.bind = function(instance){
9. var method_self = this;
10. temp = function(){
11. return method_self.apply(instance, arguments);
12. };
13. return temp;
14. }
15. function addHandler(){
16. var obj = new test_handler("my paramters input");
17. var btn = document.getElementById("button1");
18. btn.onclick = obj.output.bind(obj); //my paramters input; undefined
19. //btn.onclick = obj.output.bind(btn); //undefined; button1
20. }
21. window.onload = addHandler;
22. </script><input id="button1" value="click1" type="button">
注意看下上面源代码中的注释为分别2种情况下的2次alert结果,完全符合意料,通过bind我们简单实现了显示传递instance