Javascript 学习书 推荐

Aaron Gustafson著,李松峰 李雅雯 等译。感觉绝对是一本值得看的书。感兴趣的朋友可以看一下。下面是我从其中抽出来的javascript常见陷阱和对象的概念整理出来的。希望对大家能有一些帮助。

Ø Javascript语法中常见的陷阱

² 区分大小写

² 单引号和双引号实际上是没有特殊的区别的,这点我是从看了这本书才开始真正的知道,虽然在以前写程序时写过‘'号的字符串形式,但是却没有先觉性的发现“哦,原来这样也可以。”

另外大多数情况下还都是用‘'来表示字符串的,因为XHTML规范要求所有XHTML属性值都用“”括起来。这样混合代码时会很清晰。

² 换行,千万不要忽略这一点。因为如果在一个字符串中你用了回车做换行那么对不起了,浏览器会告诉你我不认识你的字符串。因为它会自动将回车转换成”;“但是为了解决这个问题,还好它提供了一个转义字符作为替代。如下所示:

var='<h2 class=”a”>A list</h2>\

<ol>\

<li class=”a”></li>\

</ol>'

有人会说可以用加号的,这些我知道。用加号作为字符串的操作符。估计是底层进行了+号的重载(?!)。

² 可选的分号和花括号

如果你不相信,我告诉你这是可以的。可以说这点javascript做的还是比较智能的。但是和前述那本书作者一样,我想我们做程序员还是规规矩矩些比较好。

² 重载

有时候或许你会突发奇想曲做一个javascript的重载函数,你会发现这时候竟然只有最后一个可以运行,前面的都没有得到录用机会。这是什么原因呢?

原来,先前的某某已经被后面的给替换掉了。也就是通常说的覆盖。再进一步说就是程序只引用作用域链中的最后一个同名函数。

² 匿名函数

不得不说这个家伙很有用。

² 作用域解析和闭包

这个作用域相信大家都比较熟悉,因为每个编程语言都有这样的概念。

而作用域链是用来描述一种路径的属于,沿着该路径可以确定变量的值(或者当函数被调用时要使用的方法)

闭包是与作用域相关的一个概念,它指的是内部函数即使在外部哈数执行完成并终止以后,仍然可以访问其外部函数的属性。当引用一个变量或方法时,javascript会沿着由对象执行路径构成的作用域链进行解析,查找变量最近定义的值。一旦找到,即使用该值。

² 迭代对象

不要怀疑这用的不好的话,很可能会产生错误。不信就看这一个例子:

var all=document.getElementsByTagName(‘*');

for(i in all){

//对all[i]元素进行操作。

}

由于返回的会分别等于length、item和namedItem,而这个很可能会导致代码中出现意外错误。

这时要做一下处理。用hasOwnProperty进行属性过滤,这个函数在对象的属性或方法是非继承的时返回true。方法如下:

var all=document.getElementsByTagName(‘*');

for(i in all){

if(!all.hasOwnProperty(i)){continue;}

//对all[i]元素进行操作。

}

² 函数的调用和引用。

注意了,这是不同的,调用会执行,引用只会给变量一个copy(好像可以这样理解吧?)

看下这个:

var foo=exampleFunction();

var foo=exampleFunction;

这两句式不一样的。前一个是执行exampleFunction这个函数并将返回值赋给变量foo,而后一个却是将exampleFunction这个函数的引用赋给foo。

Ø Javascript对象

属性和方法的概念相信大家都晓得。下面讲下javascript中的对象和其中的玄奥妙义(讲的跟武侠似的)。

1. 继承

Javascript的继承让我很奇怪,但是想过之后感觉还是有道理的。而且和其他的还是一样的思想。其实javascript就是做了一个复制的操作。闲话不说看一个例子相信大家都会清楚了。

//创建一个person对象的实例

var person={};

person.getName=function(){……};

person.getAge=function(){……};

//创建一个employee对象的实例

var employee={};

employee.getTitle=function(){……};

enployee.getSalary=function(){……};
//从person对象中继承方法

employee.getName=person.getName;

employ.getAge=person.getAge;

2. 创建自己的对象

有两种方式可以创建自己的对象:

第一种:var myObject =new Object();

第二种:var myObject={};//是第一种的简写形式。实际上面已经用到了。

3. 创建构造函数

第一种:function myConstructor(a){

//代码

}

不要惊讶,想象前面说的javascript中到处都是对象,虽然有些夸张。这个函数一时一个对象。

第二种:

或许聪明的读者已经猜出来了,就是函数定义的另外两种类型:

var myConstructor=function(a){};

第三种也一起写出来吧:var myConstructor=new Function(‘a',/*某些代码*/);

不过对于这种方式,因为会导致性能问题,所以还是用function比较妥当。

最后给个书中的例子:

function myConstructor(message){

alert(message);

this.myMessage=message;

}

var myObject =new myConstructor(‘Instantiating myObject!');

4. 添加静态方法

var myObject={};

//添加属性

myObject.name=”Jeff”;

//添加方法

myObject.alertName=function(){

alert(this.name);

}

//执行方法

myObject.alertName();

相信大家都能看明白,不说了。

5. 想原型中添加公有方法

添加公有方法的方式是用prototype,注意这里的prototype可不是那个js库。

//创建构造函数

function myConstructor(message){

alert(message);

this.myMessage=message;

}

//添加一个公有方法

myConstructor.prototype.clearMessage=function(string){

this.myMessage+=''+string;

}

这里面要提的一点是 构造函数中凡是以var开头的变量全部是私有变量,不是以.号和prototype添加而是直接写入构造函数中的为私有函数。

6. 最后提一下对象字面量

对象字面量对于代码的重构,冗余度的减小都很有帮助。所以如果可能的话最好用这种

看下下面的例子:

var myObject={

propertyA:'value',

propertyB:'value',

methodA:function(){}

}

不得不同意作者的观点,这种方式很优雅。

怎么样?是不是对Javascript中的对象和陷阱有了一些基本的认识?希望这篇文章对你有所帮助。

(0)

相关推荐

  • 荐书|您有一份JavaScript书单待签收

    前言 凡是能够用JavaScript来写的应用,最终都必将用JavaScript来写,Jeff Atwood如是说,此定律大概意味着未来将会成为JavaScript的天下? 不管JavaScript最终能否征服世界,我们都不可忽视它在前端开发中的重要作用,因此下面小编给大家准备了一份JavaScript书单~ 一.<你不知道的JavaScript> 推荐指数:五颗星 推荐理由:这是相当好的一本书,对于初学者入门,可以更好地搞清楚作用域.原型等知识点,对于有相关经验的同学,也会对JS的语法有更深

  • 从零学JS之你需要了解的几本书

    初级读物: <JavaScript高级程序设计>:一本非常完整的经典入门书籍,被誉为JavaScript圣经之一,详解的非常详细,最新版第三版已经发布了,建议购买.<JavaScript王者归来>百度的一个Web开发项目经理写的,作为初学者准备的入门级教程也不错. 中级读物: <JavaScript权威指南>:另外一本JavaScript圣经,讲解的也非常详细,属于中级读物,建议购买.<JavaScript.The.Good.Parts>:Yahoo大牛,J

  • Javascript 学习书 推荐

    Aaron Gustafson著,李松峰 李雅雯 等译.感觉绝对是一本值得看的书.感兴趣的朋友可以看一下.下面是我从其中抽出来的javascript常见陷阱和对象的概念整理出来的.希望对大家能有一些帮助. Ø Javascript语法中常见的陷阱 ² 区分大小写 ² 单引号和双引号实际上是没有特殊的区别的,这点我是从看了这本书才开始真正的知道,虽然在以前写程序时写过''号的字符串形式,但是却没有先觉性的发现"哦,原来这样也可以." 另外大多数情况下还都是用''来表示字符串的,因为XHT

  • 深入理解JavaScript函数参数(推荐)

    前面的话 javascript函数的参数与大多数其他语言的函数的参数有所不同.函数不介意传递进来多少个参数,也不在乎传进来的参数是什么数据类型,甚至可以不传参数. arguments javascript中的函数定义并未指定函数形参的类型,函数调用也未对传入的实参值做任何类型检查.实际上,javascript函数调用甚至不检查传入形参的个数 function add(x){ return x+1; } console.log(add(1));//2 console.log(add('1'));/

  •  javascript学数组中的foreach方法和some方法

    目录 一.foreach方法 1直接vs打开 2代码部分 二.some方法 1直接vs打开 2代码部分 3总结 在我们的日常开发中 不免会有很多需要处理数据的方法 本节主要说一说foreach和some的使用​​不多说把代码编辑器打开​​ 一.foreach方法 1直接vs打开 2代码部分 var geyao = ['歌谣', '很帅', '很强']   geyao.forEach((currentValue, index, arr, thisValue) => {     console.lo

  • 5款JavaScript代码压缩工具推荐

    推荐5款优秀的JavaScript代码压缩工具.代码压缩(也称代码最小化)是一个从源代码中消除所有不必要的字符的过程,包括删除所有不必要的空格字符.新行字符.评论等.代码压缩不影响源代码的功能,却提高加载时间(和web应用程序的性能),因为,要下载的文件的大小减少了. 以下是5款优秀的JavaScript代码压缩工具,我相信,他们定可以将你的脚本变得更轻巧,代码性能更出色. 一.YUI Compressor Yahoo出品!YUI Compressor是一个用Java编写,帮你最小化JavaSc

  • 最全的Javascript编码规范(推荐)

    1.嵌入规则 Javascript程序应该尽量放在.js的文件中,需要调用的时候在页面中以<script src="filename.js">的形式包含进来.Javascript代码若不是该页面专用的,则应尽量避免在页面中直接编写Javascript代码. 2.对齐缩进与换行 a) 缩进 在同一系统中应采用同一种缩进标准,本文提倡缩进大小为4个空格.各编译器对Tab键所代替的空白大小定义不同.建议在设置开发环境时,将编辑器里的Tab快捷键重新设置成4个空格.多数编译器提供了

  • 8个简单部分开启Java语言学习之路 附java学习书单

    之前为大家推荐了java语言阅读书籍,下面为大家介绍从哪几个方面开始学习java语言,具体内容如下 1. Java语言基础  谈到Java语言基础学习的书籍,大家肯定会推荐Bruce Eckel的<Thinking in Java>.它是一本写的相当深刻的技术书籍,Java语言基础部分基本没有其它任何一本书可以超越它.该书的作者Bruce Eckel在网络上被称为天才的投机者,作者的<Thinking in C++>在1995年曾获SoftwareDevelopment Jolt

  • IE和Firefox的Javascript兼容性总结[推荐收藏]

    长久以来JavaScript兼容性一直是Web开发者的一个主要问题.在正式规范.事实标准以及各种实现之间的存在的差异让许多开发者日夜煎熬.为此,主要从以下几方面差异总结IE和Firefox的Javascript兼容性: 一.函数和方法差异: 二.样式访问和设置: 三.DOM方法及对象引用: 四.事件处理: 五.其他差异的兼容处理. 一.函数和方法差异 1. getYear()方法 [分析说明]先看一下以下代码: 复制代码 代码如下: var year= new Date().getYear();

  • 史上最为详细的javascript继承(推荐)

    前言 为大家分享js中最常见最详细的继承方式,接下来将一下面的几个维度进行展示说明 文章有点长,请耐心阅读

  • 分享50个超级有用的JavaScript单行代码(推荐!)

    目录 前言 日期 字符串 工具 总结 前言 在这篇文章中,我列出了一个系列的50个 JavaScript 单行代码,它们在使用 vanilla js(≥ ES6)进行开发时非常有用.它们也是使用该语言在最新版本中为我们提供的所有功能来解决问题的优雅方式. 我将它们分为以下5大类: 日期 字符串 数字 数组 工具 事不宜迟,我马上开始的,我希望你发现他们对你有帮助! 日期 1. 日期是否正确(有效) 此方法用于检查给定日期是否有效 const isDateValid = (...val) => !

  • 浅析Javascript原型继承 推荐第1/2页

    JS没有提供所谓的类继承,据说在2.0中要加入这种继承方式,但是要所有浏览器都实现2.0的特性那肯定又得N多年.昨天看了crockford 的一个视频,里面讲解了一下JS的继承方式,按照PPT里面说的,一共分了三类:Prototypal,pseudoclassical,Parasitic Inheritance. 下面主要介绍一下原型继承:When a function object is created, it is given a prototype member which is an o

随机推荐