JavaScript对象的创建

原创 2018年04月15日 00:27:17

一.最简单的两种创建方式

1.使用Object构造函数

var person =new Object();
person.name="cjh";
person.age=19;

2.对象字面量

var person={
  name :"cjh",
  age :19
}
需要注意的是,花括号内,成员与成员之间以逗号隔开,而最后一个成员后不能跟逗号,否则会在IE7及更早的版本中报错。成员名也可以直接使用字符串。其一大优点是可以向函数传递大量参数。如下
function show(arg){
var output="";
if(typeof arg=="string"){
  output+="name: "+"arg.name"+"\n";
}
if(typeof arg=="number"){
 output+="age: "+"arg.age"+"\n";
}
alert(output);
}
show({
 name: "cjh",
 age:19
});

二.更高级的创建方法

虽然可以用上述两种创建方式,但使用同一个接口创建很多对象时会产生大量代码。由于在ECMAScript中没有类的概念,开发人员发明了更为高效的几种方法来创建对象。

1.工厂模式

代码如下
function creat(name){
 var o=new Object();
 o.name=name;
 o.SayName=function(){
   alert(this.name);
};
 return o;
}

然而,工厂模式并不能解决对象的识别问题,无法知道一个对象的类型,于是又有了下面这种创建方式

2.构造函数模式

将上面的例子用构造函数模式重写
function Person(name){
 this.name=name;
 this.SayName=new function(){
  alert(this.name);
 };
}
var me=new Person("CJH");
这个构造函数里没有显式创造对象,而是直接将属性和方法赋值给this对象,也没有返回值。还应注意到构造函数的首字母应当大写以此与非构造函数相区分。
在使用构造函数创建对象时实际上经历了如下四个步骤
(1).创建一个新对象;
(2).将构造函数的作用域赋给新对象;
(3).执行构造函数中的代码;
(4).返回新对象
由构造函数生成的对象,都有一个constructor属性指向其构造函数Person,该对象既是Object的实例,又是Person的实例。


应当注意,构造函数也是函数,如果不通过new进行调用,也可以作为普通函数将属性添加到this中,亦可在另一个对象中调用。

那么这种创建方式有没有缺陷呢?当然有。在每次使用构造函数时,每一个方法都会被重新创建一遍,也就是说创建两个对象的o1和o2的相同方法实际上指的不是同一个函数。这个问题大可如下改进
function Person(name){
  this.name=name;
  this.SayName()=SayName;
}
function SayName(){
  alert(this.name);
}

可惜这种创建方式使创建对象的过程毫无封装性可言。于是,原型模式应运而生!

3.原型模式

使用构造函数创建的对象都有一个prototype属性,该属性是一个指针指向一个对象,即此对象的原型对象。直接贴代码
function Person(){}
  person.prototype.name="CJH";
  person.prototype.SayName=function(){
    alert(this.name);
};
var p1=new Person;
p1.SayName();//"CJH"
这种方法创建的对象共有相同的方法和同一组属性。

无论何时创建了一个新函数,都会为该函数创建一个prototype属性,这个属性指向函数的原型对象。默认下,所有prototype对象都会有一个constructor属性:指向prototype属性所在函数的指针,即上文中的构造函数。而使用构造函数创建对象实例的时候,会在实例中自动创建一个[[prototype]]指针,指向实例的原型对象。该指针不能被任何方式访问到。
我们可以用isPrototy()peOf方法来确认
alert(Person.prototype.isPrototypeOf(p1));//true

ECMAScript5增加了一个叫Object.getPrototypeOf()的方法可以返回[[prototype]]的值,例如
alert(Object.getPrototypeOf(p1).name)//"CJH"
虽然可以通过访问实例返回原型的属性值,但却不能通过实例改变原型的属性值。如果我们在实例中添加了一个属性,而该属性与原型中的属性重名,那么该属性会在这个实例里屏蔽掉原型中那个属性,如下
function Person(){}
Person.prototype.name="CJH";
var p1=new Person();
p1.name="CTC";
var p2=new Person();
alert(p1.name)//"CTC"
alert(p2.name)//"CJH"
使用hasOwnProperty()方法可以检测一个属性是否存在与实例中还是存在与原型中。这个方法在给定属性存在于对象实例时才返回true。
function Person(){}
Person.prototype.name="CJH";
var p1=new Person();
alert(p1.hasOwnproperty("name"));//false
p1.name="CTC";
alert(p1.hasOwnproperty("name"));//true

通过这个方法,属性存在于实例还是原型一目了然


更简单的原型语法

用原型模式创建对象时每个属性都要打一遍Person.prototype。为了减少不必要的代码,常用一个包含所有属性和方法的对象字面量来重写原型对象。
function(){}
Person.prototype={
 name:"CJH";
 SayName:function(){//};
}
可是,使用这种方式的话,constructor属性不再指向Person了。这种方法完全重新创建了原型对象,constructor对象也指向了Object。
我们可以在重构原型对象时添加“constructor:Person,”既可。
在原型修改或添加的属性后在所有实例中会对应发生响应。然而重构整个prototype对象的话,情况就不同了。因为重构之后切断了原型与构造函数之间的联系。

原型模式的缺点

省略传参过程会带来许多不便,但这不是最大的问题。当包含引用类型属性时,问题就突出了。创造的实例中的所有对应属性都指向同一引用。因此我们有了下面这种方式

4.原型+构造函数

这是JS中最常用的创建对象的方式了,简而言之就是将实例属性在构造函数中定义,将所有共有属性和方法在构造函数的prototype中进行定义,可以完美解决上文中原型模式的缺点。代码不贴了

这篇文章只是做一个粗略的介绍,而且还剩下动态原型模式,寄生构造函数模式,稳妥构造函数模式没有讲,天色已晚,以后补充。



JavaScript中的对象,如何创建对象,创建对象的7种模式

ECMA-262把对象定义为:”无需属性的集合,其属性可以包含基本值、对象或者函数。”严格来讲,这就相当于说明对象是一组没有特定顺序的值。对象的每个属性或方法都有一个名字,而每个名字都映射到一个值。正...
  • u014346301
  • u014346301
  • 2016-08-14 16:33:32
  • 10177

【javascript】如何在Javascript中创造map对象?

首先们知道map对象是由键值对的形式来存储有结构的数据。而javascript中只有数组对象。那么能不能利用Array来存储有键值对形式的对象呢?下面将展示在JS中如何创建MAP对象。 /** * ...
  • u013412066
  • u013412066
  • 2015-03-01 10:31:42
  • 1057

Javascript创建XMLHttpRequest对象的3种方式

XMLHttpRequest对象的创建
  • u011437847
  • u011437847
  • 2016-04-28 19:44:33
  • 1515

使用JavaScript创建一个字符串对象

 创建一个字符串对象让我们先看一下隐式地方法:开始我们会声明一个新的变量,并给它赋一个基本类型的新字符串来初始化它。现在试着使用一下typeof()来确认一下变量myStringPrimitive 中...
  • newhappy2008
  • newhappy2008
  • 2008-01-03 22:28:00
  • 1991

javascript创建对象以及使用for(.. in ..)遍历对象的属性!

var txt=""; var person=new Object(); person.name="yuanqiao"; person.sex="boy"; person.age=15; ...
  • u010523770
  • u010523770
  • 2015-06-01 11:38:10
  • 1685

JavaScript如何创建一个对象

我们可以利用JavaScript的语法特征,以类的思想来创建对象。 方法一:原始方法 代码如下: var obj = new Object(); obj.name = "Kitty"...
  • u010297791
  • u010297791
  • 2017-02-19 10:04:56
  • 2482

JavaScript创建对象的三种方法

1. var person = new Object();这行代码创建了Object引用类型的一个新实例,然后把该实例对象保存在变量person中。使用的构造函数是Object,它只为新对象定义了默认...
  • u010552788
  • u010552788
  • 2016-03-10 18:55:12
  • 2367

JavaScript创建Map对象(转)

JavaScript创建Map对象(转)    JavaScript 里面本身没有map对象,用JavaScript的Array来实现Map的数据结构。 /* * ...
  • Mr__fang
  • Mr__fang
  • 2014-12-19 10:16:48
  • 11452

JavaScript 内置对象创建及用法

一、 什么是对象 1.JS中所有事物都是对象,如字符串,数组,数值等等;每个内置对象都带有属性(比如每个a标签都带有href)和方法(对象提供的一些使用方法,如通过方法得到日期) 2.JS允...
  • w_linux
  • w_linux
  • 2017-05-03 22:12:37
  • 864

js 创建Date对象5种方式

js 创建Date对象5种方式
  • xu511739113
  • xu511739113
  • 2017-05-27 10:51:43
  • 165
收藏助手
不良信息举报
您举报文章:JavaScript对象的创建
举报原因:
原因补充:

(最多只允许输入30个字)