jQuery 剧场版你必须知道的javascript

首页

web前端

js教程

jQuery 剧场版你必须知道的javascript_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 06:52 PM

jquery剧场版

一.摘要

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

二.前言

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

三.Javascript面向对象

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

创建对象

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

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

<SPAN class=kwrd>var</SPAN> objectA = <SPAN class=kwrd>new</SPAN> Object();

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

<SPAN class=kwrd>var</SPAN> objectA = Object();

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

创建属性并赋值

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

objectA.name = <SPAN class=str>"my name"</SPAN>;

访问属性

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

alert(objectA.name);

嵌套属性

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

<SPAN class=kwrd>var</SPAN> objectB = objectA;
objectB.other = objectA;
<SPAN class=rem>//此时下面三个值相当, 并且改变其中任何一个值其余两个值都改变</SPAN>

<SPAN class=rem></SPAN>objectA.name;
objectB.name;
objectB.other.name;

使用索引

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

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

     objectA[<SPAN class=str>"school.college"</SPAN>] = <SPAN class=str>"BITI"</SPAN>;
     alert(objectA[<SPAN class=str>"school.college"</SPAN>]);

下面几个语句是等效的:

    objectA[<SPAN class=str>"school.college"</SPAN>] = <SPAN class=str>"BITI"</SPAN>;
    <SPAN class=kwrd>var</SPAN> key = <SPAN class=str>"school.college"</SPAN>
    alert(objectA[<SPAN class=str>"school.college"</SPAN>]);
    alert(objectA[<SPAN class=str>"school"</SPAN> + <SPAN class=str>"."</SPAN> + <SPAN class=str>"college"</SPAN>]);    
    alert(objectA[key]);

JSON 格式语法

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

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

    <SPAN class=rem>//JSON</SPAN>
    <SPAN class=kwrd>var</SPAN> objectA = {
      name: <SPAN class=str>"myName"</SPAN>,
      age: 19,
      school:
      {
        college: <SPAN class=str>"大学"</SPAN>,
        <SPAN class=str>"high school"</SPAN>: <SPAN class=str>"高中"</SPAN> 
      },
      like:[<SPAN class=str>"睡觉"</SPAN>,<SPAN class=str>"C#"</SPAN>,<SPAN class=str>"还是睡觉"</SPAN>]
    }

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

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

objectA.school[<SPAN class=str>"high school"</SPAN>];
objectA.like[1];

静态方法与实例方法

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

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

    <SPAN class=kwrd>function</SPAN> staticClass() { }; <SPAN class=rem>//声明一个类</SPAN>
    staticClass.staticMethod = <SPAN class=kwrd>function</SPAN>() { alert(<SPAN class=str>"static method"</SPAN>) }; <SPAN class=rem>//创建一个静态方法</SPAN>
    staticClass.prototype.instanceMethod = <SPAN class=kwrd>function</SPAN>() { <SPAN class=str>"instance method"</SPAN> }; <SPAN class=rem>//创建一个实例方法</SPAN>

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

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

staticClass.staticMethod();

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

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

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

    <SPAN class=kwrd>var</SPAN> instance = <SPAN class=kwrd>new</SPAN> staticClass();<SPAN class=rem>//首先实例化</SPAN>
    instance.instanceMethod(); //在实例上可以调用实例方法

四.全局对象是window属性

通常我们在<script>标签中声明一个全局变量, 这个变量可以供当前页面的任何方法使用:</script>

  <script type="text/javascript">
    <SPAN class=kwrd>var</SPAN> objectA = <SPAN class=kwrd>new</SPAN> Object();
  script>

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

window.objectA

五.函数究竟是什么

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

    <SPAN class=kwrd>function</SPAN> myMethod()
    {
      alert(<SPAN class=str>"Hello!"</SPAN>);
    }

    myMethod();

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

    window.myMethod = <SPAN class=kwrd>function</SPAN>()
    {
      alert(<SPAN class=str>"Hello!"</SPAN>);
    }

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

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

    function myMethod()
    {
      alert("Hello!");
    }

    window.myMethod = <SPAN class=kwrd>function</SPAN>()
    {
      alert(<SPAN class=str>"Hello!"</SPAN>);
    }

    myMethod = function()
    {
      alert("Hello!");
    }

六."this"究竟是什么

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

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

    <SPAN class=kwrd>var</SPAN> o1 = { name: <SPAN class=str>"o1 name"</SPAN> };
    window.name = <SPAN class=str>"window name"</SPAN>;

    <SPAN class=kwrd>function</SPAN> showName()
    {
      alert(<SPAN class=kwrd>this</SPAN>.name);
    }    
    
    o1.show = showName;
    window.show = showName;

    showName();
    o1.show();
    window.show();

结果:

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

七.javascript中的闭包

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

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

简单表达:

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

先看下面的例子:

<SPAN class=kwrd><!</SPAN><SPAN class=html>DOCTYPE</SPAN> <SPAN class=attr>html</SPAN> <SPAN class=attr>PUBLIC</SPAN> <SPAN class=kwrd>"-//W3C//DTD XHTML 1.0 Transitional//EN"</SPAN> <SPAN class=kwrd>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</SPAN><SPAN class=kwrd>></SPAN>
<SPAN class=kwrd><</SPAN><SPAN class=html>html</SPAN> <SPAN class=attr>xmlns</SPAN><SPAN class=kwrd>="http://www.w3.org/1999/xhtml"</SPAN><SPAN class=kwrd>></SPAN>
<SPAN class=kwrd><</SPAN><SPAN class=html>head</SPAN><SPAN class=kwrd>></SPAN>
  <SPAN class=kwrd><</SPAN><SPAN class=html>title</SPAN><SPAN class=kwrd>></</SPAN><SPAN class=html>title</SPAN><SPAN class=kwrd>></SPAN>
<SPAN class=kwrd></</SPAN><SPAN class=html>head</SPAN><SPAN class=kwrd>></SPAN>
<SPAN class=kwrd><</SPAN><SPAN class=html>body</SPAN><SPAN class=kwrd>></SPAN>
  <SPAN class=kwrd><</SPAN><SPAN class=html>div</SPAN> <SPAN class=attr>id</SPAN><SPAN class=kwrd>="divResult"</SPAN><SPAN class=kwrd>></</SPAN><SPAN class=html>div</SPAN><SPAN class=kwrd>></SPAN>
  <SPAN class=kwrd><</SPAN><SPAN class=html>script</SPAN> <SPAN class=attr>type</SPAN><SPAN class=kwrd>="text/javascript"</SPAN><SPAN class=kwrd>></SPAN>
    <SPAN class=kwrd>function</SPAN> start()
    {
      <SPAN class=kwrd>var</SPAN> count = 0;
      window.setInterval(<SPAN class=kwrd>function</SPAN>()
      {
        document.getElementById(<SPAN class=str>"divResult"</SPAN>).innerHTML += count + <SPAN class=str>"<br/>"</SPAN>;
        count++;
      }, 3000);
    };
    start();
  <SPAN class=kwrd></</SPAN><SPAN class=html>script</SPAN><SPAN class=kwrd>></SPAN>
<SPAN class=kwrd></</SPAN><SPAN class=html>body</SPAN><SPAN class=kwrd>></SPAN>
<SPAN class=kwrd></</SPAN><SPAN class=html>html</SPAN><SPAN class=kwrd>></SPAN>

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