`

javascript”面向对象编程”- 2聊聊对象的事

阅读更多

      javascript是基于对象的编程语言。从window到document,从方法到类,从object到Array都是对象。

      先看一下JSON(javascript object notation)对象,JSON是一种脚本操作时常用的数据交换格式对象,相对于XML来说JSON是一种比较轻量级的格式,在一些intelligence的IDE中还可以方便的通过点操作JSON对象中的成员。

      JSON是一种键/值对方式来描述内部成员的格式,其内部成员可以是几乎任何一种类型的对象,当然也可以是方法、类、数组,也可以是另外一个JSON对象。

        var student = {
            Name: "张三",
            Age: 20,
            Hobby: "读书",
            Books: [
                {
                    BookName : "C#" ,
                    Price : 70
                },
                {
                    BookName : "Java" ,
                    Price : 70
                },
                {
                    BookName : "Javascript" ,
                    Price : 80
                }
            ]
        };
<style type="text/css"> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }</style>

      上面代码用JSON对象描述了一个学生的信息,他有姓名、年龄、爱好、书集等。在访问该学生对象时,可以通过student变量来操作学生的信息。

        var stuInfo = "姓名:" + student.Name +
                      ",年龄:" + student.Age +
                      ",爱好:" + student.Hobby +
                      ",拥有的书:" +
                      student.Books[0].BookName + "、" +
                      student.Books[1].BookName + "、" +
                      student.Books[2].BookName;
         alert(stuInfo);
<style type="text/css"> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }</style>

      这样的操作方式风格和C#也非常相像。以上的代码是静态的构造出了学生对象,学生对象的结构就确定了。在其它的编程语言中一般对象结构一旦确定就不能很方便的进行修改,但是在javascript中的对象结构也可以方便的进行改动。下面为student对象添加一个Introduce方法来做自我介绍。

        student.Introduce = function() {
            var stuInfo = "姓名:" + this.Name +
                         ",年龄:" + this.Age +
                         ",爱好:" + this.Hobby +
                         ",拥有的书:" +
                         this.Books[0].BookName + "、" +
                         this.Books[1].BookName + "、" +
                         this.Books[2].BookName;
            alert(stuInfo)
        };
        student.Introduce();

<style type="text/css"> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }</style>       student对象原来并没有Introduce方法,第一次为student.Introduce赋值会在student对象中创建一个新的成员,后面如果再为student.Introduce赋值则会覆盖上一次所赋的值。当然我们这的值是一个function。也可以用类似索引的方式来添加成员。

        student["Introduce"] = function() {
          ……
        };
 
        student.Introduce();
<style type="text/css"> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }</style>

当然添加的成员也可以删除掉。删除掉之后则成为undefined,再访问该成员时则不支持。

        delete student.Introduce;
        student.Introduce();
 
<style type="text/css"> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }</style>

        image

        javascript是弱类型的语言,有的时候即使有IDE的辅助也不能很清楚知道当前所操作对象的成员,可能会需要对当前对象的属性进行查询,这时候我们可以使用for循环来完成。

        for (var key in student) {
            document.write(key + " : " + student[key] + "<br />");
        };
<style type="text/css"> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }</style>

        image

      对student对象进行遍历时,是对student的成员进行遍历,这里的key则对应student对象中的每一个成员属性名称。student[key]则是对student某个成员进行访问。如果想调用student的Introduce方法也可以用索引的方式,student[“Introduce”]()。

      上面简单的聊了聊JSON对象,总的来说JSON是很方便的数据打包方式。javascript中的其它的对象,不论是浏览器对象,还是自定义类型所创建的对象或者是数组等等,它们也都具有JSON对象类似的操作方式。我们可以直接用索引的方式为window添加成员,我们也可以为数组添加字符串形式的下标把它当成Hashtable来操作。

        window["Hi"] = function() {
            alert("helloworld!");
        };
        window["Hi"]();
 
        var array = [];
        array["一"] = "A";
        array["二"] = "B";
        array["三"] = "C";
        array["四"] = "D";
        alert(array["一"] + array["二"] + array["三"] + array["四"]);
<style type="text/css"> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }</style>

      把数组当成Hashtable来操作时,要注意,并非是为数组添加数组元素,而是在数组对象中添加新的属性成员。而且如果for(var key in array)循环遍历数组对象的话,key得到的却不是array对象的属性名称,而是数组元素的索引号。

下一次聊聊function。

分享到:
评论

相关推荐

    javascript 面向对象编程 聊聊对象的事

    面向对象编程(Object-Oriented Programming, OOP)是JavaScript实现复杂逻辑和结构化程序设计的主要方式。 在JavaScript中,对象是数据和函数的集合,它们通过键/值对的形式存储数据,并且可以拥有方法(可执行的...

    50-JavaScript-Mini-Projects

    同时,也需要理解对象和面向对象编程的概念,用于创建游戏对象和其行为。 3. **井字游戏(Tic Tac Toe)**:这是一款两人对战的游戏,展示了如何实现游戏逻辑,包括状态跟踪、玩家轮换和胜利条件检查。它使用二维...

    聊聊JavaScript如何实现继承及特点

    “继承”是面向对象编程里面经常提及到的概念,它的目的是实现代码复用。JavaScript并没有“类”的概念,那么,它如何实现继承呢? (ES6有关键字class和extend,继承的语法与Java等面向对象语言类似,但是,ES6 ...

    java基础知识

    Java是一种广泛使用的面向对象编程语言,由Sun Microsystems公司于1995年推出,目前由Oracle公司维护和发展。Java以其跨平台性(Write Once, Run Anywhere, WORA)、安全性、高性能等特点著称,在企业级应用、移动...

    java单聊群聊案例

    1. **Java基础**:Java是一门面向对象的编程语言,它具有跨平台性、安全性以及丰富的类库等特性,使得它成为开发网络应用的理想选择。在这个案例中,你需要对Java语法、类、对象、异常处理、多线程等基本概念有扎实...

    JavaScript_Object:자바스크립트지객체

    - **ES6 Class语法**: 虽然本质上还是函数,但Class提供了更面向对象的语法糖。 ```javascript class Person { constructor(name, age) { this.name = name; this.age = age; } sayHello() { console.log(`...

    简单的聊天室,可以提供多用户对聊的机制

    1. C#基础语法和面向对象编程:理解类、对象、属性和方法等概念。 2. ASP.NET框架:如何创建Web应用,处理HTTP请求,以及与数据库交互。 3. 数据库设计:如何存储和检索聊天记录,可能涉及到SQL查询和关系型数据库如...

    个人用了8年的Java工程师简历

    - **基础知识**: 拥有扎实的Java基础知识,包括但不限于面向对象编程、泛型、异常处理、反射机制等。 - **编程能力**: 具备良好的编程习惯,能够编写高质量、可维护性强的代码。 ### Java核心框架和技术 - **Spring...

    JAVA聊天室.doc

    本项目旨在设计和实现一个基于JAVA的聊天室系统,以增强学生对面向对象编程的理解,特别是JAVA技术的应用。聊天室作为一种常见的人机交互工具,其设计不仅涉及到JAVA编程,还涵盖了JavaScript技术,是信息技术发展中...

    Javascript-Image_Color_Filter_Generator:Javascript-图像彩色滤镜生成器

    5. **代码组织**:可能采用模块化或面向对象的设计,使得代码可维护性和复用性更强。 在实际开发过程中,理解颜色理论、熟悉 JavaScript 和 HTML5 Canvas API 是非常重要的。此外,对于大型项目,可能还需要考虑...

    struts2常用jar包

    2. xwork-core-2.3.4.1.jar:XWork是Struts2的底层框架,提供了许多基础功能,如类型转换、验证、AOP(面向切面编程)支持以及对象的映射。它是Struts2的核心组成部分,负责处理请求和业务逻辑的执行。 3. ...

    Quizz_App:简介àJavascript-Quizz App

    JavaScript是解释型的、弱类型的、面向对象的语言,它主要用于增强网页的交互性。通过在浏览器端运行,JavaScript可以改变HTML元素的内容、样式,甚至与用户进行实时交互。在"Quizz_App"中,JavaScript被用来创建...

    js网页开发小游戏

    7. **对象和类**:面向对象编程(OOP)概念可以帮助构建复杂的游戏实体,如角色、敌人、道具等,通过继承和封装提高代码复用性。 8. **事件委托**:为了提高性能,可以使用事件委托,只在一个父元素上设置事件监听...

    基于JAVA可发的聊天室

    其面向对象的设计思想,使代码结构清晰,易于维护。 - **Java Swing和JavaFX**:用于构建图形用户界面(GUI)的工具包,提供丰富的组件库,可以创建聊天窗口和输入框等交互元素。 2. **MyEclipse集成开发环境** -...

    慢聊服务端

    1. **Java基础**:理解Java的基本语法、面向对象编程概念(类、对象、封装、继承、多态)、异常处理以及集合框架等是开发服务端应用的基础。 2. **网络编程**:Java的Socket编程是实现聊天工具的关键,它允许应用...

    基于SSH框架整合的易聊微博系统的设计与实现 毕业项目 论文12000 前台页面很漂亮.zip

    它允许开发者使用面向对象的方式来操作数据,无需编写大量的SQL语句,提高了开发效率。 5. **MySQL数据库**:MySQL是一个流行的开源关系型数据库管理系统,被广泛应用于Web应用。在这个项目中,MySQL用于存储用户...

    sqlchemyforms-[removed]用于 sqlchemyform 的 Javascript 库

    ORM将数据库操作转化为面向对象的编程,使得代码更加灵活且易于维护。 Sqlchemyforms-javascript库旨在提供以下功能: 1. **数据验证**:前端验证可以减少无效或不完整的数据提交到服务器,从而提高应用程序的性能...

    #C 局域网文件传输与聊 Sanler工具条界面美化控件

    首先,C#是一种面向对象的编程语言,由微软公司开发,广泛用于Windows应用开发、游戏开发和Web服务等。在局域网文件传输中,C#可以利用.NET Framework或.NET Core的类库,如System.Net命名空间下的Socket类来实现...

    typescript-web-framework

    **typescript-web-framework** ...通过掌握TypeScript的类型系统、面向对象编程、模块系统、装饰器以及与其他Web框架的集成,开发者可以创建出更安全、更可维护的代码,同时享受到更好的开发流程和工具支持。

Global site tag (gtag.js) - Google Analytics