JavaScript 中的 this, call, apply, bind...


今天无意间在这里看到一篇说js中this的文章,看后满是疑问。。。

  作者使用this.xxproperty取某些属性得到了undefined等一系列非意料中的结果

  于是认为导致这种情况是因为之前有过对this.propertyX赋值从而改变了this所至。。。

  好吧...

  一: this

  看这个代码

   0. <script>  
   1. function test(){  
   2. alert(this.location); //这里的this是window,你可以取到任何window的属性但别妄想取button的属性  
   3. }  
   4. </script><input onclick="test();" value="click1" type="button">  

  当然要取到button dom node的信息也是十分简单的

   0. <input onclick="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


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3