javascript 对象的定义方法

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中也可以看到。

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

与工厂方式所不同的是,这种方式使用new运算符。

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

(0)

相关推荐

  • JavaScript中的全局对象介绍

    对于任何JavaScript程序,当程序开始运行时,JavaScript解释器都会初始化一个全局对象以供程序使用.这个JavaScript自身提供的全局对象的功能包括: 1.全局对象拥有一些常用的属性值.比如undefined.Infinity以及NaN. 2.全局对象拥有一些常用的属性对象.比如Math.JSON和Number对象均为该全局对象的属性. 3.全局对象提供一些全局函数供调用.比如isNaN().isFinite().parseInt()和eval()等. 4.全局对象提供一些全局

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

    如下所示: 复制代码 代码如下: var person = new Object(); person.name = "Nicholas"; person.age = "29" person.job = "Software Engineer"; person.sayName = function () { alert(this.name); }; person.sayName();上面的例子创建了一个名为person的对象,并为它添加了三个属性(n

  • javascript中全局对象的isNaN()方法使用介绍

    复制代码 代码如下: <html> <head> <title>全局对象的isNaN()方法</title> <script> /* isNaN() 函数通常用于检测 parseFloat() 和 parseInt() 的结果,以判断它们表示的是否是合法的数字. 当然也可以用 isNaN() 函数来检测算数错误,比如用 0 作除数的情况. */ document.write(isNaN(123) + "<br/>"

  • javascript 对象定义方法 简单易学

    工厂模式: 初级开发者可能会这样定义对象: var obj = new Object(); obj.name = "hero"; obj.showName=function (){alert(this.name);} 这里存在一个问题就是如果我们要在多个地方用obj对象,可能在程序中类似的代码要写好多遍,于是产生了工厂方法 function createObj() { var obj = new Object(); obj.name="hero"; obj.show

  • JS中类或对象的定义说明

    我们知道,JS是面向对象的.谈到面向对象,就不可避免的要涉及类的概念.一般像c#,java这些强类型语言都有固定的定义类的语法.而JS的不同之处在于它能使用各种方法实现自己的类和对象.一般的实现有以下几种方式: 1.工厂方式工厂方式是指创建一个返回特定对象类型的工厂函数,示例代码如下: 复制代码 代码如下: function createCar(sColor,iDoors,iMpg){   var oTempCar=new Object;   oTempCar.color=sColor;   o

  • js 多种变量定义(对象直接量,数组直接量和函数直接量)

    对象直接量创建一个对象: 复制代码 代码如下: var obj = {x:[1,2],y:23}; 代码跟下面是一样的. 复制代码 代码如下: var obj=new Object(); obj.x=new Array(1,2); obj.y=23; 测试: 复制代码 代码如下: for(var i in obj) alert(obj[i]); 函数直接量:它是一个表达式而不是语句. 复制代码 代码如下: (function(){})() 如下例: 复制代码 代码如下: (function(){

  • javascript中全局对象的parseInt()方法使用介绍

    复制代码 代码如下: <html> <head> <title>全局对象的parseInt() 方法</title> <script> /* parseInt() 函数可解析一个字符串,并返回一个整数. 1.解析字符串,直到不能解析为止 2.进制转化中,解析字符串,直到不能解析为止 */ document.write(parseInt("123") + "<br/>");//123 docume

  • Nodejs学习笔记之Global Objects全局对象

    一,开篇分析 在上个章节中我们学习了NodeJS的基础理论知识,对于这些理论知识来说理解是至关重要的,在后续的章节中,我们会对照着官方文档逐步学习里面的各部分模块,好了该是本文主角登台亮相的时候了,Global 让我们来看一下官方的定义: Global Objects全局对象These objects are available in all modules. Some of these objects aren't actually in the global scope but in the

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

    Javascript 中创建对象,可以有很多种方法. Object构造函数/对象字面量: 抛开设计模式不谈,使用最基本的方法,就是先调用Object构造函数创建一个对象,然后给对象添加属性. 复制代码 代码如下: var student = new Object();      student.name = "xiao ming";      student.age = 20;      student.getName = function () {          alert(th

  • JavaScript定义全局对象的方法示例

    本文实例讲述了JavaScript定义全局对象的方法.分享给大家供大家参考,具体如下: !function (factory) { factory(window['Hi'] = { __a: function () { console.log('Hi.__a'); }, __b: function () { console.log('Hi.__b'); }, __c: function () { console.log('Hi.__c'); } }); }(function (Hi) { if

  • Javascript 陷阱 window全局对象

    function Test(){ this.name='Test'; var name=2; this.show=function(){ alert(name); alert(this.name);//显示名字 } } var test=new Test();//通过构造器创建一个对象 test.show();//输出2和'Test' ,说明对象方法访问其属性时必须加this. function Test2(){ this.name='Test2'; this.show=function(){

  • 浅析JavaScript中两种类型的全局对象/函数

    这里所说的JavaScript指浏览器环境中的包括宿主环境在内的.第一种是ECMAScript Global Object,第二种是宿主环境(Host)下的全局对象/函数. 一.核心JavaScript内置对象,即ECMAScript实现提供的不依赖于宿主环境的对象 这些对象在程序执行之前就已经(实例化)存在了.ECMAScript称为The Global Object,分为以下几种 1, 值属性的全局对象(Value Properties of the Global Object).有NaN,

随机推荐