`
Lewiss
  • 浏览: 20483 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

JavaScript 对象

阅读更多
1. ECMAScript 把对象定义为“属性的无序集合,每个属性存放一个原始值、对象或函数。”

2. 在 ECMAScript 里有三种类型的对象,分别是本地对象、内置对象和宿主对象。

3. 本地对象
    ECMAScript 把本地对象定义为“独立于宿主环境的由 ECMAScript 实现提供的对象”。简单的说,本地对象就是 ECMAScript 定义的类(引用类型)。他们包括:


4. 内置对象
    ECMAScript 把内置对象定义为“独立于宿主环境的由 ECMAScript 实现提供,并且在 ECMAScript 程序执行时就已经出现的对象”。这意味着开发者不必明确实例化内置对象,它已经被实例化了。ECMAScript 只定义了两个内置对象,即 Global 和 Math(它们也是本地对象,根据定义,ECMAScript 每个内置对象都是本地对象)。

    Global 对象是 ECMAScript 最特殊的一个对象,因为实际上它根本不存在,但是 ECMAScript 把 isNaN()、isFinite()、parseInt()、parseFloat() 这些都看作是 Global 对象的方法。(把这些都归纳起来当做是某对象的方法,然后把该对象抽象为 Global 对象??)
Global 对象还有以下属性:


5. 宿主对象
    所有非本地对象都是宿主对象,即由 ECMAScript 宿主环境实现提供的对象。所有的 BOM 对象和 DOM 对象。

6. 作用域
    与 Java 程序设计语言不同,ECMAScript 只存在一种作用域——公用作用域。即 ECMAScript 对象的所有属性和方法都是公用的。

7. this 关键字
    与 Java 一样,this 关键字总是指向调用该方法的对象。

8. 定义对象
    预定义对象是面向对象编程语言能力的一部分,它的真正强大之处在于能够创建自己的专业类和对象。
    注意,ECMAScript 对象的属性可在对象创建后动态定义,如:

    var oCar = new Object;
    oCar.color = "red";
    oCar.doors = 4;
    oCar.showColor = function(){
        alert(this.color);
    }

9. 工厂方式创建对象

    function createCar(){
        var oCar = new Object;
        oCar.color = "red";
        oCar.doors = 4;
        oCar.showColor = function(){
            alert(this.color);
        }
        return oCar;
    }
    var oCar1 = createCar();
    var oCar2 = createCar();

    修改 createCar 函数,给它传递各属性的默认值:
   
    function createCar(color,doors){
        var oCar = new Object;
        oCar.color = color;
        oCar.doors = doors;
        oCar.showColor = function(){
            alert(this.color);
        }
        return oCar;
    }
    var oCar1 = createCar("red",2);
    var oCar2 = createCar("green",4);

    但是这样存在一个问题,每次调用 createCar 函数都将创建新版本的 showColor 函数,这意味着每个对象都有自己的 showColor 函数版本,事实上每个对象都共享了同一个函数(?不明)。试图把 showColor 函数提出去:

    function showColor(){
       alert(this.color);
    }

    function createCar(color,doors){
        var oCar = new Object;
        oCar.color = color;
        oCar.doors = doors;
        oCar.showColor = showColor;
        return oCar;
    }
    var oCar1 = createCar("red",2);
    var oCar2 = createCar("green",4);

    这样在创建对象是赋予 oCar 对象一个指向 showColor 函数的指针。从功能上讲,解决了 showColor 的重复创建问题,但是该函数看起来不像是对象 oCar 对象的方法,由此引出了构造函数。

10. 构造函数
        
    function Car(color,doors){
        this.color = color;
        this.doors = doors;
        this.showColor = function(){
            alert(this.color);
        }
    }
    var oCar1 = new Car("red",2);
    var oCar2 = new Car("green",4);

    其实构造函数方式跟工厂方式很相像,不过它们有以下的区别:构造函数内部没有创建对象,而是使用 this 关键字,同时构造函数也没有显示地声明返回值。
    当使用 new 关键字调用构造函数时,在执行第一行代码前会先创建一个对象,只有 this 才能访问该对象,然后可以直接赋予 this 属性。默认情况下,this 是构造函数的返回值。
    就像工厂函数,构造函数也存在着 showColor 函数重复创建的问题,于是引出了原型方式。

11. 原型方式
    该方式利用了对象的 prototype 属性。prototype 是一个特殊的属性,其实是一个对象,可把它看作是创建新对象时所依赖的原型。

    function Car(){
    }

    oCar.prototype.color = "red";
    oCar.prototype.doors = 4;
    oCar.prototype.showColor = function (){
       alert(this.color);
    }

    var oCar1 = new Car();
    var oCar2 = new Car();
   
    当调用 new Car() 创建对象是,原型的所有属性都被立即赋予要创建的对象。这意味着所有创建的 Car 对象实例保存的都是 showColor 函数的指针,这就解决了函数重复创建的问题,同时所有属性都属于一个对象,这看起来更像是一个对象的封装。于是解决了前两种方式的两个问题。
    其实以上方式还存在问题,如构造函数没有参数,真正的问题是,当属性指向的是对象而不是函数时。看以下代码:

    function Car(){
    }

    oCar.prototype.color = "red";
    oCar.prototype.doors = 4;
    oCar.prototype.dirvers = new Array("Mike","Sue");
    oCar.prototype.showColor = function (){
       alert(this.color);
    }

    var oCar1 = new Car();
    var oCar2 = new Car();

    问题发生:
    oCar1.push("Matt");
    alert(oCar1.dirvers); // output :  "Mike","Sue","Matt"
    alert(oCar2.dirvers); // output :  "Mike","Sue","Matt"

    可以看到 oCar2 的 drivers 属性也多了 "Matt"。因为 oCar1 和 oCar2 的 drivers 属性都是 Car 的原型属性,这是问题的根本。
 
12. 混合的构造函数/原型方式

    function Car(color,doors){
        this.color = color;
        this.doors = doors;
        this.dirvers = new Array("Mike","Sue");
    }

    oCar.prototype.showColor = function(){
        alert(this.color);
    }
  
    var oCar1 = new Car();
    var oCar2 = new Car();

    oCar1.push("Matt");
    alert(oCar1.dirvers); // output :  "Mike","Sue","Matt"
    alert(oCar2.dirvers); // output :  "Mike","Sue"
  
    问题解决。

13. 动态原型方式
   
    function Car(color,doors){
        this.color = color;
        this.doors = doors;
        this.dirvers = new Array("Mike","Sue");
        if(typeof Car._initialed == undefined){
            Car.prototype.showColor = function(){
                alert(this.color);
            }
            Car._initialed = true;
         }
    }

14. 定义对象的最好方式是:用构造函数方式定义属性,用原型方式定义方法,即混合的构造函数/原型方式。
分享到:
评论

相关推荐

    javascript对象转换成json

    在JavaScript中,我们可以使用内置的`JSON.stringify()`方法将JavaScript对象转换为JSON字符串。 ### JSON.stringify()方法 `JSON.stringify()`是JavaScript中的全局函数,用于将JavaScript值转换为JSON字符串。它...

    javascript对象参考手册

    JavaScript对象是编程语言的核心组成部分,尤其在Web开发中扮演着至关重要的角色。"JavaScript对象参考手册"涵盖了这一主题的广泛内容,旨在为开发者提供全面、深入的理解和实用指南。手册分为20个章节,不仅涉及...

    JavaScript对象笔记.rar

    什么是对象 简单点说,编程语言中的对象是对现实中事物的简化。例如,我们一个人就是一个对象,但是编程...在后面的JavaScript对象笔记中,记录了菜鸟在学习JavaScript对象的大多数资源,希望这些资源对你也有价值。

    深入浅出JavaScript对象模型

    ### 深入浅出JavaScript对象模型 #### JavaScript对象的本质 根据ECMA262规范,ECMAScript被定义为一种基于对象的语言而非传统的面向对象语言。这意味着在JavaScript中,对象被视为存储数据的一种大型数组形式,...

    04JavaScript对象相关内容总结.docx

    JavaScript对象是编程中的一种核心概念,它是一种复合数据类型,能够存储多个不同数据类型的属性。在JavaScript中,对象可以通过多种方式创建,其中一种常见的方法是使用`new`关键字和构造函数,例如`new Object()`...

    JavaScript对象创建总结

    javascript对象创建方法总结,通过这些方法的总结,可以对对象有了更深一步的了解,也加深了对对象的巩固认识。

    第8节 JavaScript对象.rar

    第8节 JavaScript对象.rar第8节 JavaScript对象.rar第8节 JavaScript对象.rar第8节 JavaScript对象.rar第8节 JavaScript对象.rar第8节 JavaScript对象.rar第8节 JavaScript对象.rar第8节 JavaScript对象.rar第8节 ...

    JavaScript对象模型

    ### JavaScript对象模型详解 #### 一、概述 在JavaScript中,对象模型是其核心特性之一,它决定了数据的存储方式以及程序的运行机制。本文旨在深入解析JavaScript对象模型的关键概念,包括基本数据类型、对象、...

    JavaScript对象定义

    JavaScript对象定义是编程语言中的核心概念,它在Web开发中起着至关重要的作用。JavaScript是一种基于原型的对象导向语言,它的对象定义方式具有独特的灵活性。在本文中,我们将深入探讨JavaScript对象的定义、创建...

    04 第四章 JavaScript对象及初识面向对象.md

    04 第四章 JavaScript对象及初识面向对象.md

    javascript对象大全

    ### JavaScript对象大全详解 #### 一、JavaScript简介 JavaScript 是一种强大的、解释型的脚本语言,由 Netscape 公司开发,最初被命名为 LiveScript。随着 Web 技术的发展,JavaScript 成为了网页开发中不可或缺...

    JavaScript 对象.pdf

    JavaScript 对象 JavaScript 中的对象是非常重要的概念,所有事物都是对象,包括字符串、数值、数组、函数等等。对象只是带有属性和方法的特殊数据类型。布尔型、数字型、字符串也可以是一个对象,日期是一个对象,...

    JavaScript对象经典小册 chm

    本小册"JavaScript对象经典小册 chm"深入探讨了JavaScript中的核心概念——对象和数组,旨在帮助开发者更好地理解和掌握这些基础知识。 一、JavaScript对象 1. 对象概述:JavaScript对象是一种数据结构,它由键值对...

    JavaScript对象共6页.pdf.zip

    JavaScript对象是编程语言JavaScript中的核心概念,它在Web开发中起着至关重要的作用。JavaScript是一种基于原型的动态类型语言,其对象系统是其灵活性和强大功能的基础。在深入理解JavaScript对象之前,我们需要先...

    javascript对象

    JavaScript对象是编程语言JavaScript的核心组成部分,它是一种复杂的数据结构,用于存储和操作数据。JavaScript对象是基于原型的,这意味着每个对象都可以从另一个对象继承属性和方法。这种特性使得JavaScript非常...

    JavaScript对象模型-执行模型

    JavaScript对象模型(Object Model)和执行模型是理解JavaScript工作原理的关键概念。JavaScript是一种基于原型的动态类型语言,其对象模型是其核心特性之一。本文将深入探讨JavaScript的对象模型和执行模型,以及...

Global site tag (gtag.js) - Google Analytics