JavaScript初学者应该了解的二三事!(翻译)

junwong 发布于 2012/02/23 12:00
阅读 1K+
收藏 20

原文链接:http://www.codeproject.com/Articles/333596/What-devs-should-know-about-Javascript


作为javascript初学者,你应该了解这些 (以下js表示javascript的简称)

  大家都知道在开发服务器端程序或者桌面版程序中,你可以选择你喜欢的开发语言以及开发框架。然后在基于浏览器的客户端开发中,你不得不使用令人恼火的javascript。好消息是如果你实在不喜欢javascript的话,你可以使用其他语言开发后编译成javascript,比如 Script#, WebSharper, Dart, CoffeeScript, ClojureScript, Opa等等。但无论如何,javascript依然是web开发的通用语言工具,也就意味着,如果你想做一个基于web的应用,那么你不得不或多或少去学学javascript。

这篇文章中,我将介绍一下javascript最重要的一些关键点。当然你学习的前提你自己还必须是一个有经验的程序员以及一点点去学习js的意愿,而且虽然这篇文章主要是针对C#以及JAVA开发者来教学的,但如果你习惯了你一样会学到很多有用的东西。

Javascript的语言家族
顾名思义,javascript这个名称表示它是基于java的,和java差不多的类C语言,然而,javascrip并不属于类C语言家族,它实际上是Java,Scheme,Perl以及它自己的混合衍生物。

肤浅的去看,你应该能马上习惯javascript,因为它的语法与java很相像,也有分支结构括号,分号以及if-for-while-do-switch-throw-catch-finally关键字,我想已经适应了C#/Java的你肯定会喜欢。

动态类型
与C#/Java的静态类型语言不同,JS是动态类型的,也就是说JS变量能够任意改变它的类型,而且你也无法为方法去定义明确的返回类型,如下面的代码段这是典型的静态类型语言
int x = 5;
x = "hello";


如果我们马上编译代码的话,显然会抛出一个TypeError的异常。但JS却不会,哪怕变量的类型都改变了。
var x = 5;
x = "hello";


因为在JS中,变量的类型本身就是可以改变的,编译器根本不知道这些变量将代表什么,所以你也别对JS的编译器抱太多期望,因为编译时检错有点垃圾以至于你必须更多地在程序运行时进行更多的测试来找出潜在的BUG。

弱类型
JS也是弱类型语言,意味着JS可以为变量做任何的隐形类型转换,这样大家可要小心了。在强类型语言中,编译器会进行检错看能否进行转换。比如代码2+"3"将会提示错误。然而在JS将会直接将数字转换成字符串,或者bool变量,空数组转换成数字,甚至其他什么东西转换成bool变量。。。这一切都是你无法预见的。

虽然弱类型会产生很多你无法预料的结果。但依然有两个非常重要的关键点我们必须去记住:
第一,JS有 == 操作符,你也许会以为这个与其他语言的 == 操作符一个意思,但很不幸的是它不是,如果两个不同类型的变量进行 == 操作符比较的话,JS将会尝试转换它们的类型为一致,然后才进行等值判断。所以请注意下面的代码,这些代码在JS中是肯定返回true的。
123 == "123"
true == 1
false == "0"
[] == ""
{} == "[object Object]"


不过,幸运的是,JS还是有严格的等值判断操作符的 === 与 !==,如果两个变量类型不一致的话,=== 是肯定会返回false的,所以你现在应该知道在关键场合你应该使用什么等值判断操作符了吧!

第二,JS将总是将 if 语句的表达式转换成bool值,以下这些代码在if判断语句中将会被认为是false。
false
null
undefined
0
""
NaN


请记住除此以外,任何其他类型的表达式在JS中都被认为是true。

数据类型
请牢记,JS只包含一种数据类型,这种数据类型与你熟悉语言的double几乎是一样的,因为整数如果进行除法运算的话,可能运算结果会与你的预期有出入。同时也请牢记在JS中的数据位移以及位运算比较都是很消耗资源的运算,因为运算前必须先将double转换成整数,运算后再将整数重新转换为double

数组
在JS中只存在于一种数组,我们称为arrays,当你想使用类似其他语言的lists,arrays,vectors,sets或者tuples时,arrays是你唯一的选择,注意array的容量大小是可动态改变的,而且数组的每一个元素也可以是不同的类型。
你可以像这样声明一个数组:
var array1 = []; //empty array
var array2 = [1, "hello", null, ["bye", 0]]; //array with stuff in it


看上去确实很简单,但我还是要建议你参考 array functions in Javascript 去了解更多关于JS中的数组用法。

对象
因为对象的多变性,对象在JS中可以说是最有特性的元素了,JS里的对象类似一个关联的字典集合,在左边你能看到字典的关键词,与之对应在右边你能看到该关键词对应的值,这个值甚至是其他对象或者一个方法。

在JAVA/C#中,你肯定要使用大量的类,但在JS中,你可以更简洁地使用对象完成同样的目的。

比如这是一个Person类
class Person
{
    public string name = "John";
    public int age = 25;
    public string occupation = "programmer";
}


在JS中,你可以使用对象完成同样的任务
var person = {
  name: "John",
  age: 25,
  occupation: "programmer"
};


但如果你要实现更加复杂的类呢?比如有构造方法,私有字段以及方法的时候你该怎么做呢?
class Person
{
    private string name;
    private int age;
    private string occupation;

    public Person(string name, int age, string occupation)
    {
        this.name = name;
        this.age = age;
        this.occupation = occupation;
    }

    public string GetDescription()
    {
        return name + " is a " + age + " year old person that earns money as a " + occupation + ".";
    }
}

比如现在你可以实例化一个Person然后获取他的描述
Person John = new Person("John", 25, "programmer");
string biographyOfJohn = John.GetDescription();


在JS中没有类而只有简洁的对象。我们这里看看如何使用对象来完成上面的功能:
function Person(name, age, occupation) {
    return {
      name: name,
      age: age,
      occupation: occupation,
      getDescription: function() {
        return name + " is a " + age + " year old person that earns money as a " + occupation + ".";
      }
    };
}


现在,你也可以通过下面的代码来初始化一个Person然后也获取他的描述了
var John = Person("John", 25, "programmer");
var biographyOfJohn = John.getDescription();


方法
JS的方法与C#/JAVA是不一样的,C#/JAVA的方法是直接属于类的,你可以为某个方法分配变量,传递参数,获取方法的返回值或者之际将方法作为数组的元素以及对象的某个值。

在JS中,有两种定义方法的标准语法:
function name(arguments) {
  //function body
  return returnValue;
}


var name = function(arguments) {
  //function body
  return returnValue;
}

这两个不同语法的唯一区别就是第一个将自动将自己置于程序的全局,这样你能够在定义方法的代码前就能直接调用该方法 ( Read more about hoisting in Javascript) 而如果你使用第二个语法规格的话,你必须在调用方法前事先定义方法。

范围
JS只针对方法才有可使用的范围限制,显然这与C#/JAVA的块区域是不一样的,所以如果你写下如下代码你可能会碰到一些问题
var x = 45;
if(condition) {
  var x = 35;
}


通过使用块,你期望x只是这个块的局部变量而不会影响到外面的同名变量x。但是在JS中,内部的x是会改变外部的同名变量x的。
不过不用担心,代码质量检测工具( JSHint)能够找出这些问题并提醒你。

全局变量
请尽量确保你使用'var'关键字来定义变量,如果不这么做的话,JS将自动认定这些变量就是全局变量。而这将会导致很多很难检测出来的BUG。
var globalVar = "global variable";
otherGlobalVar = "other global variable";
 
function doStuff() {
  alsoGlobal = "unfortunately, this is also a global variable";
}

上面示例中,所有变量都是定义为全局变量的,globalVar正常, otherGlobalVar就是一个不好定义方式的典型,而 alsoGlobal这种定义方式显然是一个更糟糕的方式,这将导致出无法预测的BUG。
再啰嗦一句,请确保使用 JSHint,可以为你省不少事!

文档对象模型
DOM(文档对象模型)不算是JS独有的东西,但对于JS与网页通信是非常重要的,但悲剧的是为了在不同的浏览器下正常工作,你可能要做非常烦人的工作,一般情况下我就直接建议你使用DOM抽象框架 jQuery.

总结:
我能确信你肯定在开发过程中会碰到更多的JS各个方面的问题,但我希望这篇文章能尽量的讲述到其中大量的典型问题,如果你打算好好研究JS的话,这里有几个非常好的站点值得你去取经:
加载中
0
源来如此
源来如此
不错,很有帮助!
0
jeffsui
jeffsui
恩,答疑解惑,对初学者帮助很大。
0
luobin
luobin
嗯,有很多值得注意到地方
0
xiaoyang0878
xiaoyang0878
嗯 ,还不错。
0
XIAO_CODER
XIAO_CODER
正在学 js  看次文章  感受颇深 感谢LZ
0
s
sbwvtibi
谢谢, 感受颇多
返回顶部
顶部