`
javaanswer
  • 浏览: 5355 次
  • 性别: Icon_minigender_1
  • 来自: 广州
最近访客 更多访客>>
社区版块
存档分类

JavaScript面向对象的程序设计1—基础篇

阅读更多

1. 理解JavaScript的对象
    面向对象的的语言都有类的概念,类抽象了对象共有的属性和行为,根据类可以创建不同的对象。
    可是Javascript中没有类的概念,因此它的对象也与基于类的语言中的对象有所不同。
    ECMA-262把对象定义为:"无序属性的集合",其属性可以是基本值,对象,或者函数。(严格来讲,这就相当于说对象是一组没有特定顺序的值)
    JavaScript中每个对象都是基于一个引用类型创建的,包括JavaScript的原生类型(如Array,Date等),也可以是开发人员自定义的类型。

 

2. 创建对象
    1) 利用Object类型
        创建自定义对象最简单的方法就是创建一个Object的实力,然后再为它添加属性和行为,如下:

           

var person = new Object();
person.name = "anser";                          //属性
person.age = 22;
person.job = "Software Engineer";
person.sayName = function() {               //行为
    alert(this.name);
}

     2) 工厂模式
         使用Object类型创建不同类型的对象的缺点:使用同一个接口创建很多对象,会产生很多重复的代码。如上面,分别创建person1,person2......
        因此使用工厂模式,封装特定接口创建对象的细节,上面示例修改如下:

 

        function createPerson(name, age, job) {
            var person  = new Object();
            person.name = name;
            person.age = age;
            person.job = job;
            person.sayName = function() {
                alert(this.name);
            }
            return person;
        }

        使用工厂模式虽然解决了创建多个相似对象的问题,可是却没有解决对象识别的问题(及怎么样知道一个对象的类型:通过 instanceof 操作符)。

  3) 构造函数模式
        ECMAScript中的构造函数可用来创建特定类型的对象。像Object,Array这样的原生构造函数,在运行时会自动出现在执行环境中。
        此外,也可以创建自定义的构造函数,从而定义自定义对象类型的属性和方法。改写以上的例子如下:

 function Person(name, age, job) {
            this.name = name;
            this.age = age;
            this.job = job;
            this.sayName = function() {
                alert(this.name);
            }           
        }
        Person person1 = new Person("anser", 22, "Software Engineer");
        Person person2 = new Person("xhc", 22, "Player");

        注意到构造函数模式和工厂模式的不同:
            a. 没有显示地创建对象,在工厂模式中创建了新的Object对象;
            b. 直接将属性和方法赋给了this对象,在工厂模式中赋给了新创建的Object对象;
            c. 没有return语句, 在工厂模式中在工厂方法中返回显示创建的Object对象。
      
        要创建新的Person对象,使用new操作符,以这种方式调用构造函数实际上会经历一下4个步骤:
            a. 创建一个新对象;
            b. 将构造函数的作用域赋给新对象(因此this就指向了这个新对象);
            c. 执行构造函数中的代码(为这个新对象添加属性);
            d. 返回新对象。

        通过构造函数创建的对象都有一个constructor(构造函数)属性,指向Person构造函数:
        

alert(person1.constructor == Person);   //true;
alert(person2.consturcotr == Person);    //ture;

 

        但是检测对象类型还是使用instanceof操作符更可靠一些(因为在后面会介绍到,对象的构造函数不一定是这个类型的构造函数)。

        alert(person1 instanceof Object);    //true; 所有的对象均继承自Objec
        alert(person1 instanceof Person);    //true;

 

        使用构造函数,可以将它的实例标识为一种特定的类型,这正是构造函数模式胜过工厂模式的地方。
 理解构造函数:
        1. 构造函数名首字母尽量大写,主要为了区分ECMAScript中的其他函数,因为构造函数本身也是函数,只不过可以用来创建对象而已。
        2. 构造函数与其他函数的唯一区别,就在于调用它们的方式不同。任何函数通过new操作符来调用,那它就可以作为构造函数。
            如上面的构造函数Person:

//当作构造函数使用
Person person = new Person("anser", 22, "Software Engineer");
person.sayName();    //anser

//作为普通函数使用
Person("name1", 27, "job");    //添加到window,此时调用函数Person的作用域为window对象
window.sayName();               //name1

//在另一个对象的作用域中调用
Object o = new Object();
o.Person("object", 1, "test");
o.sayName();    //object

 
        3. 构造函数的问题
            使用构造函数的缺点:就是每个方法都要在每个对象的实例上重新创建一遍。
            如前面例子中的person1和person2对象都有一个名为sayName()的方法,但那两个方法不是同一个Function的实例。
            ECMAScript中函数也是对象,因此每定义一个函数,也就是实例化了一个对象。
            因此上面的构造函数实际相当于:

function Person(name, age, job) {
    this.name = name;
    this.age = age;
     this.job = job;
    this.sayName = new Function(" alert(this.name);") ;    //与声明函数在逻辑上是等价的
}
alert(person1.sayName == person2.sayName);    //false

 
            因此创建两个完成相同功能的函数完全没有必要,况且有this对象在,根本不需要在执行代码前就把函数绑定到特定对象上面。
            所以,可以想下面这样,把函数转移到构造函数外部:

function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = sayName;
}
//函数移到构造函数外部
function sayName() {
    alert(this.name);
}

 
            可是,这样做似乎有违封装的原则:在全局作用域中定义的函数,实际上只是被某个对象调用,这让全局作用域有点名不副实。
            更让人无法接受的是,如果对象需要定义很多方法,那么就需要定义很多个全局函数,于是我们这个自定义的引用类型就丝毫没有封装性可言了(通过原型模式解决)。

          这部分内容整理自《JavaScript高级程序设计》第二版,这本书真的还不错,虽然自己以前不喜欢写js,但是看到这么经典的书,还是让自己有兴趣研究下。

          下一部分整理下这部分内容引出的利用函数原型,来实现JavaScript面向对象的程序设计,这也是框架js开发的基础。

 

分享到:
评论

相关推荐

    Javascript 面向对象编程小结

    最后,`demo.html`可能是一个示例网页,展示了如何在实际项目中使用上述的JavaScript面向对象编程技术。它可能包含了HTML结构,以及引入`JSLogger.js`的脚本,通过创建和操作对象来展示其功能。 总的来说,这篇博客...

    JavaScript高级程序设计2,学习笔记---第一篇

    总的来说,JavaScript高级程序设计涵盖了从基础语法到面向对象编程的广泛内容,结合前端开发实践,可以构建出功能丰富的交互式网页应用。不断学习和实践这些知识,将有助于提升你的前端开发技能。

    HTML+CSS3+JS+JQuery实现七夕言情动画、面向对象程序设计、Deferred对象解决异步编程回调嵌套问题

    本篇文章将详细讲解如何利用这些技术实现七夕言情动画,以及面向对象程序设计和 Deferred 对象在解决异步编程回调嵌套问题中的应用。 首先,我们来看HTML和CSS3在七夕言情动画中的应用。HTML(超文本标记语言)是...

    ASP.Net程序设计基础篇

    总之,"ASP.NET程序设计基础篇"教程涵盖了从基础的Web Forms开发到高级的AJAX和数据绑定等内容,对于任何想进入ASP.NET领域的开发者来说,都是一个很好的起点。通过深入学习和实践,你可以掌握构建高效、可扩展的Web...

    网络编程基础篇之javascript

    面向对象是JavaScript的另一大特性,包括构造函数、原型链和实例化。构造函数用于创建具有特定属性和方法的对象,原型链则实现了对象间的继承。JavaScript的继承机制是基于原型,不同于传统的类式继承。 事件处理是...

    ASP.NET 程序设计基础篇.rar

    本资源"ASP.NET程序设计基础篇.rar"是一个面向初学者的教程,旨在帮助入门者掌握ASP.NET的基础知识。 在ASP.NET中,我们首先会接触到的是HTML、CSS和JavaScript,这是Web开发的基本语言,用于构建网页的结构、样式...

    ext面向对象和继承

    在JavaScript的世界里,面向对象(Object-Oriented Programming, OOP)是一种常用的设计模式,它允许我们通过类和对象来组织代码,实现代码的复用和模块化。本篇文章将探讨EXTJS框架中的面向对象机制,特别是继承的...

    不错的JavaScript面向对象的简单入门介绍第1/2页

    标题中提到的“JavaScript面向对象的简单入门介绍”,说明这是一篇面向初学者的文章,旨在帮助读者理解JavaScript中的面向对象编程(OOP)基础概念。JavaScript是一种多范式编程语言,它支持面向对象、命令式、声明...

    网络编程基础篇系列 网络编程基础篇系列

    了解JavaScript的基本语法、DOM操作、事件处理和面向对象编程是掌握这门语言的基础。 Perl CGI(Common Gateway Interface)是Perl语言在网络编程中的应用,常用来创建Web服务器上的动态内容。CGI允许Web服务器与...

    Javascript最新经典书籍大全

    1. 入门书籍:比如《JavaScript高级程序设计》(Nicholas C. Zakas)和《Eloquent JavaScript》(Marijn Haverbeke),这两本书都是JavaScript初学者的首选,深入浅出地介绍了JavaScript的基础知识。 2. 进阶读物:...

    JS面向对象之单选框实现

    【JS面向对象之单选框实现】在JavaScript中,面向对象编程是一种常用的设计模式,它允许我们通过类和对象来组织代码,使得代码更易于理解和维护。本篇内容主要讲解如何利用面向对象的方法来实现单选框的功能。 首先...

    java语言程序设计基础篇第十版第十三章练习答案.docx

    1. **面向对象编程**: - `Exercise13_01` 类定义了一个名为 `TriangleNew` 的类,它扩展了 `GeometricObject` 类。在面向对象编程中,继承是一种机制,允许一个类(子类)继承另一个类(父类)的属性和方法。在...

    程序设计实践程序设计实践程序设计实践程序设计实践

    1. **编程语言基础**:程序设计实践的基础是掌握至少一种编程语言,如C、C++、Java、Python或JavaScript等。了解语法、数据类型、控制结构(如循环和条件语句)、函数和面向对象编程的概念至关重要。 2. **算法与...

    javaScript语句大全2015

    错误处理是程序设计的重要环节。在JavaScript中,我们可以使用`try...catch`语句捕获和处理异常。`throw`语句用于抛出自定义错误。 异步编程在JavaScript中至关重要,特别是在处理I/O操作时。2015年,回调函数仍然...

    ASP.NET程序设计教程C#版上机指导与习题解答资源

    C#是一种面向对象的编程语言,被广泛应用于Windows平台的开发,包括ASP.NET。它拥有简洁的语法、强大的类型系统和丰富的类库,使得C#成为开发Web应用的理想选择。 在ASP.NET中,Web Forms和MVC(Model-View-...

    Javascript完全自学宝典

    2. **JavaScript基础篇:JavaScript语言精髓与编程实践** - **核心知识点**: - 函数的概念与作用域规则。 - 对象模型和原型链的理解。 - 事件处理机制及其绑定方式。 - DOM操作方法介绍。 3. **JavaScript...

    ASP.NET 程式设计基础篇

    通过这份“ASP.NET 程式设计基础篇”,你将学习到如何创建ASP.NET项目,设置控件,处理用户输入,使用数据库,实现页面间通信,以及如何部署应用程序到服务器。此外,教程可能还会涵盖最佳实践、调试技巧和性能优化...

    编写javascript插件,来扩展已有的JavaScript功能.zip

    通过以上分析,我们可以看到编写JavaScript插件是一个涉及JavaScript基础、面向对象编程、原型链、性能优化等多个方面的综合实践过程。不断地学习和实践,能够提升我们编写高质量JavaScript插件的能力,从而更好地...

    JS基于面向对象实现的选项卡效果示例

    在本篇文章中,将重点介绍如何利用JavaScript面向对象的方法来实现选项卡效果。我们会结合代码实例来分析整个实现流程,并详细讨论在此过程中需要注意的事项。面向对象编程是JS中一种重要的编程范式,它使得程序结构...

Global site tag (gtag.js) - Google Analytics