zoukankan      html  css  js  c++  java

  • jQuery之你必须知道的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. objectB.other = objectA;  
    3. //此时下面三个值相当, 并且改变其中任何一个值其余两个值都改变  
    4. objectA.name;  
    5. objectB.name;  
    6. objectB.other.name; 

    使用索引

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

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

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

    下面几个语句是等效的:

    1. objectA["school.college"] = "BITI";  
    2.  var key = "school.college" 
    3. alert(objectA["school.college"]);  
    4. alert(objectA["school" + "." + "college"]);          
    5. alert(objectA[key]); 

    JSON 格式语法

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

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

    1. //JSON  
    2.         var objectA = {  
    3.             name: "myName",  
    4.             age: 19,  
    5.             school:  
    6.             {  
    7.                 college: "大学",  
    8.                 "high school": "高中"   
    9.             },  
    10.             like:["睡觉","C#","还是睡觉"]  
    11.         } 

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

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

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

    静态方法与实例方法

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

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

    1. function staticClass() { }; //声明一个类  
    2.    staticClass.staticMethod = function() { alert("static method") }; //创建一个静态方法  
    3.    staticClass.prototype.instanceMethod = function() { "instance method" }; //创建一个实例方法 

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

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

    1. staticClass.staticMethod(); 

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

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

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

    1. var instance = new staticClass();//首先实例化  
    2. instance.instanceMethod(); //在实例上可以调用实例方法  

    二. 全局对象是window属性

    通常我们在  

    

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

      

    1. window.objectA 
      2. 

    

    三. 函数究竟是什么
    

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

      

    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中的闭包是隐式的创建的, 而不像其他支持闭包的语言那样需要显式创建. 我们在C#语言中很少碰到是因为C#中无法在方法中再次声明方法. 而在一个方法中调用另一个方法通常使用参数传递数据.
    

    
    
                
    
                
              
    • 
              
    
              
  • 

                相关阅读:
    
                
                  java.lang.UnsupportedOperationException: Not supported by BasicDataSource
                    
    c# seo 百度sitemap书写
                    
    c# 泛型原理(旧)
                    
    apache 服务器配置常用知识点合集
                    
    sass 基本常识
                    
    c# TryParse
                    
    webpack 配置热更新
                    
    c# ref和out 详解
                    
    IIS applicationHost.config 查找历史
                    
    c# webapi 自定义返回数据
                    
                        
              
    • 
              
    
              
  • 
                原文地址：https://www.cnblogs.com/leejersey/p/2559427.html
              
    • 

            

          



          
          

            

            

          

        

      

      



      

      

        

          Copyright © 2011-2022 走看看