`

悟透Javascript

阅读更多

感觉挺经典的js文章,传个附件。

JavaScript 中没有‘类’,类已化于无形,与对象融为一体。正是由于放下了‘类’这个概念,JavaScript的对象才有了其他编程语言所没有的活力。 ”这句看了很有感悟,也许这就是Javascript强大之所在吧。Javascript因此具有了动态增删对象功能的能力。

 

function myfunc(){
	alert("hello");
} 
myfunc();//这里调用myfunc,输出 yeah 而不是 hello
function myfunc(){
	alert("yeah");
}
myfunc();//这里调用myfunc,当然输出yeah

JavaScript 执行引擎并非一行一行地分析和执行程序,而是一段一段地分析执行 的。而且,在同一段程序的分析执行中,定义式的函数语句会被提取出来优先执行。函数定义执行完之后,才会按顺序执行其他语句代码。也就是说,在第一次调用myfunc之前,第一个函数语句定义的代码逻辑,已被第二个函数定义语句覆盖了。所以,两次都调用都是执行最后一个函数逻辑了。

 

如果把这个 JavaScript 代码分成两段,例如将它们写在一个 html 中,并用<script/>标签将其分成这样的两块:

<script> 
    function myfunc () 
    { 
        alert("hello"); 
    }; 
    myfunc(); //这里调用myfunc,输出 hello 
</script> 
 
<script> 
    function myfunc () 
    { 
        alert("yeah"); 
    };     
    myfunc(); //这里调用myfunc,输出 yeah 
</script> 

 这时,输出才是各自按顺序来的,也证明了JavaScript的确是一段段地执行的
 
    一段代码中的定义式函数语句会优先执行,这似乎有点象静态语言的编译概念。所以,这一特征也被有些人称为:JavaScript的“预编译”。

 

大多数情况下,我们也没有必要去纠缠这些细节问题。只要你记住一点:JavaScript 里的代码也是一种数据,同样可以被任意赋值和修改的,而它的值就是代码的逻辑 。只是,与一般数据不同的是,函数是可以被调用执行的

 

JavaScript 函数的神奇之处还体现在另外两个方面:一是函数 function类型本身也具有对象化的能力 ,二是函数function与对象 object超然的结合能力

 

在JavaScript函数中,你只能把this看成当前要服务的“这个”对象。this是一个特殊的内置参数,根据this参数,您可以访问到“这个”对象的属性和方法,但却不能给this参数赋值。在一般对象语言中,方法体代码中的this可以省略的,成员默认都首先是“自己”的。但JavaScript却不同,由于不存在“自我”,当访问“这个”对象时,this不可省略!

 

我们已经知道,用 var anObject = new aFunction() 形式创建对象的过程实际上可以分为三步:
第一步是建立一个新对象第二步将该对象内置的原型对象设置为构造函数prototype引用的那个原型对
第三步就是将该对象作为this参数调用构造函数,完成成员设置等初始化工作 。对象建立之后,对象
上的任何访问和操作都只与对象自身及其原型链上的那串对象有关,与构造函数再扯不上关系了。换句话
说,构造函数只是在创建对象时起到介绍原型对象和初始化对象两个作用

 

那么,我们能否自己定义一个对象来当作原型,并在这个原型上描述类,然后将这个原型设置给新创建
的对象,将其当作对象的类呢?我们又能否将这个原型中的一个方法当作构造函数,去初始化新建的对象
呢?例如,我们定义这样一个原型对象:

var Person =  //定义一个对象来作为原型类
    {
        Create: function(name, age)  //这个当构造函数
        {
  28

            this.name = name;
            this.age = age;
        },
        SayHello: function()  //定义方法
        {
            alert("Hello, I'm " + this.name);
        },
        HowOld: function()  //定义方法
        {
            alert(this.name + " is " + this.age + " years old.");
        }
    }; 
 

    这个JSON形式的写法多么象一个C#的类啊!既有构造函数,又有各种方法。如果可以用某种形式来
创建对象,并将对象的内置的原型设置为上面这个“类”对象,不就相当于创建该类的对象了吗?
 
    但遗憾的是,我们几乎不能访问到对象内置的原型属性!尽管有些浏览器可以访问到对象的内置原型,
但这样做的话就只能限定了用户必须使用那种浏览器。这也几乎不可行。
 
    那么,我们可不可以通过一个函数对象来做媒介,利用该函数对象的prototype 属性来中转这个原型,
并用new操作符传递给新建的对象呢?
 
    其实,象这样的代码就可以实现这一目标:

function anyfunc(){};           //定义一个函数躯壳
anyfunc.prototype = Person;     //将原型对象放到中转站 prototype
var BillGates = new anyfunc();  //新建对象的内置原型将是我们期望的原型对象 
 

    不过,这个 anyfunc 函数只是一个躯壳,在使用过这个躯壳之后它就成了多余的东西了,而且这和直
接使用构造函数来创建对象也没啥不同,有点不爽。

    可是,如果我们将这些代码写成一个通用函数,而那个函数躯壳也就成了函数内的函数,这个内部函数
不就可以在外层函数退出作用域后自动消亡吗?而且,我们可以将原型对象作为通用函数的参数,让通用
函数返回创建的对象。我们需要的就是下面这个形式:

function New(aClass, aParams)    //通用创建函数
    {
        function new_()     //定义临时的中转函数壳
        {
            aClass.Create.apply(this, aParams);   //调用原型中定义的的构造函数,中转构造逻辑及构造参数
        };
        new_.prototype = aClass;    //准备中转原型对象
        return new new_();          //返回建立最终建立的对象
    };
    
    var Person =        //定义的类
    {
        Create: function(name, age)
        {
            this.name = name;
            this.age = age;
        },
        SayHello: function()
        {
            alert("Hello, I'm " + this.name);
        },
        HowOld: function()
        {
            alert(this.name + " is " + this.age + " years old.");
        }

    };
    
    var BillGates = New(Person, ["Bill Gates", 53]);  //调用通用函数创建对象,并以数组形式传递构造参数
    BillGates.SayHello();
    BillGates.HowOld();
 
    alert(BillGates.constructor == Object);     //输出:true 
 

    这里的通用函数 New()就是一个“语法甘露”!这个语法甘露不但中转了原型对象,还中转了构造函数
逻辑及构造参数。
 
    有趣的是,每次创建完对象退出New函数作用域时,临时的new_函数对象会被自动释放。由于new
_的 prototype 属性被设置为新的原型对象,其原来的原型对象和 new_之间就已解开了引用链,临时函
数及其原来的原型对象都会被正确回收了。上面代码的最后一句证明,新创建的对象的constructor属性
返回的是 Object 函数。其实新建的对象自己及其原型里没有 constructor 属性,那返回的只是最顶层原
型对象的构造函数,即Object。

 

当然,这个代码仅仅展示了“语法甘露”的概念。我们还需要多一些的语法甘露,才能实现用简洁而优雅
的代码书写类层次及其继承关系。好了,我们再来看一个更丰富的示例吧:

//语法甘露:
    var object =    //定义小写的 object 基本类,用于实现最基础的方法等
    {
        isA: function(aType)   //一个判断类与类之间以及对象与类之间关系的基础方法
        {
            var self = this;

            while(self)
            {
                if (self == aType)
                  return true;
                self = self.Type;
            };
            return false;
        }
    };
    
    function Class(aBaseClass, aClassDefine)    //创建类的函数,用于声明类及继承关系
    {
        function class_()   //创建类的临时函数壳
        {
            this.Type = aBaseClass;    //我们给每一个类约定一个 Type属性,引用其继承的类
            for(var member in aClassDefine)
                this[member] = aClassDefine[member];    //复制类的全部定义到当前创建的类
        };
        class_.prototype = aBaseClass;
        return new class_();
    };
    
    function New(aClass, aParams)   //创建对象的函数,用于任意类的对象创建
    {
        function new_()     //创建对象的临时函数壳
        {
            this.Type = aClass;    //我们也给每一个对象约定一个 Type 属性,据此可以访问到对象所属的类

            if (aClass.Create)
              aClass.Create.apply(this, aParams);   //我们约定所有类的构造函数都叫Create,这和DELPHI比较相似
        };
        new_.prototype = aClass;
        return new new_();
    };
 
    //语法甘露的应用效果:    
    var Person = Class(object,      //派生至 object 基本类
    {
        Create: function(name, age)
        {
            this.name = name;
            this.age = age;
        },
        SayHello: function()
        {
            alert("Hello, I'm " + this.name + ", " + this.age + " years old.");
        }
    });
    
    var Employee = Class(Person,    //派生至 Person 类,是不是和一般对象语言很相似?
    {
        Create: function(name, age, salary)
        {
            Person.Create.call(this, name, age);  //调用基类的构造函数
            this.salary = salary;
        },
        ShowMeTheMoney: function()
        {
            alert(this.name + " $" + this.salary);
        }
    });
 
    var BillGates = New(Person, ["Bill Gates", 53]);
    var SteveJobs = New(Employee, ["Steve Jobs", 53, 1234]);
    BillGates.SayHello();
    SteveJobs.SayHello();
    SteveJobs.ShowMeTheMoney();
    
    var LittleBill = New(BillGates.Type, ["Little Bill", 6]);   //根据 BillGate 的类型创建LittleBill
    LittleBill.SayHello();
    
    alert(BillGates.isA(Person));       //true
    alert(BillGates.isA(Employee));     //false
    alert(SteveJobs.isA(Person));       //true
    alert(Person.isA(Employee));        //false
    alert(Employee.isA(Person));        //true 
 

    “语法甘露”不用太多,只要那么一点点,就能改观整个代码的易读性和流畅性,从而让代码显得更优雅。
有了这些语法甘露,JavaScript就很像一般对象语言了,写起代码了感觉也就爽多了!
 
    令人高兴的是,受这些甘露滋养的 JavaScript 程序效率会更高。因为其原型对象里既没有了毫无用处
的那些对象级的成员,而且还不存在constructor属性体,少了与构造函数间的牵连,但依旧保持了方法
的共享性。这让JavaScript 在追溯原型链和搜索属性及方法时,少费许多工夫啊。
 
    我们就把这种形式称为“甘露模型”吧!其实,这种“甘露模型”的原型用法才是符合prototype概念的本
意,才是的JavaScript原型的真谛!

[转自 :《悟透JavaScript》 ]原著:李战(leadzen).深圳 2008-2-23

分享到:
评论

相关推荐

    悟透JavaScript(js)

    ### 悟透JavaScript(js):回归数据与代码的本质 #### 一、引言 《悟透JavaScript》这本书由李战(leadzen)撰写,旨在深入浅出地讲解JavaScript的核心概念和技术要点。本书通过生动有趣的比喻,将抽象的编程概念...

    悟透JavaScript.chm

    悟透JavaScript 在软件工业迅猛发展的今天,各式各样的编程语言层出不穷,新语言的诞生,旧语言的演化,似乎已经让我们眼花缭乱。为了适应面向对象编程的潮流,JavaScript语言也在向完全面向对象的方向发展,新的...

    悟透JavaScript

    资源名称:悟透Javascript内容简介:翻开此书的你,也许是Javascript的崇拜者,正想摩拳擦掌地想尝试下学一学这一精巧的语言;也许是80后,90后的程序员或者前端架构师,正被Javascript魔幻般的...

    悟透JavaScript.rar

    "悟透JavaScript"这个压缩包文件显然是一份旨在帮助学习者深入理解这门语言的教程资料。从标签"书籍教程-网页制作"我们可以推测,这份教程可能包含了JavaScript在网页制作中的实际应用和相关理论知识。 "悟透...

    一个月悟透JavaScript

    "一个月悟透JavaScript"这本书显然旨在帮助读者在短时间内深入理解和掌握这门语言的精髓。JavaScript以其灵活、动态的特性,使得网页交互变得更加丰富和生动。下面,我们将根据书名和描述,探讨JavaScript的一些关键...

    悟透JavaScript.pdf

    ### 悟透JavaScript核心知识点解析 #### 一、编程世界的本质:数据与代码 **悟透JavaScript**这本书深入探讨了编程世界的核心——数据与代码之间的关系。在编程的世界里,一切皆可归结为这两种基本元素:数据与...

    轻轻松松学用javascript编程 、悟透JavaScript

    "轻轻松松学用javascript编程" 和 "悟透JavaScript" 这两个主题,旨在帮助初学者和进阶者深入理解和掌握这门语言。 JavaScript的核心概念包括变量、数据类型、操作符、流程控制、函数和对象。变量是存储数据的容器...

    悟透JAVASCRIPT 美绘本

    悟透 JAVASCRIPT 美绘本 插图版

    悟透javascript

    《悟透JavaScript:回归数据与代码的本原》 在《悟透JavaScript》一书中,作者李战(leadzen)引领读者深入理解JavaScript的核心概念,强调了编程世界中数据与代码的基本关系及其在JavaScript中的独特体现。本书...

    悟透JavaScript(PDF),脚本(超好教材)

    ### 悟透JavaScript——回归数据与代码的本质 #### 数据与代码:编程世界的两大基石 在探讨JavaScript之前,我们先从编程世界的基本构成入手。在编程的世界里,无论是哪种编程语言,都离不开两个核心要素:**数据*...

    悟透JavaScript.txt

    ### 悟透JavaScript——解析数据与代码的交织之美 #### 一、数据与代码的哲学 在编程的世界中,存在两种基本元素:**数据**和**代码**。这两种元素相互作用,共同构建了一个充满生机与活力的世界。数据通常被视为...

Global site tag (gtag.js) - Google Analytics