`
fp_moon
  • 浏览: 981687 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

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运算符。

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

分享到:
评论

相关推荐

    javascript 对象定义方法 简单易学

    ### JavaScript对象定义方法详解 #### 一、引言 JavaScript是一种强大的编程语言,在Web开发领域占据主导地位。其中,对象是其核心概念之一,而如何有效地定义和使用对象则是掌握JavaScript的关键技能。本文将深入...

    JavaScript对象定义

    JavaScript对象定义是编程语言中的核心概念,它在Web开发中起着至关重要的作用。JavaScript是一种基于原型的对象导向语言,它的对象定义方式具有独特的灵活性。在本文中,我们将深入探讨JavaScript对象的定义、创建...

    javascript对象转换成json

    在JavaScript中,我们可以使用内置的`JSON.stringify()`方法将JavaScript对象转换为JSON字符串。 ### JSON.stringify()方法 `JSON.stringify()`是JavaScript中的全局函数,用于将JavaScript值转换为JSON字符串。它...

    javascript对象参考手册

    首先,手册的前几章会介绍JavaScript对象的基础知识,包括对象的创建、属性和方法的定义,以及对象与数据类型的关联。JavaScript中的对象是基于原型的,这意味着它们可以通过原型链共享属性和方法。此外,还会讲解...

    javascript定义对象

    字面量语法是定义JavaScript对象最简单、最常见的方法。通过大括号`{}`来创建一个空对象,然后通过键值对来添加属性和方法。例如: ```javascript var myObject = { name: 'John Doe', age: 30, sayHello: ...

    深入浅出JavaScript对象模型

    ### 深入浅出JavaScript对象模型 #### JavaScript对象的本质 根据ECMA262规范,ECMAScript被定义为一种基于对象的语言而非传统的面向对象语言。这意味着在JavaScript中,对象被视为存储数据的一种大型数组形式,...

    JavaScript核心对象参考手册

    2. **对象创建与原型Prototype**: JavaScript使用`new`关键字创建对象实例,原型链允许对象间共享属性和方法,`__proto__`或`prototype`属性是理解这一机制的关键。 3. **函数对象Function**: 在JavaScript中,函数...

    Javascript 面向对象的JavaScript进阶

    在JavaScript中,可以通过构造函数或类来创建对象,并通过定义方法来隐藏具体的实现细节。此外,ES6引入了类的概念,进一步增强了抽象的能力。 **示例代码:** ```javascript class USBDevice { constructor(name)...

    面向对象JavaScript精要(英文原版pdf)

    ### 面向对象JavaScript精要 #### 一、书籍概览 本书《面向对象JavaScript精要》由Nicholas C. Zakas编写,是面向对象编程领域中的权威指南之一,尤其针对JavaScript这门语言。作者深入浅出地介绍了面向对象编程的...

    JavaScript 对象.pdf

    创建 JavaScript 对象有两种不同的方法:使用 Object 定义并创建对象的实例,使用函数来定义对象,然后创建新的对象实例。使用 Object 构造函数可以创建一个对象包装器,例如:`var o = new Object(true);`。使用...

    javascript面向对象之定义成员方法实例分析.docx

    注意:当在外部定义方法时,如果希望方法能够访问对象的内部属性,通常需要使用 `bind` 方法或其他方法确保 `this` 的正确指向。 #### 四、实例分析 我们以第一个示例为例进行更详细的分析: 1. **构造函数定义**...

    JavaScript对象经典小册 chm

    综上所述,"JavaScript对象经典小册 chm"涵盖了JavaScript对象和数组的基础知识,以及相关的属性、方法和事件处理程序,是学习和提升JavaScript技能的宝贵资源。通过深入学习这些内容,开发者能够更好地应对复杂的...

    面向对象JavaScript开发

    3. **原型对象**:`prototype`属性是构造函数的一个属性,用于定义实例的公共属性和方法。当尝试访问对象的一个属性时,JavaScript会首先在当前对象中查找,如果找不到,就会沿着原型链向上查找,直到找到为止。 4....

    Javascript面向对象编程

    本文将详细介绍JavaScript中的面向对象编程概念和技术,包括类定义、对象创建、继承、封装等内容。 #### 二、类定义和对象创建 ##### 2.1 类定义 在JavaScript中,“类”这一概念并不像在Java或C#这样的强类型...

    JavaScript面向对象编程指南.pdf

    当使用new关键字调用构造函数时,JavaScript引擎会创建一个新的空对象,并且按照构造函数中定义的属性和方法来初始化这个新对象。 3. prototype:在JavaScript中,每个函数都有一个prototype属性,这个属性指向一个...

    JavaScript对象模型-执行模型

    JavaScript对象模型(Object Model)和执行模型是理解JavaScript工作原理的关键概念。JavaScript是一种基于原型的动态类型语言,其对象模型是其核心特性之一。本文将深入探讨JavaScript的对象模型和执行模型,以及...

    JavaScript面向对象基础.ppt

    8.3.1 JavaScript对象模型 JavaScript有全局对象、内置对象、宿主对象等层次结构,如DOM(文档对象模型)和BOM(浏览器对象模型)。 8.3.2 客户端对象层次介绍 客户端对象层次主要涉及浏览器提供的对象,如window、...

    JavaScript面向对象编程指南 pdf

    - JavaScript对象都有一个内置的`__proto__`属性,指向其构造函数的原型。原型是一个对象,可以包含共享的属性和方法。原型链允许对象访问其构造函数原型上的属性和方法。 - 使用`Object.prototype.isPrototypeOf...

Global site tag (gtag.js) - Google Analytics