《Web前端开发修炼之道》笔记五：高质量JavaScript(二)

最新推荐文章于 2024-07-12 16:27:40 发布

沈鸿斌

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量942

点赞数 1

文章标签：高质量代码 web前端开发 javascript 对象标签

本文链接：https://blog.csdn.net/u012422829/article/details/50598389

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1.this关键字的指向

（这部分转自http://blog.csdn.net/kkdelta/article/details/8457358）

JavaScript中的this关键字是一个难以琢磨的概念，是一个依赖于它的执行环境而被解析的关键字。简单说就是谁调用这个方法，方法里的this就是谁.

1,在JS文件中直接alert(this);this代表的是window,当前的执行环境是在JS的顶层域里面。

2，下面这个例子中this指向的是调用该方法的对象，button标签。

[html]view plaincopy 
    
 <script type="text/javascript">  
     function test() {  
         alert(this.value);  
         this.style.color = "red";  
     }  
 </script>  
   
 </head>  
 <body>  
     <input type="button"  id="ipt" value="test this">  
     <script type="text/javascript">  
         document.getElementById("ipt").onclick = test;  
     </script>  
 </body>  
 </html>  

上面的例子等价于下面的例子，document.getElementById("ipt").onclick相对于把test函数变成了id为 ipt元素的一个函数属性了，从而让this指向了id为 ipt元素。但是如果写成<input type="button" id="ipt" οnclick="test()" value="test this">这样的方式调用test方法，this却是指向了window。 [html] view plain copy

 
    
 <script type="text/javascript">  
     function test() {  
         alert(this.value);  
         this.style.color = "red";  
     }  
 </script>  
   
 </head>  
 <body>  
     <input type="button"  id="ipt" value="test this">  
     <script type="text/javascript">  
         var button = document.getElementById("ipt");  
         test.call(button);  
     </script>  
 </body>  
 </html>  

3，在一个函数中，this代表这个函数的执行环境

[javascript]view plaincopy 
    
 function Test(){  
     alert(this);  
 }  
   
 Test();//outputs window  
   
 var obj = new Test(); // outputs object  