`
hcl19891022
  • 浏览: 6511 次
社区版块
存档分类
最新评论

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运算符。
  
  以上就是全部的创建对象方法。目前使用最广泛的就是混合构造函数/原型方式,此外,动态原型方式也很流行。在功能上与构造函数/原型方式等价。

分享到:
评论

相关推荐

    js自定义对象

    JavaScript自定义对象 在JavaScript中,自定义对象是一种非常重要的概念,它允许开发者创建自己的对象类型,从而满足不同的需求。JavaScript自定义对象可以通过多种方式创建,包括工厂方法、构造函数、原型方式和...

    js自定义对象讲解

    在JavaScript中,自定义对象和原型是强大的工具,能够帮助开发者构建复杂的应用程序。理解并熟练掌握这些概念是成为JavaScript专家的关键步骤。通过自定义对象和原型,我们可以创建具有定制功能的对象,以适应各种...

    JS:自定义对象

    根据给定的文件信息,我们将深入探讨JavaScript中的自定义对象创建与使用,这在现代Web开发中是一项核心技能。下面将详细解析如何在JavaScript中创建和操作自定义对象,包括对象字面量、构造函数、原型链以及静态...

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

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

    超简单JavaScript自定义对象的自定义事件机制示例

    1、超简单JavaScript自定义对象的自定义事件机制示例。 2、带示例及详细注释,总共40行左右的代码。支持多播、任意多个参数。 3、不需要定义和引用其它任何东东。

    JS中自定义类和对象.doc

    在这个例子中,`createFruit` 函数作为工厂方法,用于创建具有相同属性和方法的新对象。然而,这种做法有一些缺点: - **重复创建**: 每个对象都有自己的 `showName` 方法副本,这会增加内存消耗。 - **不易扩展**: ...

    第 4 章 自定义对象及表格操作.pptx

    本节课程目标是了解 JavaScript 自定义对象的建立方案、定义、创建及其属性和方法的访问,并掌握表格的操作。通过学习本节课程,学生将能够使用混合模式(原型模式 + 构造函数模式)建立自定义对象,通过表单动态...

    Javascript 中创建自定义对象的方法汇总

    在JavaScript中,创建自定义对象是编程中常见的需求,用于构建复杂的系统和应用程序。以下是几种主要的方法,包括对象字面量、构造函数、工厂模式、自定义构造函数和原型模式。 1. **对象字面量**: 这是最简单的...

    eventdispatcher.js, 自定义对象的JavaScript事件.zip

    eventdispatcher.js, 自定义对象的JavaScript事件 eventdispatcher.js 自定义对象的JavaScript事件用法[removed][removed][removed]

    T16.3_JavaScript自定义对象与扩展 java 经典教程 经典教材

    T16.3_JavaScript自定义对象与扩展 java 经典教程 经典教材

    JS自定义对象创建与简单使用方法示例

    当我们需要创建一组具有相似属性和方法的对象时,定义一个自定义对象(或类)可以避免重复编写相同的代码。 ### 面向对象编程的概念 在JavaScript中,虽然它不是严格的面向对象语言,但我们可以通过构造函数和原型...

    JS自定义对象实现Java中Map对象功能的方法

    本文实例讲述了JS自定义对象实现Java中Map对象功能的方法。分享给大家供大家参考。具体分析如下: Java中有集合,Map等对象存储工具类,这些对象使用简易,但是在JavaScript中,你只能使用Array对象。 这里我创建一...

    自定义JS类框架

    2. 原型链:JavaScript中的原型允许对象间共享属性和方法。`__proto__`指向了构造函数的`prototype`,而`prototype`上定义的方法可以被所有实例访问。自定义框架可能利用这一点创建通用的功能。 3. jQuery集成:...

    arcgis for js自定义鼠标样式.zip

    在ArcGIS for JS API中,可以使用`MapView`对象的`setCursor`方法来更改鼠标的样式。例如: ```javascript view.setCursor('pointer'); // 更改为指针样式 ``` 同时,你还可以创建自己的CSS样式来实现更复杂的鼠标...

    用js实现自定义标签

    本案例通过JavaScript来实现自定义标签的功能。具体而言,它通过遍历文档中的内容,将自定义的标签转换为标准的HTML标签,并应用相应的样式。下面我们将详细介绍其实现细节。 #### 自定义标签代码解析 ```...

    FineReport中如何用JavaScript自定义地图标签

    总的来说,FineReport通过引入JavaScript自定义功能,极大地增强了其地图组件的灵活性和适用性。用户可以根据自身业务需求,编写复杂的逻辑来实现地图标签和提示点的个性化显示,从而提供更加丰富和精确的数据可视化...

    JavaScript自定义事件介绍

    随着web技术发展,使用JavaScript自定义对象愈发频繁,让自己创建的对象也有事件机制,通过事件对外通信,能够极大提高开发效率。 简单的事件需求 事件并不是可有可无,在某些需求下是必需的。以一个很简单的需求为...

    把数组和自定义对象转换成字符串.docx

    在IT领域,尤其是在JavaScript编程中,经常需要将数据结构如数组和自定义对象转换为字符串,以便于在网络请求(如URL参数)、存储(如cookies)或其他需要文本表示的场景中使用。本文将深入探讨如何实现这种转换,并...

Global site tag (gtag.js) - Google Analytics