Javascript中的对象(一)

Javascript是基于对象模型设计的一种编程语言,它的核心(ECMAScript)具有非常强大和灵活的面向对象编程的能力。

  1. 什么是对象?

    在javascript中,对象是一个拥有属性和类型的独立实体。ECMA-262 把对象(object)定义为"属性的无序集合,每个属性存放一个原始值、对象或函数”。

    我们拿它和一个杯子做下类比。一个杯子是一个对象(物体),拥有属性。杯子有颜色,图案,重量,由什么材质构成等等。同样,javascript对象也有属性来定义它的特征。杯子也具有某些功能,比如说能够容纳一定量的液体。同理,Javascript对象也有方法来定义它的功能。

    所有的原生类型除了 null 与 undefined 之外都被当作对象。它们可以被赋予属性(某些类型的被赋予的属性不能被持久化),并且它们都有对象的全部特征。

  2. Javascript有哪些对象?

    JavaScript 拥有一系列预定义的对象和宿主应用提供的一些对象,在这里我们只介绍Javascript内置的对象,具体按照类别可以分成:

    • 全局常量: Infinity, NaN, undefined, null
    • 全局方法: eval(), isFinite(), isNaN(), parseFloat(), parseInt(),decodeURI(),decodeURIComponent(), encodeURI(), encodeURIComponent()
    • 基本对象:Object, Function, Boolean, Error,
    • 数字日期:Number, Math, Date
    • 文字处理: String, RegExp
    • 数组集合: Array

    当然用户也可以创建对象。

  3. Javascript中对象怎么定义?

    从  JavaScript 1.2 之后,你可以通过对象初始化器(Object Initializer)创建对象。或者你可以创建一个构造函数并使用该函数和 new 操作符初始化对象。

    • 使用对象初始化器

      通过对象初始化器创建对象的语法如下:

      var obj = { property_1:   value_1,   // property_# may be an identifier...
                  2:   value_2,   // or a number...
                  // ...,
                  "property n": value_n }; // or a string

      这里 obj 是新对象的名称,每一个 property_i 是一个标识符(可以是一个名称、数字或字符串),并且每个 value_i 是一个其值将被赋予 property_的表达式。obj 与赋值是可选的;如果你不需要在其他地方引用对象,你就不需要将它赋给一个变量。(注意在接受一条语句的地方,你可能需要将对象定义文本括在括号里,从而避免将这些文本与块代码相混淆)

      对象初始化器是表达式,新的对象在这些表达式出现的地方被创建出来,所以说即使完全相同的对象初始化表达式所创建的出来的对象也是不等的。就好像调用new Object()创建不同的对象实体一样。

      下面列子创建出cup对象,具有三个属性。我们注意到属性design也是一个具有属性的对象。

          var Cup = {
              color: "white", //default value of properties
              weight: 0.5,
              material: "china",
              design: {
                  color: "pink",
                  mark: "rose"
              },
              fill: function (liquid, volumn) {
                  //todo
                  console.log("The " + this.color +  " and " + this.material +  " cup is filled with " + volumn + " litre " + liquid + ".");
              }
          }

      在Javascript 1.1版本以及之前版本,我们不能使用对象初始化器来创建对象,只能使用下面的方法来创建对象。

    • 使用构造函数创建对象

      你可以通过两步来创建对象:

      • 通过创建一个构造函数来定义对象的类型。首字母大写是非常普遍而且很恰当的惯用法。
      • 通过new创建对象实例。

      为了定义对象类型,为对象类型创建一个函数以声明类型的名称、属性和方法。例如,要创建一个cup对象,我们可以使用如下的函数:

          function Cup(color, weight, material, designColor, markImage) {
              this.color = color;
              this.weight = weight;
              this.material = material;
              this.design = { color: designColor, mark: markImage };
              this.fill = function (liquid, volumn) {
                  //todo
                  console.log("The " + this.color + "  and " + this.material + " cup is filled with" + volumn + " litre " + liquid + ".");
              }
          }

      现在你可以象这样创建一个 mycup 对象:

      var mycar = new Cup("white", 0.5, "china", "pink", "rose");

      该创建了 mycup 并且将指定的值赋给它的属性。因而 mycup.color 的值是字符串 "whhite", mycar.weight 的值是0.5(此处省略重量单位),依此类推。

      你可以通过调用 new 创建任意数量的 car 对象。例如:

      var lilicup = new Car("red", 0.4, "plastic", "blue", "girl");
      var raincup = new Car("grown", 0.4, "glass", "green", "tree");
    • 使用Object.create(ECMAScript5及之后支持)

      对象也可以用 Object.create 方法创建。该方法非常有用,因为它允许你为创建的对象选择其原型对象,而不用定义一个构造函数。

      Object.create(proto[, propertiesObject])

      proto是指所创建对象的原型对象,propertiesObject是一个对象值,可以包含若干个属性。

          var Cup = {
              color: "white", //default value of properties
              weight: 0.5,
              material: "china",
              design: {
                  color: "pink",
                  mark: "rose"
              },
              fill: function (liquid, volumn) {
                  //todo
                  console.log("The " + this.color +  " and " + this.material +  " cup is filled with " + volumn + " litre " + liquid + ".");
              }
          }
          //create new cup type called mycup
          var mycup = Object.create(Cup);
          mycup.fill("water", 0.2); //output: The white and china cup is filled with 0.2 litre water.
      
          var lilycup = Object.create(Cup);
          lilycup.color = "red";
          lilycup.material = "plastic";
          lilycup.fill("apple juice", 0.3); //Output: The red and plastic cup is filled with 0.3 litre apple juice.
  4. 如何使用对象?

    当构建好一个对象后,我们就可以访问对象的属性和方法:

    objectName.propertyName
    objectName.methodName();

    关于这个使用我们在上面sample里面已经使用过了,例如

    lilycup.material = "plastic";

    lilycup.fill("apple juice", 0.3); 。

关于对象的继承以及对象的几个主要方法我们将在下一篇文章里介绍。

时间: 2024-08-06 23:58:30

Javascript中的对象(一)的相关文章

JavaScript中的对象

JavaScript对象 JavaScript对象是基本数据类型之一,是复合型数据: JavaScript中几乎所有事物都是做对象: JavaScript的对象是拥有属性和方法的数据: JavaScript 中的对象可以简单理解成"名称:值"对(name:value). JavaScript中的对象分类 1.内建对象: 数据分装对象(object.object.prototype.Number.Boolean.String.Array.Function): 工具类对象(Math.Dat

JavaScript中String对象的match()、replace() 配合正则表达式使用

正则表达式由来已久,查找替换功能非常强大,但模板难记复杂. JavaScript中String对象的match().replace()这2个方法都要使用正则表达式的模板.当模板内容与字符串不相匹配时,match()返回null,replace()返回原字符串. 正则表达式的模板对象 //标准写法 regexp = new RegExp(pattern[, flag]); pattern: 模板的用法是关键,也是本章的主要内容. flag: "i"(ignore)."g&quo

【转】JavaScript中的对象复制(Object Clone)

JavaScript中并没有直接提供对象复制(Object Clone)的方法.因此下面的代码中改变对象b的时候,也就改变了对象a. a = {k1:1, k2:2, k3:3}; b = a; b.k2 = 4; 如果只想改变b而保持a不变,就需要对对象a进行复制. 用jQuery进行对象复制 在可以使用jQuery的情况下,jQuery自带的extend方法可以用来实现对象的复制. a = {k1:1, k2:2, k3:3}; b = {}; $.extend(b,a); 自定义clone

(转)JavaScript中判断对象类型的种种方法

我们知道,JavaScript中检测对象类型的运算符有:typeof.instanceof,还有对象的constructor属性: 1) typeof 运算符 typeof 是一元运算符,返回结果是一个说明运算数类型的字符串.如:"number","string","boolean","object","function","undefined"(可用于判断变量是否存在). 但 type

Javascript中String对象的常用方法

charAt(): 返回在指定位置的字符. charCodeAt(): 返回在指定的位置的字符的 Unicode 编码. var s = "Smile forever!"; s.charAt(2); //i s.charCodeAt(2); //105 concat(): 连接字符串,参数可以是多个字符串. var s1 = "Smile forever!"; var s2 = "extend"; s1.concat(s2); //Smile f

javascript中Date对象的应用——简易日历的实现

× 目录 [1]效果 [2]HTML [3]CSS[4]JS 前面的话 简易日历作为javascript中Date对象的常见应用,用途较广泛.本文将详细说明简易日历的实现思路 效果演示 HTML说明 使用type=number的两个input分别作为年和月的输入控件,这样在高级浏览器下自带调节按钮 按照周日到周一的顺序进行星期的排列 <div class="box"> <header class='control'> <input id="con

Javascript中的对象和原型(3)

在Javascript中的对象和原型(二)中我们提到,用构造函数创建的对象里面,每个对象之间都是独立的,这样就会降低系统资源的利用率,解决这样问题,我们就要用到下面提到的原型对象. 一 原型对象 原型对象实际上就是构造函数的一个实例对象,和普通的实例对象没有本质上的区别.可以包含特定类型的所有实例的共享属性或者方法.这样,如果我们需要修改所有实例中的属性或者方法,就只需要修改一处,就能够影响到所有实例了.因为原型中的属性和方法是共享的.我们可以看下两个图示:       构造函数方式 原型模式方

JavaScript中String对象处理HTML标记中文本的方法

big():创建一个<big></big>标记,将这个字符串的字体变大blink():创建一个<blink></blink>标记,使字符串具有闪烁效果bold():创建一个<bold></bold>标记,使字符串加粗显示fixed():创建一个<tt></tt>标记,使字符串固定倾斜显示italics():创建一个<i></i>标记,使字符串以斜体显示small():创建一个<sm

JavaScript中RegExp对象

JavaScript中RegExp对象是保存有关正则表达式模式匹配信息的固有全局对象.使用方法: RegExp.property 必选项property 参数是 RegExp 对象的任意一个属性. RegExp 对象不能直接创建,但始终可以使用.在成功的正则表达式查找完成之前,RegExp 对象各属性的初始值如下所示: 属性简写初始值 index-1www.hljmlyfcyy.com lastIndex-1 lastMatch$&空字符串. lastParen$+空字符串. leftConte

javascript中Date对象的应用

前面的话 简易日历作为javascript中Date对象的常见应用,用途较广泛.本文将详细说明简易日历的实现思路 效果演示 HTML说明 使用type=number的两个input分别作为年和月的输入控件,这样在高级浏览器下自带调节按钮 按照周日到周一的顺序进行星期的排列 <div class="box"> <header class='control'> <input id="conYear" class="con-in&q