`
wanghaisheng
  • 浏览: 91705 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

你必须知道的javascript(转载)

 
阅读更多

从零开始学习jQuery之你必须知道的JavaScript

2011-04-19 13:32 张子秋 张子秋的博客 我要评论(7) 字号：T | T
一键收藏，随时查看，分享好友！

本文是jQuery系列教程的剧场版, 即和jQuery这条主线无关, 主要介绍大家平时会忽略的一些javascript细节. 适合希望巩固javascript理论知识和基础知识的开发人员阅读.

AD：

 

最近面试过一些人, 发现即使经验丰富的开发人员, 对于一些基础的理论和细节也常常会模糊. 写本文是因为就我自己而言第一次学习下面的内容时发现自己确实有所收获和感悟. 其实我们容易忽视的javascript的细节还有更多, 本文仅是冰山一角. 希望大家都能通过本文有所斩获.

一. Javascript面向对象

Javascript是一门面向对象的语言, 虽然很多书上都有讲解,但还是有很多初级开发者不了解.

创建对象

ps: 以前写过一篇详细的创建对象的文章(原型方法, 工厂方法等)但是找不到了, 回头如果还能找到我再添加进来.下面仅仅简单介绍.

在C#里我们使用new关键字创建对象, 在javascript中也可以使用new关键字:

  1. var objectA = new Object(); 

但是实际上"new"可以省略:

  1. var objectA = Object(); 

但是我建议为了保持语法一直, 总是带着new关键字声明一个对象.

创建属性并赋值

在javascript中属性不需要声明, 在赋值时即自动创建:

  1. objectA.name = "my name"; 

访问属性

一般我们使用"."来分层次的访问对象的属性:

  1. alert(objectA.name); 

嵌套属性

对象的属性同样可以是任何javascript对象:

    

  1. var objectB = objectA;  
    2. 

  2. objectB.other = objectA;  
    3. 

  3. 
//此时下面三个值相当, 并且改变其中任何一个值其余两个值都改变  

    4. 

  4. objectA.name;  
    5. 

  5. objectB.name;  
    6. 

  6. objectB.other.name; 
    7.

使用索引

如果objectA上有一个属性名称为"school.college", 那么我们没法通过"."访问,因为"objectA.school.college"语句是指寻找objectA的school属性对象的college属性.

这种情况我们需要通过索引设置和访问属性:

    

  1. objectA["school.college"] = "BITI";  
    2. 

  2. 
alert(objectA["school.college"]); 

    3.

下面几个语句是等效的:

    

  1. objectA["school.college"] = "BITI";  
    2. 

  2. 
 var key = "school.college" 

    3. 

  3. 
alert(objectA["school.college"]);  

    4. 

  4. 
alert(objectA["school" + "." + "college"]);          

    5. 

  5. alert(objectA[key]); 
    6.

JSON 格式语法

JSON是指Javascript Object Notation, 即Javascript对象表示法.

我们可以用下面的语句声明一个对象,同时创建属性:

    

  1. //JSON  
    2. 

  2. 
        var objectA = {  

    3. 

  3. 
            name: "myName",  

    4. 

  4.             age: 19,  
    5. 

  5.             school:  
    6. 

  6.             {  
    7. 

  7. 
                college: "大学",  

    8. 

  8. 
                "high school": "高中"   

    9. 

  9.             },  
    10. 

  10. 
            like:["睡觉","C#","还是睡觉"]  

    11. 

  11.         } 
    12.

JSON的语法格式是使用"{"和"}"表示一个对象, 使用"属性名称:值"的格式来创建属性, 多个属性用","隔开.

上例中school属性又是一个对象. like属性是一个数组. 使用JSON格式的字符串创建完对象后, 就可以用"."或者索引的形式访问属性:

    

  1. objectA.school["high school"];  
    2. 

  2. objectA.like[1]; 
    3.

静态方法与实例方法

静态方法是指不需要声明类的实例就可以使用的方法.

实例方法是指必须要先使用"new"关键字声明一个类的实例, 然后才可以通过此实例访问的方法.

    

  1. function staticClass() { }; //声明一个类  
    2. 

  2. 
   staticClass.staticMethod = function() { alert("static method") }; //创建一个静态方法  

    3. 

  3. 
   staticClass.prototype.instanceMethod = function() { "instance method" }; //创建一个实例方法 

    4.

上面首先声明了一个类staticClass, 接着为其添加了一个静态方法staticMethod 和一个动态方法instanceMethod. 区别就在于添加动态方法要使用prototype原型属性.

对于静态方法可以直接调用:

  1. staticClass.staticMethod(); 

但是动态方法不能直接调用:

  1. staticClass.instanceMethod(); //语句错误, 无法运行. 

需要首先实例化后才能调用:

    

  1. var instance = new staticClass();//首先实例化  
    2. 

  2. 
instance.instanceMethod(); //在实例上可以调用实例方法  

    3.

二. 全局对象是window属性

通常我们在  



然而我们还应该知道, 实际上全局变量objectA是创建在window对象上, 可以通过window对象访问到:


  1. window.objectA 


三. 函数究竟是什么


我们都知道如何创建一个全局函数以及如何调用:


    

  1. function myMethod()  
    2. 

  2. {  
    3. 

  3. 
alert("Hello!");  

    4. 

  4. 
}   

    5. 

  5. myMethod();  
    6. 



其实同全局对象一样, 使用function关键字创建的方法(也可以创建类)的名称, 实际上是为window对象创建了myMethod属性, 并且值是一个匿名方法, 上面的语句等同于:


    

  1. window.myMethod = function()  
    2. 

  2. {  
    3. 

  3. 
alert("Hello!");  

    4. 

  4. } 
    5. 



无论使用哪种方式声明, 实际保存时都是使用函数名创建window对象的属性. 并且值只有函数体没有函数名称.


所以,下面三种声明方式是等效的:


    

  1. function myMethod()  
    2. 

  2. {  
    3. 

  3. 
alert("Hello!");  

    4. 

  4. }  
    5. 

  5. 
window.myMethod = function()  

    6. 

  6. {  
    7. 

  7. 
alert("Hello!");  

    8. 

  8. }  
    9. 

  9. 
myMethod = function()  

    10. 

  10. {  
    11. 

  11. 
alert("Hello!");  

    12. 

  12. } 
    13. 



四. "this"究竟是什么


在C#中,this变量通常指类的当前实例. 在javascript则不同, javascript中的"this"是函数上下文,不是由声明决定,而是由如何调用决定.因为全局函数其实就是window的属性, 所以在顶层调用全局函数时的this是指window对象.


下面的例子可以很好的说明这一切:


    

  1. var o1 = { name: "o1 name" };  
    2. 

  2. 
        window.name = "window name";  

    3. 

  3.  
    4. 

  4. 
        function showName()  

    5. 

  5.         {  
    6. 

  6. 
            alert(this.name);  

    7. 

  7.         }          
    8. 

  8.           
    9. 

  9.         o1.show = showName;  
    10. 

  10.         window.show = showName;  
    11. 

  11.  
    12. 

  12.         showName();  
    13. 

  13.         o1.show();  
    14. 

  14.         window.show(); 
    15. 



结果:


从零开始学习jQuery： 你必须知道的javascript


结果证明在顶层调用函数和使用window对象调用函数时, this都指向window对象. 而在对象中调用函数时this指向当前对象.


五. javascript中的闭包


闭包的概念比较难以理解, 先看闭包的定义:


闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数)，因而这些变量也是该表达式的一部分。


简单表达:


闭包就是function实例以及执行function实例时来自环境的变量.


先看下面的例子:


    

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    2. 

  2. 
<html xmlns="http://www.w3.org/1999/xhtml">  

    3. 

  3. <head>  
    4. 

  4.     <title></title>  
    5. 

  5. </head>  
    6. 

  6. <body>  
    7. 

  7. 
    <div id="divResult"></div>  

    8. 

  8. 
    <script type="text/javascript">  

    9. 

  9. 
        function start()  

    10. 

  10.         {  
    11. 

  11. 
            var count = 0;  

    12. 

  12. 
            window.setInterval(function()  

    13. 

  13.             {  
    14. 

  14. 
                document.getElementById("divResult").innerHTML += count + "<br/>";  

    15. 

  15.                 count++;  
    16. 

  16.             }, 3000);  
    17. 

  17.         };  
    18. 

  18.         start();  
    19. 

  19.     </script>  
    20. 

  20. </body>  
    21. 

  21. </html> 
    22. 





count是start函数体内的变量, 通常我们理解count的作用于是在start()函数内, 在调用start()函数结束后应该也会消失.但是此示例的结果是count变量会一直存在,并且每次被加1:


从零开始学习jQuery(剧场版) 你必须知道的javascript


因为count变量是setInterval中创建的匿名函数(就是包含count++的函数)的闭包的一部分!


再通俗的讲, 闭包首先就是函数本身, 比如上面这个匿名函数本身, 同时加上在这个函数运行时需要用到的count变量.


javascript中的闭包是隐式的创建的, 而不像其他支持闭包的语言那样需要显式创建. 







  


  

    
    
分享到：
      
      
    

  


  

    

      
      |
      java list.removeAll() 问题
    

  

  

        
  

    
  

    
评论

    
    
    
    
  


  

    
发表评论

            
   您还没有登录,请您登录后再发表评论 

      

  

  





  

    
相关推荐

    
    
    
        
        
    
          
    
            
            
    
              
                
                
                
    
                  
    
                    
                      JavaScript一些技巧（转载）
                    
                  
    
                  
    根据给定的文件信息，以下是对“JavaScript一些技巧”中涉及的关键知识点的详细解析：  ### 1. 事件处理：`onBlur`, `onFocus`, `onChange`, `onSelect`  在网页开发中，事件处理是与用户交互的核心部分。`onBlur`...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      JavaScript Functional Programming for JavaScript Developers mobi
                    
                  
    
                  
    JavaScript Functional Programming for JavaScript Developers 英文mobi   本资源转载自网络，如有侵权，请联系上传者或csdn删除   本资源转载自网络，如有侵权，请联系上传者或csdn删除
    
                
    
                
              
                
                
                
    
                  
    
                    
                      javascript中文转拼音(转载)
                    
                  
    
                  
    在给定的资源中，"javascript中文转拼音(转载)"是一个关于使用JavaScript实现中文字符转换为拼音的功能。这个功能在多种场景下都非常有用，比如搜索引擎优化（SEO）、语音合成或无障碍阅读等。  `pinyinEngine.full....
    
                
    
                
              
                
                
                
    
                  
    
                    
                      Modern JavaScript Applications epub
                    
                  
    
                  
    Modern JavaScript Applications 英文epub   本资源转载自网络，如有侵权，请联系上传者或csdn删除   本资源转载自网络，如有侵权，请联系上传者或csdn删除
    
                
    
                
              
                
                
                
    
                  
    
                    
                      转载40种转载40种网页常用小技巧(javascript)－－备不时之需(javascript)－－备不时之需
                    
                  
    
                  
    根据提供的标题、描述、标签及部分内容，我们可以整理出一系列与网页设计及JavaScript相关的实用技巧，以下是对这些技巧的详细介绍：  ### 1. 屏蔽鼠标右键 ```javascript oncontextmenu="window.event.returnValue=...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      JavaScript Functional Programming for JavaScript Developers epub
                    
                  
    
                  
    JavaScript Functional Programming for JavaScript Developers 英文epub   本资源转载自网络，如有侵权，请联系上传者或csdn删除   本资源转载自网络，如有侵权，请联系上传者或csdn删除
    
                
    
                
              
                
                
                
    
                  
    
                    
                      Mastering Reactive JavaScript epub
                    
                  
    
                  
    Mastering Reactive JavaScript 英文epub   本资源转载自网络，如有侵权，请联系上传者或csdn删除   本资源转载自网络，如有侵权，请联系上传者或csdn删除
    
                
    
                
              
                
                
                
    
                  
    
                    
                      JavaScript获取系统时间（转载）
                    
                  
    
                  
    在探讨如何利用JavaScript获取系统时间之前，我们先来理解一下JavaScript中的Date对象，它是处理日期和时间的关键。Date对象提供了多种方法，可以用来获取当前或指定的日期和时间信息，包括年、月、日、小时、分钟、...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      JavaScript Concepts epub
                    
                  
    
                  
    JavaScript Concepts 英文epub   本资源转载自网络，如有侵权，请联系上传者或csdn删除   本资源转载自网络，如有侵权，请联系上传者或csdn删除
    
                
    
                
              
                
                
                
    
                  
    
                    
                      JavaScript Patterns azw3
                    
                  
    
                  
    JavaScript Patterns 英文azw3   本资源转载自网络，如有侵权，请联系上传者或csdn删除   本资源转载自网络，如有侵权，请联系上传者或csdn删除
    
                
    
                
              
                
                
                
    
                  
    
                    
                      Effective JavaScript 无水印pdf
                    
                  
    
                  
    Effective JavaScript 英文无水印pdf   pdf所有页面使用FoxitReader和PDF-XChangeViewer测试都可以打开   本资源转载自网络，如有侵权，请联系上传者或csdn删除   本资源转载自网络，如有侵权，请联系上传者或csdn...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      Mastering JavaScript 无水印pdf
                    
                  
    
                  
    Mastering JavaScript 英文无水印pdf   pdf所有页面使用FoxitReader和PDF-XChangeViewer测试都可以打开   本资源转载自网络，如有侵权，请联系上传者或csdn删除   本资源转载自网络，如有侵权，请联系上传者或csdn...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      JavaScript Novice to Ninja(2nd) 无水印pdf
                    
                  
    
                  
    JavaScript Novice to Ninja(2nd) 英文无水印pdf 第2版   pdf所有页面使用FoxitReader和PDF-XChangeViewer测试都可以打开   本资源转载自网络，如有侵权，请联系上传者或csdn删除   本资源转载自网络，如有侵权，请...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      javascript排序分页（转载）
                    
                  
    
                  
    在网页开发中，数据的展示往往需要处理大量信息，这时分页和排序功能就显得尤为重要。JavaScript，作为浏览器端的主要脚本语言，被广泛用于实现...希望这些内容能对你在JavaScript分页和排序方面的学习和实践有所帮助。
    
                
    
                
              
                
                
                
    
                  
    
                    
                      JavaScript JSON Cookbook mobi
                    
                  
    
                  
    JavaScript JSON Cookbook 英文mobi   本资源转载自网络，如有侵权，请联系上传者或csdn删除   本资源转载自网络，如有侵权，请联系上传者或csdn删除
    
                
    
                
              
                
                
                
    
                  
    
                    
                      Data Visualization with JavaScript epub
                    
                  
    
                  
    Data Visualization with JavaScript 英文epub   本资源转载自网络，如有侵权，请联系上传者或csdn删除   本资源转载自网络，如有侵权，请联系上传者或csdn删除
    
                
    
                
              
                
                
                
    
                  
    
                    
                      Get Programming with JavaScript epub
                    
                  
    
                  
    Get Programming with JavaScript 英文epub   本资源转载自网络，如有侵权，请联系上传者或csdn删除   本资源转载自网络，如有侵权，请联系上传者或csdn删除
    
                
    
                
              
            
    
          
    
        
    
    

  





  
    Magicbox
  













      

      
        

          

            

              

                

                
              

            

            


            

          

        

            
    

    
    
  

  



   Global site tag (gtag.js) - Google Analytics