`
kilroy
  • 浏览: 7387 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

JS中定义类的几种方式

 
阅读更多

1、工厂方式 

  function Car(){ 
  var ocar = 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 ocar = 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 ocar = 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中也可以看到。 
 联合是用构造函数/原型方式就可以像其他程序设计语言一样创建对象,是用构造函数定义对象的非函数属性,用原型方式定义对象的方法。 

  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 ocar = new Object(); 
  ocar.color = "red"; 
  ocar.doors = 4; 
  ocar.showColor = function(){ 
  alert(this.color) 
  }; 
  return ocar; 
  } 

  与工厂方式所不同的是,这种方式使用new运算符。 
   
  以上就是全部的创建对象方法。目前使用最广泛的就是混合构造函数/原型方式,此外,动态原型方式也很流行。在功能上与构造函数/原型方式等价。 

上述非原创,乃转载而来

分享到:
评论

相关推荐

    JavaScript定义类的几种方式总结

    JavaScript定义类的几种方式包括工厂方式、构造函数和原型方式,每种方法都有其特点和适用场景,接下来我们将详细探讨。 工厂方式是最早期的面向对象编程在JavaScript中的实践之一。使用工厂方式定义类,本质上就是...

    Javascript对象定义的几种方式

    Javascript对象定义的几种方式

    JavaScript定义类或函数的几种方式小结

    JavaScript中定义类或函数,主要有以下几种方式: 1. 工厂方式 工厂方式是JavaScript中创建对象的一种模式,它通过一个工厂函数来封装创建对象的代码。通过工厂函数,我们可以创建多个具有相同属性和方法的对象实例...

    JAVASCRIPT中定义对象的几种方式.pdf

    在讨论JavaScript中定义对象的几种方式之前,我们先理解一下JavaScript中的对象到底是什么。JavaScript是一种基于原型的编程语言,对象是其核心概念之一。对象可以被视为一个容器,存储各种键值对集合,键为属性名,...

    JS函数的几种定义方式分析

    函数的定义方式多种多样,每种方式都具有特定的用途和特点。本文将对这些函数定义方式及其区别和使用技巧进行分析。 首先,我们来看第一种也是最常用的函数定义方式——函数声明: ```javascript function func1(...

    JS定义函数的几种常用方法小结

    本文实例讲述了JS定义函数的几种常用方法。分享给大家供大家参考,具体如下: 在 JavaScript 语言里,函数是一种对象,所以可以说函数是 JavaScript 里的一等公民(first-class citizens)。 之前我们这样定义过一个...

    关于JavaScript定义类和对象的几种方式

    本文将详细介绍在JavaScript中定义类和对象的几种主要方式,包括直接量方式、工厂方式以及原型方式,并探讨与之相关的变量声明提升(hoisting)机制和对象属性绑定机制。 首先,我们来看JavaScript中的一个有趣现象...

    CKevens#-#05-02.面向对象:类的定义和继承的几种方式1

    前言类与实例:类的声明生成实例类与继承:如何实现继承:继承的本质就是原型链继承的几种方式类的定义、实例化类的定义/类的声明方式一:用构造函数模拟类(传统写法)/

    在JavaScript中实现类的方式探讨

    在JavaScript中实现类的方式主要有几种,包括对象字面量(Object Literal)、构造函数(Constructor)、原型链(Prototype Chain)以及ES6引入的类语法。每种方式都有其适用的场景和特点,理解它们有助于我们更好地...

    haoyi2015#Web-1#05-02.面向对象:类的定义和继承的几种方式1

    前言类与实例:类的声明生成实例类与继承:如何实现继承:继承的本质就是原型链继承的几种方式类的定义、实例化类的定义/类的声明方式一:用构造函数模拟类(传统写法)/

    JavaScript中定义类的方式详解

    以上就是JavaScript中定义类的几种常见方式,虽然它们没有像其他面向对象语言那样提供显式的`class`关键字,但JavaScript的灵活性使得开发者可以通过这些技巧实现面向对象编程的需求。在实际开发中,随着ES6的引入,...

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

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

    浅谈几种常用的JS类定义方法

    本篇文章将深入探讨几种常用的JavaScript类定义方法,并解析它们的用法和特点。 首先,我们来看对象直接量(Object Literal)方法,这是一种非常简单的创建对象的方式。在对象直接量方法中,我们将对象的所有属性和...

    04 React事件 方法、 React定义方法的几种方式 获取数据 改变数据 执行方法传值

    接下来,我们讨论React中定义方法的几种方式。主要有以下三种: 1. **类组件的方法**:在类组件中,我们可以直接在类的定义中定义方法。这些方法是组件实例的一部分,可以通过`this`关键字访问。例如: ```jsx ...

    javascript中定义类的方法汇总

    在JavaScript中,定义类的方法多种多样,这使得开发者可以根据需求选择最合适的方式来创建对象。以下是几种主要的方法: 1. **工厂方式**: 工厂模式是一种创建对象的模式,通过函数来模拟类的概念。在JavaScript...

    js定义类的几种方法(推荐)

    以下是几种常用的定义类的方法,以及它们背后的重要知识点。 1. 工厂模式(Factory Pattern) 工厂模式是一种创建对象的方法,它通过一个工厂函数来创建对象,可以指定要创建的对象类型,并返回一个新的对象实例。...

Global site tag (gtag.js) - Google Analytics