jQuery Theatrical Edition What you must know about javascript

一.摘要

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

二.前言

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

三.Javascript面向对象

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

创建对象

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

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

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

Copy after login

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

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

Copy after login

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

创建属性并赋值

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

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

Copy after login

访问属性

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

alert(objectA.name);

Copy after login

嵌套属性

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

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

Copy after login

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

Copy after login

使用索引

如果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>]);

Copy after login

下面几个语句是等效的:

    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]);

Copy after login

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>]
    }

Copy after login

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

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

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

Copy after login

静态方法与实例方法

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

实例方法是指必须要先使用"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>

Copy after login

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

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

staticClass.staticMethod();

Copy after login

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

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

Copy after login

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

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

Copy after login