JavaScript中定义对象的几种方式

JavaScript中没有类的概念，只有对象。

在JavaScript中定义对象可以采用以下5种方式（附加改进方式）：

1.基于已有对象扩充其属性和方法

2.工厂方式

3.构造函数方式

4.原型（“prototype”）方式

5.动态原型方式

一.基于已有对象扩充其属性和方法

<span style="font-size:14px;"><script   type="text/javascript">var obj=new Object()       //obj={}  也可以这样声明对象;obj.name="zhangq0123";obj.outName=function(name){this.name=name;console.log(this.name);}obj.outName("zhangq");
</script></span>

这种方式的弊端：这种对象的可复用性不强，如果需要使用多个对象，还需要重新扩展其属性和方法。

二.工厂方式

<span style="font-size:14px;"><script type=text/javascript>
function createObject(){var obj= new Object();obj.username= "zhangq0123";obj.password="123";obj.getMessage= function(){console.log(this.username+","+this.password);}return obj;
}
var obj1= createObject();
var obj2= createObject();
obj1.getMessage();   //zhangq0123,123
</script></span>

改进一：带参数的构造函数：

<script type=text/javascript>
function createObject(username, password)
{var object = new Object();object.username = username;object.password = password;object.get = function(){alert(this.username + ", " + this.password);}return object;
}
var obj1 = createObject("zhangq0123", "123");
obj1.get();
</script>

改进二：让多个对象共享函数对象，这样，不用每个对象都生成一个函数对象。

<span style="font-size:14px;"><script  type=text/javascript>
function  getMassage(username,password){console.log(this.username+","+this.password);
}//函数对象只有一份。
function   createObject(){var obj=new  Object();obj.username= username;obj.password= password;obj.getMessage= getMassege;    //每一个对象的函数对象都指向同一个函数对象。return  obj;
}
var obj1= createObject("zhangq0123","0123");
var  obj2 createObject("zhangq","123");
</script></span>

优点：让一个函数对象被多个对象所共享，而不是每一个对象拥有一个函数对象。

缺点：对象和它的方法定义分开了，可能会造成误解和误用。

三.构造函数方式

注：构造函数的定义方法其实和普通的定义函数相同。

<span style="font-size:14px;"><script  type="text/javascript">
function Person()
{//在执行第一行代码前，js引擎会为我们生成一个对象this.username = "zhangq0123";this.password = "123";this.getMessage = function(){console.log(this.username + ", " + this.password);} //此处有一个隐藏的return语句，用于将之前生成的对象返回//只有在后面用new的情况下，才会出现注释所述的这两点情况}//生成对象
var zhangq = new Person();//用了new
zhangq.getMessage();  //zhangq0123,123
</script> </span>

改进一：加上参数：

<span style="font-size:14px;"><script  type="text/javascript">
function Person(username, password)
{this.username = username;this.password = password;this.getMessage = function(){console.log(this.username + ", " + this.password);}
}
var zhnagq = new Person("zhangq0123", "123");
zhangq.getMessage();   //zhango123,123
</script></span>

四.原型（“prototype”）方式

<span style="font-size:14px;"><script>
function Person()
{
}Person.prototype.username = "zhangq0123";
Person.prototype.password = "123";Person.prototype.getMessage = function()
{console.log(this.username + ", " + this.password);
}
var zhangq1 = new Person();
var zhangq2 = new Person();zhangq1.username = "zhangq";zhangq1.getMessage();   //zhangq, 123
zhangq2.getMessage();   //zhangq0123, 123
</script></span>

使用原型存在的缺点：

1.不能给函数（如Person）传参数；2.有可能会导致程序的错误。

改进一：username改为数组后；

<span style="font-size:14px;">function Person()
{
}Person.prototype.username = new Array();
Person.prototype.password = "123";
Person.prototype.getMessage = function()
{console.log(this.username + ", " + this.password);
}var zhangq1 = new Person();
var zhngaq2 = new Person();zhangq1.username.push("zhangq0123");
zhangq1.username.push("zhangq01234");
zhangq1.password = "456";person.getMessage(); //输出：zhangq0123,zhangq01234, 456
person2.getMessage(); //输出：zhangq0123,zhangq01234, 123//虽然没有对person2对象进行修改，但是它的name和person是一样的，即为zhangq0123,zhangq01234。</span>

注：这是因为使用原型方式，person和person2指向的是同一个原型，即对应了同样的属性对象。对于引用类型(比如数组)，两个对象指向了同一个引用，所以对一个所做的更改会影响另一个。而对于字符串(字面常量值)，重新赋值之后就指向了另一个引用，所以二者的修改互不影响。

改进一：对原型方式改进（建议使用这定义对象的方式）

即：使用原型+构造函数方式来定义对象，对象之间的属性互不干扰，各对象之间共享同一个方法。

<span style="font-size:14px;"><script type="text/javascript">
//使用原型+构造函数方式来定义对象function Person()
{this.username = new Array();this.password = "123";
}Person.prototype.getMessage = function()
{console.log(this.username + ", " + this.password);
}var zhangq1 = new Person();
var zhangq2 = new Person();zhangq1.username.push("zhangq0123");
zhangq2.username.push("zhangq01234");zhangq1.getMessage();    //zhangq0123, 123
zhangq2.getMessage();   //zhangq01234, 123</script></span>

五.动态原型方式

<span style="font-size:14px;"><script type="text/javascript">
function Person()
{this.username = "zhang0123";this.password = "123";if(typeof Person.flag == "undefined"){//此块代码应该只在第一次调用的时候执行console.log("invoked");Person.prototype.getMessage = function(){//这个方法定义在原型中，会被每一个对象所共同拥有console.log(this.username + ", " + this.password);}Person.flag = true;//第一次定义完之后，之后的对象就不需要再进来这块代码了}
}var zhangq1 = new Person();
var zhangq2 = new Person();zhangq1.getMessage();    //zhangq0123,123
zhangq2.getMessage();    //zhangq0123,123</script></span>

PS：猿猿们有什么想法可以留言给我呦！

JavaScript中定义对象的几种方式相关推荐

javascript中定义事件的三种方式
在javascript中,可以为某个元素指定事件,指定的方式有以下三种: 1.在html中,使用onclick属性 2.在javascript中,使用onclick属性 3.在javascipt中,使 ...
1.JavaScript中定义数组的两种主要方式
JavaScript中定义数组的两种主要方式(new Array()和[]方式) new Array() ①可以用像JAVA的那种写法的方式定义,如 var arr = new Array() 这样定 ...
javaScript中创建数组的3种方式
JS数组定义及详解 javascript如何定义数组? 直接上代码和截图 //javaScript中创建数组的3种方式 //方式1 var names = ["令狐冲", &quo ...
代码示例：Java中定义数组的三种方式
在Java中,数组的定义有三种方式,其基本语法格式如下: 数组类型[] 数组名 = new 数组类型[数组长度]; 数组类型[] 数组名 = new 数组类型[]{数组元素0,数组元素1,...}; ...
java中定义数组的3种方式
直接上代码和截图 public static void main(String[] args) {// 定义数组的3种方式// 第一种String[] role = new String[3];rol ...
JavaScript 创建类/对象的几种方式
在JS中,创建对象(Create Object)并不完全是我们时常说的创建类对象,JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活的. JS对象是一种复合类型,它允许你通过变量 ...
c语言向文件中写入字符串_C语言中定义字符串的两种方式及其比较
先看如下代码: 以上用两种方式定义一个字符串: 1.定义一个char * 类型指针,指向字符串首字符首地址. 2.定义一个数组,数组里存放元素为字符串各个字符+'0',其中'0'为码0值,编译器会自动 ...
C++中定义别名的几种方式总结
背景在代码编辑过程中,为了书写省事或者更容易理解,通常会自定义别名,包括类型别名.方法别名等.在 C++ 中定义别名有以下几种方式. #define ①．概述 #define 是宏定义,作用就是将一 ...
【JS】JavaScript中创建数组的6种方式（代码示例合集）
创建数组的6种方式 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...

JavaScript中定义对象的几种方式

JavaScript中定义对象的几种方式相关推荐

最新文章

热门文章