`

JS创建对象

阅读更多
javascript 对象的定义(2007-05-23 22:15:46)
 今天在完成公司的任务过程中,差了一些资料。找到了下面这篇关于js中对象定义的介绍,很全面。
 

JS中定义类的方式有很多种:
1、工厂方式
  
  function Car(){
   var ōcar = new Object;
   ocar.color = "blue";
   ocar.doors = 4;
   ocar.showColor = function(){
    document.write(this.color)
   };
   return ocar;
  }
  
  var car1 = Car();
  var car2 = Car();
  
  调用此函数时将创建新对象,并赋予它所有的属性和方法。使用此函数可以创建2个属性完全相同的对象。当然我妹可以通过给它传递参数来改版这种方式。
  
  function Car(color,door){
   var ōcar = new Object;
   ocar.color = color;
   ocar.doors = door;
   ocar.showColor = function(){
    document.write(this.color)
   };
   return ocar;
  }
  
  var car1 = Car("red",4);
  var car2 = Car("blue",4);
  car1.showColor()  //output:"red"
  car2.showColor()  //output:"blue"
  
  现在可以通过给函数传递不同的参数来得到具有不同值的对象。
  
  在前面的例子中,每次调用函数Car(),都要创建showcolor(),意味着每个对象都有一个自己的showcolor()方法。
  但是事实上,每个对象斗共享了同一个函数。
  
  虽然可以在函数外定义方法,然后通过将函数的属性指向该方法。
  
  function showColor(){
   alert(this.color);
  }
  
  function Car(){
   var ōcar = new Object();
   ocar.color = color;
   ocar.doors = door;
   ocar.showColor = showColor;
   return ocar;
  }
  
  但是这样看起来不像是函数的方法。

2、构造函数方式
  
  构造函数方式同工厂方式一样简单,如下所示:
  
  function Car(color,door){
   this.color = color;
   this.doors = door;
   this.showColor = function(){
    alert(this.color)
   };
  }
  
  var car1 = new Car("red",4);
  var car2 = new Car("blue",4);
  
  可以看到构造函数方式在函数内部没有创建对象,是用this关键字。因为在调用构造函数时已经创建了对象,而在函数内部只能用this来访问对象属性。
  
  现在用new来创建对象,看起来像那么回事了!但是它同工厂方式一样。每次调用都会为对象创建自己的方法。
  
3、原型方式

  该方式利用了对象的prototype属性。首先用空函数创建类名,然后所有的属性和方法都被赋予prototype属性。
  
  function Car(){
  }
  
  Car.prototype.color = "red";
  Car.prototype.doors = 4;
  Car.prototype.showColor = function(){
   alert(this.color);
  }
  
  var car1 = new Car();
  var car2 = new Car();
  
  在这段代码中,首先定义了一个空函数,然后通过prototype属性来定义对象的属性。调用该函数时,原型的所有属性都会立即赋予要创建的对象,所有该函数的对象存放的都是指向showColor()的指针,语法上看起来都属于同一个对象。
  
  但是这个函数没有参数,不能通过传递参数来初始化属性,必须要在对象创建后才能改变属性的默认值。
  
  原型方式有个很严重的问题就是当属性指向的是对象时,如数组。
  
  function Car(){
  }
  
  Car.prototype.color = "red";
  Car.prototype.doors = 4;
  Car.prototype.arr = new Array("a","b");
  Car.prototype.showColor = function(){
   alert(this.color);
  }
  
  var car1 = new Car();
  var car2 = new Car();
  
  car1.arr.push("cc");
  
  alert(car1.arr);  //output:aa,bb,cc
  alert(car2.arr);  //output:aa,bb,cc
  
  这里由于数组的引用值,Car的两个对象指向的都是同一个数组,所以当在car1添加值后,在car2中也可以看到。
  
4、混合的构造函数/原型方式

  联合是用构造函数/原型方式就可以像其他程序设计语言一样创建对象,是用构造函数定义对象的非函数属性,用原型方式定义对象的方法。
  
  function Car(color,door){
   this.color = color;
   this.doors = door;
   this.arr = new Array("aa","bb");
  }
  Car.prototype.showColor(){
   alert(this.color);
  }
  
  var car1 = new Car("red",4);
  var car2 = new Car("blue",4);
  
  car1.arr.push("cc");
  
  alert(car1.arr);  //output:aa,bb,cc
  alert(car2.arr);  //output:aa,bb
  
  
5、动态原型方式

  动态原型的方式同混合的构造函数/原型方式原理相似。唯一的区别就是赋予对象方法的位置。
  
  function Car(color,door){
   this.color = color;
   this.doors = door;
   this.arr = new Array("aa","bb");
   
   if(typeof Car._initialized == "undefined"){
    Car.prototype.showColor = function(){
     alert(this.color);
    };
    Car._initialized = true;
   }
  }
  
  动态原型方式是使用一个标志来判断是否已经给原型赋予了方法。这样可以保证该方法只创建一次
  
6、混合工厂方式

  它的目的师创建假构造函数,只返回另一种对象的新实例。
  
  function Car(){
   var ōcar = new Object();
   ocar.color = "red";
   ocar.doors = 4;
   ocar.showColor = function(){
    alert(this.color)
   };
   return ocar;
  }
  
  与工厂方式所不同的是,这种方式使用new运算符。
  
  以上就是全部的创建对象方法。目前使用最广泛的就是混合构造函数/原型方式,此外,动态原型方式也很流行。在功能上与构造函数/原型方式等价。

分享到:
评论

相关推荐

    javascript创建对象的方式(二)

    这篇博客“javascript创建对象的方式(二)”可能详细介绍了在JavaScript中除了最基础的字面量语法之外的其他创建对象的方法。这里我们将深入探讨几种常见的创建对象的方式。 1. **构造函数**: JavaScript中的...

    javascript创建对象的方式(一)

    这篇博文主要探讨了JavaScript创建对象的几种常见方式,这对于理解和掌握JavaScript面向对象编程至关重要。在实际开发中,了解并灵活运用这些方法能够提高代码的可读性和可维护性。下面,我们将详细讲解标题中提到的...

    JavaScript创建对象的七种方式(推荐)

    JavaScript创建对象的方式有很多,通过Object构造函数或对象字面量的方式也可以创建单个对象,显然这两种方式会产生大量的重复代码,并不适合量产。接下来介绍七种非常经典的创建对象的方式,他们也各有优缺点。 ...

    javascript创建对象的方式(四)

    本文将深入探讨四种主要的JavaScript创建对象的方法,帮助你更好地理解和运用这些技巧。 1. **字面量语法(Literal Notation)** 字面量语法是最简单直接的创建对象的方式。它允许你在一行代码中创建一个对象,...

    javascript如何创建对象

    JavaScript创建对象的方法主要有以下几种: 一、直接创建 直接创建是通过new Object()来创建一个新的空对象,然后逐步给这个对象添加属性和方法。例如,创建一个名为person1的对象,并添加name、gender属性,以及一...

    在js中创建类和对象

    本文将详细介绍几种常见的创建对象的方法,包括它们的特点和优缺点。 5.1 工厂方法 工厂方法是一种创建对象的模式,通过一个函数来创建具有特定属性和行为的对象。在JavaScript中,我们可以定义一个函数,如`...

    JS 创建对象(常见的几种方法)

    JavaScript作为一门面向对象的脚本语言,其创建对象的方式多种多样,每种方式都有其独特的特点和适用场景。下面我们逐一分析给定文件中所提到的几种创建对象的方法。 首先是使用构造函数模式创建对象。构造函数是...

    js创建对象的几种方式及JSON.docx

    js创建对象的几种方式及JSON.docx

    js创建对象的几种方式及JSON.pdf

    js创建对象的几种方式及JSON.pdf

    js创建对象的几种方式

    1.new Object() 2.字面量创建对象 构造函数创建对象 工厂模式

    【JavaScript源代码】详解js创建对象的几种方式和对象方法.docx

    本文将深入探讨JavaScript中创建对象的几种常见方式以及对象方法。 首先,我们来看“工厂模式”。工厂模式是一种创建对象的抽象方式,通过一个函数来返回一个新的对象。例如: ```javascript function getObj(name...

    javascript创建对象的3种方法

    总结来说,JavaScript创建对象的方法有多种,每种都有其适用的场景。JSON对象适合临时使用,`Object`实例适合简单场景,而构造函数及原型链则更适合构建复杂的、可复用的对象模型。在实际开发中,应根据项目需求选择...

    js创建对象的几种常用方式小结(推荐)

    本文将详细介绍JavaScript创建对象的几种常见方式,以及它们的优缺点。 首先,我们来看**工厂模式**。这种方式通过一个函数来创建对象,它能创建具有相同属性和方法的对象。然而,工厂模式的缺点在于它没有明显的...

    JS创建对象的几中方式

    在JavaScript中,创建对象有多种方法,每种方式都有其优缺点。以下是对这些方法的详细解释: 1. **工厂方式**: 工厂函数是通过一个函数来创建对象,它可以根据需要设置属性和方法。然而,这种方法的缺点是每个...

    js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式).docx

    ### JavaScript面向对象之常见创建对象的方式 #### 引言 JavaScript 的灵活性体现在其创建对象的多种方式上。本文将详细介绍三种常见的对象创建方法:工厂模式、构造函数模式以及原型模式,并探讨它们各自的优缺点...

    Javascript创建自定义对象 创建Object实例添加属性和方法

    如下所示: 代码如下: var person...上面的例子创建了一个名为person的对象,并为它添加了三个属性(name、age和job)和一个方法(sayName())。其中,sayName()方法用于显示this.name()的值。早期的JavaScript开发人员

    js创建对象几种方式的优缺点对比

    本文将探讨JavaScript创建对象的几种常见方式,并分析它们的优缺点。 1. **工厂模式** 工厂模式通过一个函数来创建对象,如示例中的`createObj`函数。这种模式的优点是简单易懂,可以方便地创建具有相同属性和方法...

    js 面向对象实例

    综合以上知识,`js 面向对象实例`涵盖了JavaScript中的面向对象编程基础,以及如何将这些概念应用到HTML5 Canvas的实践中。通过学习和实践这个实例,你不仅可以理解JavaScript的OOP机制,还能掌握如何利用Canvas API...

Global site tag (gtag.js) - Google Analytics