XIAOSUO 记录个人学习的足迹

摘要：我们再来看看function与object的超然结合吧。 在面向对象的编程世界里，数据与代码的有机结合就构成了对象的概念。自从有了对象，编程世界就被划分成两部分，一个是对象内的世界，一个是对象外的世界。对象天生具有自私的一面，外面的世界未经允许是不可访问对象内部的。对象也有大方的一面，它对外提供属性和方法，也为他人服务。不过，在这里我们要谈到一个有趣的问题，就是“对象的自我意识”。 可能对许多程序员来说，这的确是第一次听说。不过，请君看看C++、C#和Java的this，DELPHI的self，还有VB的me，或许你会恍然大悟！当然，也可能只是说句“不过如此”而已。 然而，就在对象将世界划分为内外两部分的同时，对象的“自我”也就随之产生。“自我意识”是生命的最基本特征！正是由于对象这种强大的生命力，才使得编程世界充满无限的生机和活力。 JavaScript中也有this，但这个this却与C++、C#或Java等语言的this不同。一般编程语言的this就是对象自己，而 JavaScript的this却并不一定！this可能是我，也可能是你，可能是他，反正是我中有你，你中有我，这就不能用原来的那个“自我”来理解 JavaScript这个this的含义了。为此，我们必须首先放下原来对象的那个“自我”。 我们来看下面的代码： function WhoAmI()       //定义一个函数WhoAmI {    alert(I'm + this.name + of + typeof(this)); }; WhoAmI();   //此时是this当前这段代码的全局对象，在浏览器中就是window对象，其name属性为空字符串。输出：I'm of object var BillGates = {name: Bill Gates}; BillGates.WhoAmI = WhoAmI;  //将函数WhoAmI作为BillGates的方法。 BillGates.WhoAmI();         //此时的this是BillGates。输出：I'm Bill Gates of object var SteveJobs = {name: Steve Jobs}; SteveJobs.WhoAmI = WhoAmI;  //将函数WhoAmI作为SteveJo…… 阅读全文

摘要：先来说说函数的对象化能力。 任何一个函数都可以为其动态地添加或去除属性，这些属性可以是简单类型，可以是对象，也可以是其他函数。也就是说，函数具有对象的全部特征，你完全可以把函数当对象来用。其实，函数就是对象，只不过比一般的对象多了一个括号“()”操作符，这个操作符用来执行函数的逻辑。即，函数本身还可以被调用，一般对象却不可以被调用，除此之外完全相同。请看下面的代码： function Sing() { with(arguments.callee) alert(author + ： + poem); }; Sing.author = 李战; Sing.book = 《悟透Javascript》; Sing(); Sing.author = David Flanagan; Sing.book = 《JavaScript权威指南》; Sing(); 在这段代码中，Sing函数被定义后，又给Sing函数动态地增加了author和book属性。将author和book属性设为不同的作者和著作，在调用Sing()时就能显示出不同的结果。 好了，以上的讲述，我们应该算理解了function类型的东西都是和object类型一样的东西，这种东西被我们称为“对象”。我们的确可以这样去看待这些“对象”，因为它们既有“属性”也有“方法”嘛。但下面的代码又会让我们产生新的疑惑： var anObject = {}; //一个对象 anObject.aProperty = Property of object; //对象的一个属性 anObject.aMethod = function(){alert(Method of object)}; //对象的一个方法 //主要看下面： alert(anObject[aProperty]); //可以将对象当数组以属性名作为下标来访问属性 anObject[aMethod](); //可以将对象当数组以方法名作为下标来调用方法 for( var s in anObject) //遍历对象的所有属性和方法进行迭代化处理 alert(s + is a + typeof(anObject[s])); 同样对于function类型的对象也是一样： var aFunctio…… 阅读全文

摘要：任何程序都会在一个原始的环境中开始运行，这个原始的环境就被称为全局环境。全局环境中包含了一些预定义的元素，这些元素对于我们的程序来说是自然存在的，它们本来就在那儿了，我们可以拿来使用即可。 在javascript里的全局环境就是一个对象，这个对象是就是我们熟知的window对象。对于全局的javascript语句来说，window对象就相当于当前作用域。我们写下：var myName = xiaosuo； 就是定义了window作用域的一个变量，而我们写下：myName = xiaosuo； 就是定义了window对象的一个属性。 这里，“window作用域的一个变量”和“window对象的一个属性”几乎等价。对于全局的javascript语句来说，加不加var都无所谓，不过对于一个函数内的语句，有没有var就要小心了。 var yourName = horace; myName = xiaosuo; alert(myName + and + yourName);        //输出xiaosuo and horace ChangeNames();        //调用改名函数 function ChangeNames() {    alert(Your old name is + yourName);        //输出Your old name is undefined    alert(Ny old name is + myName);            //输出My old name is xiaosuo    var yourName = anlian;    myName = liuzi;    alert(myName + and + yourName);        //输出liuzi and anlian }; alert(myName + and + yourName);        //输出liuzi and horace     显然用var修饰的yourName标识符在函数内外是两个东西，值得注意的是，看ChangeNames函数中的第一句，我们本是希望输出最外面哪个yourName的值，但此时输出的却是undefined！而第二句输出myName又是我们期望的值。原因是var定义…… 阅读全文

摘要：JavaScript的代码就只有function一种形式，function就是函数的类型。当我们写下一个函数的时候，只不过是建立了一个function类型的实体而已。请看下面的程序： function myfunc()   {      alert(hello);   };   alert(typeof(myfunc));   这个代码运行之后可以看到typeof(myfunc)返回的是function。以上的函数写法我们称之为“定义式”的，如果我们将其改写成下面的“变量式”的，就更容易理解了： var myfunc = function ()   {      alert(hello);   };   alert(typeof(myfunc));   这里明确定义了一个变量myfunc，它的初始值被赋予了一个function的实体。因此，typeof(myfunc)返回的也是function。其实，这两种函数的写法是等价的，除了一点细微差别，其内部实现完全相同。也就是说，我们写的这些JavaScript函数只是一个命了名的变量而已，其变量类型即为function，变量的值就是我们编写的函数代码体。 聪明的你或许立即会进一步的追问：既然函数只是变量，那么变量就可以被随意赋值并用到任意地方啰？我们来看看下面的代码： var myfunc = function ()   {      alert(hello);   };   myfunc(); //第一次调用myfunc，输出hello     myfunc = function ()   {      alert(yeah);   };       myfunc(); //第二次调用myfunc，将输出yeah 阅读全文

摘要：object就是对象的类型。在JavaScript中不管多么复杂的数据和代码，都可以组织成object形式的对象。但JavaScript却没有 “类”的概念！ 我们先来看一段JavaScript程序： var life = {};　　//光溜溜的生命对象   for(life.age = 1; life.age = 3; life.age++)   {      switch(life.age)     {          case 1: life.body = 卵细胞;   //增加body属性                life.say = function(){alert(this.age+this.body)};                  break;          case 2: life.tail = 尾巴;   //增加tail属性                life.gill = 腮;    //增加gill属性                life.body = 蝌蚪;                  life.say = function(){alert(this.age+this.body+-+this.tail+,+this.gill)};                  break;          case 3: delete life.tail;   //删除tail属性                delete life.gill;   //删除gill属性                life.legs = 四条腿;   //增加legs属性                life.lung = 肺;      //增加lung属性                life.body = 青蛙;                  life.say = function(){alert(this.age+this.body+-+this.legs+,+this.lung)};                  break;     };      life.say();   //调用say方法，此方法逻辑每次都会动态改变 };  …… 阅读全文

摘要：编程世界里只存在两种基本元素，一个是数据，一个是代码。要理解JavaScript，你得首先放下对象和类的概念，回到数据和代码的本原。 JavaScript中的数据很简洁的。简单数据只有 undefined, null, boolean, number和string这五种，而复杂数据只有一种，即object。这就好比中国古典的朴素唯物思想，把世界最基本的元素归为金木水火土，其他复杂的物质都是由这五种基本元素组成。 JavaScript中的代码只体现为一种形式，就是function。 **注意：**以上单词都是小写的，不要和Number, String, Object, Function等JavaScript内置函数混淆了。 先说说简单数据类型吧。 undefined： 代表一切未知的事物，啥都没有，无法想象，代码也就更无法去处理了。 注意：typeof(undefined) 返回也是 undefined。可以将undefined赋值给任何变量或属性，但并不意味了清除了该变量，反而会因此多了一个属性。 null： 有那么一个概念，但没有东西。无中似有，有中还无。虽难以想象，但已经可以用代码来处理了。 注意：typeof(null)返回object，但null并非object，具有null值的变量也并非object。 boolean： 是就是，非就非，没有疑义。对就对，错就错，绝对明确。既能被代码处理，也可以控制代码的流程。 number： 线性的事物，大小和次序分明，多而不乱。便于代码进行批量处理，也控制代码的迭代和循环等。 注意：typeof(NaN)和typeof(Infinity)都返回number 。NaN参与任何数值计算的结构都是NaN，而且 NaN != NaN 。Infinity / Infinity = NaN 。 **string： **　　面向人类的理性事物，而不是机器信号。人机信息沟通，代码据此理解人的意图等等，都靠它了。 为了进一步简化编程，Javascript还在这些简单数据之上，再规定了一些特殊含义。这些特殊含义又可以使得Javascript的语句写得更简洁。例如，undefined、null、 、0这四个值转换为逻辑值时就是false，除这四个家伙再加上false本身外，其他任何东西转换为逻辑值时都是true。有趣的是underfine…… 阅读全文

摘要：源码 /* ******************************************************************* */ /*   CSS FUNCTIONS                                                     */ /* ******************************************************************* */ var CSS = (function() {    var css = {};    // 转换的RGB字符串的形式“的RGB （ 255 ， 255 ， 255 ） ”到“ #ffffff ”    css.rgb2hex = function(rgbString) {        if (typeof (rgbString) != string || !defined(rgbString.match)) { return null; }        var result = rgbString.match(/^\s*rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*/);        if (result == null) { return rgbString; }        var rgb = +result[1] 16 | +result[2] 8 | +result[3];        var hex = ;        var digits = 0123456789abcdef;        while (rgb != 0) {            hex = digits.charAt(rgb 0xf) + hex;            rgb = 4;       }        while (hex.length 6) { hex = '0' + hex; }        return # + hex;   };    // 转换字符样式    css.hyphen2camel = function(property) {        if (!defined(property) || …… 阅读全文

摘要：源码 /* ******************************************************************* */ /*   EVENT FUNCTIONS                                                   */ /* ******************************************************************* */ var Event = (function() {    var ev = {};    //阻止事件冒泡    ev.stopBubble = function(e) {        // 如果传入了事件对象，那么就是非IE浏览器        if (e)        // 因此它支持W3C的stopPropagation            e.stopPropagation();        else        // 否则，我们得使用IE的方式取消事件冒泡            window.event.cancelBubble = true;   };    //防止发生默认浏览器行为    ev.stopDefault = function(e) {        // 防止默认浏览器行为（W3C）        if (e) e.preventDefault();        // IE中防止浏览器行为的捷径        return false;   };    //    // 由 Dean Edwards 所编写的addEvent/removeEvent 2005    // 由Tino Zijdel整理    // http://dean.edwards.name/weblog/2005/10/add-event/    ev.addEvent = function(element, type, handler) {        //为每个事件处理函数赋予一个独立的ID        if (!handler.$$guid) handler.$$guid = ev.addEvent.guid++;        //…… 阅读全文

摘要：源码 /* ******************************************************************* */ /*   DOM FUNCTIONS                                                     */ /* ******************************************************************* */ var DOM = (function() {    var dom = {};    //查找相关元素的前兄弟元素    dom.prev = function(elem) {        do {            elem = elem.previousSibling;       } while (elem elem.nodeType != 1);        return elem;   };    //查找相关元素的后兄弟元素    dom.next = function(elem) {        do {            elem = elem.nextSibling;       } while (elem elem.nodeType != 1);        return elem;   };    //查找第一个子元素    dom.first = function(elem) {        elem = elem.firstChild;        return elem elem.nodeType != 1 ? nextSibling(elem) : elem;   };    //查找最后一个子元素    dom.last = function(elem) {        elem = elem.lastChild;        return elem elem.nodeType != 1 ? prevSibling(elem) : elem;   };    //查找父元素    dom.parent = function(elem, num) {        num = nu…… 阅读全文

摘要：源码 /** * Copyright (c)2008 xiaosuo */ /* ******************************************************************* */ /*   UTIL FUNCTIONS                                                   */ /* ******************************************************************* */ var Util = { 'VERSION':1.1 }; //获取id function id(name) {    return document.getElementById(name); } //获取指定元素 function tag(name, elem) {    // 如果不提供上下文元素，则遍历整个文档    return (elem || document).getElementsByTagName(name); } //判断对象是否存在 function defined(o) {    return (typeof (o) != undefined); } /* ******************************************************************* */ /*   OBJECT FUNCTIONS                                                 */ /* ******************************************************************* */ var Obj = (function() {    var object = {};    //检查是否是对象    object.isObject = function(o) {        return (o != null typeof (o) == object defined(o.constructor) o.constructor == Object !defined(o.nodeName)…… 阅读全文