当前位置： 查字典图书网> 编程> 精通JavaScript> JavaScript登堂入室之作

JavaScript登堂入室之作

小生一直跑 对 精通JavaScript 的书评 发表时间：2012-08-25 01:08:25

       学习JavaScript不久，很多JavaScript的核心概念都不怎么了解，对JacaScript的认知基本都是从W3C上面学到的，多是一些基本的语法。然后从图书馆借来JavaScript基础来看了下，很多内容都是懂得，于是自以为JavaScript的内容大致都已经了解了，只待应用了。
      看了这本书，才知道以前懂的只是皮毛，JavaScirpt的语言特性如闭包、引用等一概不知！现在就简单的谈谈自己学习这本书的收获吧（其实大部分是笔记而已）。
    
1.JavaScript的语言特性
1.1)引用（reference）：是一个指向实际对象的指针，对象包含的一系列属性只是其他对象的引用。需要注意的几点：(a)引用指向的只能是具体的对象，而不是另外一个引用，即单层引用。(b)若修改引用指向的对象，则指向该对象的所有其他引用也跟着改变；若该对象被置为新的对象，原来指向该对象的引用仍然保持指向旧的对象。如：
var a = "test"; //将a置为一个新的字符串对象
var aRef = a; //aRef作为a的引用
a+="ing"; //创建一个新的字符串对象
alert(a != aRef); //a和aRef的值不相等

1.2)函数重载和类型检测
函数重载的判断根据：参数个数和参数类型。参数个数可以根据arguments得到，参数类型可以根据typeof或者constructor判断（当变量类型为Obeject或者Array时，不能用typeof判断）。

1.3)作用域
在JavaScript中，作用域是由函数划分的，函数内部为局部变量，函数外边为全局变量，而所有属于全局作用域的变量都是window对象的property。但是如果变量没有显示定义，就算在函数内定义的，它也是全局变量。如：
function test(){
        f = "test";
}
        
test(); //调用test来设置f的值
        
alert( window.f == "test"); //f现在在全局作用域下

1.4)闭包
闭包即内层的函数可以引用存在于包含它的函数内的变量。闭包能简化代码，让代码清晰。应用之一是函数的curry化。此不赘述。

1.5)上下文对象--this

2.对象
Object对象有如下属性:
(i)constructor：对创建对象的函数的引用（指针）。对于 Object 对象，该指针指向原始的 Object() 函数。
(ii)prototype（原型）:对该对象的对象原型的引用。对于所有的对象，它默认返回 Object 对象的一个实例。所有对象原型的属性都能在该变量的每个实例中找到。

给对象添加方法：
(i)public method:使用prototype属性，这个属性可以作为所有新副本的基引用(base reference)。故public method都在prototype里添加。
(ii)private method:定义一些只让对象内部访问，而外部访问不到的代码。可参考Private Members in JavaScript一文。
(iii)privileged method:通过public method访问private method里面的变量和方法。
(iv)static method:不能用该对象的实例来访问，而只能用该对象本身访问。类似Java中的静态方法。
——————————————————————————————
代码示范：
function Test(string){ //创建一个Test构造函数
                this.s = string;
        }
        
        
        Test.staticMethodShow = function(){
                alert("this is static method show!");
        }
        Test.prototype.show = function(){
                alert("public method show:"+this.s);
        }
        Test.staticMethodShow(); //this is static method show!
        var t = new Test("bbb");
        t.show(); //public method show:bbb
}
——————————————————————————————

可以看到，static method与public method的区别——是否使用prototype属性。
btw：通常我们使用function的prototype属性来创建对象的方法，而用普通方式来创建对象的属性。

3.创建可重用代码
3.1)JavaScript对象的创建与继承使用prototypal inheritance。这种方法的原理是对象的构造函数可以从其他对象中继承方法，原型对象创建后，所有其他的新对象都可以基于这个原型对象来构建。这种继承适用于单继承。
——————————————————————————————
function Person(name){
                this.name = name;
        }
        
        Person.prototype.getName = function(){
                return this.name;
        }
        
        function User(name, password){
                this.name = name;
                this.password = password;
        }
        User.prototype = new Person(); //User继承Person对象的方法
        User.prototype.getPassword = function(){
                return this.password;
        }
        
        var user = new User("aaa", "bbb");
        alert("name:"+user.getName()+" password:"+user.getPassword());
分析：User.prototype = new Person(); User是对User构造函数的引用。new Person()用Person的构造函数创建了新的Person对象，然后把User构造函数的原型置为这个操作的结果。
——————————————————————————————

3.2）命名空间：
var YAH00 = {}; //创建一个默认的、全局的命名空间
YAHOO.util = {}; //使用对象设置一些子命名空间
YAHOO.util.Event = { //创建最终命名空间
        addEventListener:function(){……}
};
YAHOO.util.Event.addEventListener{……}; //调用某个具体命名空间中的函数

使用好命名空间，我们可以创建一个插件架构。可参考Dojo、YUI等。

4.DOM
这里简单说下DOM。有2种遍历DOM的方法：使用节点的parentNode，firstChild及nextSibling属性；使用getElementById()方法和getElementsByTagName()方法。
获取元素内的文本：innerText或者nodeValue
获取元素内的HTML：innerHTML。
其中DOM的增删改此不赘述。

5.事件
5.1)JavaScript事件模型是异步事件模型，不是线程模型。对事件的处理分为两个阶段：捕获和冒泡。
——————————————————————————————
<body>
        <ul>
            <li>
                Home
        </li>
        <li>
                About
        </li>
    </ul>
</body>


onload = function(){
                var li = document.getElementsByTagName("li");
                for(var i = 0; i<li.length; i++){
                        li[i].onmouseover = function(){
                                this.style.backgroundColor = 'green';
                        };
                        
                        li[i].onmouseout = function(){
                                this.style.backgroundColor = 'red';
                        };
                }
}
分析：事件的执行顺序：当用户点击<a>元素，document的点击处理函数先发生，然后是<body>的处理函数，然后是<ul>、<li>的处理函数，一直到<a>元素，这是事件的捕获阶段。一但完成，再以<li><ul><body>和doument的事件处理函数顺序触发，这是事件的冒泡阶段。
JavaScript代码中，我们要注意每次鼠标悬停在<li>上时都会选中2个元素：<li>和它包含的<a>。而这种传统的事件绑定方法只支持冒泡，不支持捕获。即使代码中<a>元素添加了事件监听，事件仍会冒泡到其父元素<li>中的处理函数去，然后继续上升DOM树，直至DOM中所有相应事件处理完为止。那么，怎样才能阻止事件冒泡呢？
——————————————————————————————

5.2)取消事件冒泡
function stopBubble(e){
        if(e && e.stopPropagation){ //W3C方式
                e.stopPropagation();
        }
        else{ //IE方式
                window.event.cancelBubble = true;
        }
}


5.3)事件绑定监听函数：根据捕获和冒泡时处理事件的不同可分为捕获型事件和冒泡型事件。
1.传统绑定：即传统的事件处理函数。但传统绑定只会在事件冒泡中运行，而非捕获和冒泡都能运行；其次一个元素一次只能绑定一个事件处理函数，在使用window.onload时，可能出现意想不到的结果。
2.W3C绑定：document.body.addEventListener('keypress', myKeyPressHandler, false); //为文档的<body>绑定键盘点击事件处理函数
           window.addEventListener('load', function(){……}, false); //为页面绑定一个载入事件处理函数
优点：同时支持事件处理的捕获和冒泡阶段：false(冒泡)，true(捕获)；this关键字引用当前元素；可以绑定多个事件。
缺点：IE不支持。
3.IE绑定：document.body.attachEvent('onkeypress' ,myKeyPressHandler);
          window.attachEvent('load', function(){……});
优点： 可以绑定多个事件。
缺点： 不支持事件捕获；仅IE支持。

此书剩余部分基本讲解了JavaScript的应用，这里就不说了。

顺便吐槽一句：看专业书还是看原版的好，翻译什么的还是少看吧！

有用 4 无用 0

您对该书评有什么想说的？

《精通JavaScript》热门书评

精通JavaScript

书名： 精通JavaScript
作者： [美] John Resig
出版社： 人民邮电出版社
原作名： Pro JavaScript Techniques
译者： 江疆  |  陈贤安
出版年： 2008-4-1
页数： 289
定价： 49.00元
装帧： 平装
丛书： 图灵程序设计丛书
ISBN： 9787115175403