JavaScrip学习笔记

本文为本人原创,转载请注明作者和出处。
另:本文针对的是ECMAScript 5标准。

学习编程有这么一种说法,最难学的是你的第二门编程语言。因为第一门编程语言的语法、思维乃至内在的思想内核深深地影响着你学习第二门语言。

正在学习JavaScript的我对这样的说法大致赞同。虽然最早学过c语言,但Java才是我的第一门掌握的比较深入的语言。Java和JavaScript看着名字挺像,但实际上是差别挺大的两门语言,并且JavaScript和其他基于类的面向对象语言也有很大不同。下面会记录一下作为一个Java程序员在学习JavaScrip的时候觉得比较关键的地方。

变量

Java是强类型语言,变量都是强类型的,而JavaScript是弱类型语言,变量没有类型。这是两者最大的不同点之一。都说习惯了Java这种强类型语言的人开始使用弱类型语言会有种从如释重负的感觉,但我想大多数人会觉得很不习惯而不是很爽。尽管在JavaScript中,一个变量可以保存任意类型的数据,但我们还是尽量不要随意去改变一个变量的数据类型。

数据类型

JavaScript包含五种基本数据类型和一种引用数据类型。基本数据类型为:number,boolean,string,null,undefined;引用数据类型为object。

很多像Java这样面向对象的语言把string当作引用数据类型,但在JavaScript中它和number一样是基本数据类型,这样似乎更符合人的思维方式?JavaScript中的string既可以用双引号括起来,可以用单引号。

由于JavaScript中声明对象的时候并不会指定对象的类型,因此需要undefined这种数据类型来代表一个变量还没有被定义类型。

通过typeof关键字可以来查看一个变量的数据类型。对于引用数据类型,和Java一样通过instanceof关键字可以查看其“类型”。

循环语句

JavaScript支持以下四种循环语句:

  • for - 循环代码块一定的次数
  • for/in - 循环遍历对象的属性
  • while - 当指定的条件为 true 时循环指定的代码块
  • do/while - 同样当指定的条件为 true 时循环指定的代码块

其他都没什么特别,for/in和Java中后来的foreach循环一样,同样是对数组中每一个元素进行操作。

for (property in window) {
  document.write(property+"<br/>")
}

如上的代码就是遍历window对象中的每一个属性,大家可以看看window对象里有多少属性哦。

方法

在JavaScript中方法实际上也是一种对象,而不像Java中方法只是对象的功能。在JavaScript中没有方法重载,但不管在定义方法的时候有几个参数,调用参数的时候可以传递任意个参数。这是因为所有参数传进来时是被当作一个数组,这个数组的名字就是arguments。虽然不支持重载,但我们可以通过如下方法来实现函数重载:

function add(){
  if(arguments.length == 2) {
    return arguments[0] + arguments[1];
  } else if(arguments.length == 3){
    return arguments[0] + arguments[1] + arguments[2];
  }
}
alert(add(1,2));//输出3
alert(add(1,2,3));//输出6

块级作用域

JavaScript中是没有块级作用域这一概念的。而在有这一概念的语言中,if和for语句,代码块中的代码执行完之后,在其中定义的变量就会被回收而无法使用。在JavaScript中不会出现这样的情况。这也是需要注意的一点。

创建类型和对象

JavaScript没有类的概念,如何去自定义类型并创建对象呢?工厂模式是一种方法,但工厂模式得到的对象都是直接继承Object,彼此直接没有关系。因此可以使用自定义构造函数来批量创建一类对象。

function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype = {
    constructor : Person,
    sayName : function() {
        alert(this.name);
    }
}

var person1 = new Person("Jack",18);
var person2 = new Person("Rose",16);
document.write(person1.name+":"+person1.age);
document.write(person2.name+":"+person2.age);
person1.sayName();
person2.sayName();

来看一段示例代码。这段代码组合使用了构造函数模式和原型模式,构造函数定义实例属性,原型模式定义方法和共同的属性。这也是现在js最常见的自定义类型的方式。

先看构造函数,几乎与Java中的构造函数一模一样,不需要return,类型名首字母大写。在构造函数中也是可以定义函数的,但是在JavaScript中函数也是对象,为了避免重复创建对象,因此把函数放到外部或者原型中是更好地选择。

再来看原型模式,其实就是定义Person的prototype属性,定义构造函数为上面的Person,并定义一个公共的方法sayName。prototype中的属性方法是所有实例化共有的,因此相当于Java中加了static的属性和方法。和static关键字一对比的话,就很容易理解了。

学了创建类型和对象之后,我依然感到很惆怅,继承和方法重写怎么办?而且JavaScript还没有方法重载。以前学Java的时候只知道封装、继承、多态是面向对象的基础,但不明白为什么它们为何如此重要。学了新的面向对象语言之后,对封装、继承、多态这些理解更深了。

继承

越学越觉得JavaScript比较奇怪,无怪它被称之为最让人“misunderstanding”的语言之一了。身为面向对象语言却居然连继承的关键词都没有。那么JavaScript是如何实现继承的呢————通过原型链。

function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype = {
    constructor : Person,
    sayName : function() {
        alert(this.name);
    }
}

function Employee(name, age, salary) {
    this.name = name;
    this.age = age;
    this.salary = salary;
}

Employee.prototype = new Person();
Employee.prototype.sayName = function() {
    alert("I'm a worker name of " + this.name)
}

var employee = new Employee("zhangsan", 23, 12000);
document.write(employee.name+":"+employee.age+":"+employee.salary);
employee.sayName();

这里定义一个Employee类型继承于Person对象,增加了属性salary,并重写了sayName。其他的还好理解,之一Employee.prototype = new Person()这一句实现继承的关键代码有点费解。

原型链的基本思想是让一个引用类型继承另一个引用类型的属性和方法。每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,这里我们让Employee的原型对象等于一个Person的对象的实例。此时Employee的原型对象就包含了指向Person原型对象的指针,Person的原型也包含了指向Employee构造函数的指针。如果Person也继承例如Animal这样的类型,这个原型的指向关系就会层层递进,形成实例与原型的链条,从而在JavaScript中实现继承。

当然JavaScript中还有借用构造函数、组合继承的方式实现继承,这里就不多写了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,772评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,458评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,610评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,640评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,657评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,590评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,962评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,631评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,870评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,386评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,969评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2 342

推荐阅读更多精彩内容

  • 博客内容:什么是面向对象为什么要面向对象面向对象编程的特性和原则理解对象属性创建对象继承 什么是面向对象 面向对象...
    _Dot912阅读 1,398评论 3 12
  • 本章内容 理解对象属性 理解并创建对象 理解继承 面向对象语言有一个标志,那就是它们都有类的概念,而通过类可以创建...
    闷油瓶小张阅读 839评论 0 1
  • 《我们在这儿虚荣》 我们在这儿虚荣 鲜花、呐喊与热口气 都是急流 在崎岖的路上 在血液里翻腾 在大道与幽径之间,通...
    诗人周寒树阅读 281评论 0 0
  • 今晚去附近的电影院看了爱宠大机密,一部笑点满满的电影。 讲的是关于宠物与人类之间的话题。主人翁是一只可爱的小不点小...
    饼干iccy阅读 684评论 0 0
  • 文/傲娇哇 我是一个不学无术男生,沉浸在游戏中无法自拔。整天打LOL忘了吃饭,忘了睡觉,忘了上课,甚至忘了她。 -...
    傲娇哇阅读 489评论 3 10