JavaScript学习12 JS中定义对象的几种方式
JavaScript学习12 JS中定义对象的几种方式
JavaScript中没有类的概念,只有对象。
在JavaScript中定义对象可以采用以下几种方式:
1.基于已有对象扩充其属性和方法
2.工厂方式
3.构造函数方式
4.原型(“prototype”)方式
5.动态原型方式
一.基于已有对象扩充其属性和方法
<script type="text/javascript">
var object = new Object();
object.name = "zhangsan";
object.sayName = function(name)
{
this.name = name;
alert(this.name);
}
object.sayName("lisi");
</script>
这种方式的弊端:这种对象的可复用性不强,如果需要使用多个对象,还需要重新扩展其属性和方法。
二.工厂方式
function createObject()
{
var object = new Object();
object.username = "zhangsan";
object.password = "123"; object.get = function()
{
alert(this.username + ", " + this.password);
}
return object;
} var object1 = createObject();
var object2 = createObject(); object1.get();
改进一:采用带参数的构造方法:
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 object1 = createObject("zhangsan", "123"); object1.get();
改进二:让多个对象共享函数对象
这样,不用每个对象都生成一个函数对象。
function get()
{
alert(this.username + ", " + this.password);
} //函数对象只有一份
function createObject(username, password)
{
var object = new Object(); object.username = username;
object.password = password; object.get = get; //每一个对象的函数对象都指向同一个函数对象 return object;
} var object = createObject("zhangsan", "123");
var object2 = createObject("lisi", "456"); object.get();
object2.get();
优点:让一个函数对象被多个对象所共享,而不是每一个对象拥有一个函数对象。
缺点:对象和它的方法定义分开了,可能会造成误解和误用。
三.构造函数方式
构造函数的定义方法其实和普通的自定义函数相同。
function Person()
{
//在执行第一行代码前,js引擎会为我们生成一个对象
this.username = "zhangsan";
this.password = "123"; this.getInfo = function()
{
alert(this.username + ", " + this.password);
} //此处有一个隐藏的return语句,用于将之前生成的对象返回
//只有在后面用new的情况下,才会出现注释所述的这两点情况 } //生成对象
var person = new Person();//用了new
person.getInfo();
改进版:加上参数:
function Person(username, password)
{
this.username = username;
this.password = password; this.getInfo = function()
{
alert(this.username + ", " + this.password);
}
} var person = new Person("zhangsan", "123");
person.getInfo();
四.原型(“prototype”)方式
例子:
function Person()
{
} Person.prototype.username = "zhangsan";
Person.prototype.password = "123"; Person.prototype.getInfo = function()
{
alert(this.username + ", " + this.password);
} var person = new Person();
var person2 = new Person(); person.username = "lisi"; person.getInfo();
person2.getInfo();
使用原型存在的缺点:
1.不能传参数;
2.有可能会导致程序错误。
如果使用原型方式来定义对象,那么生成的所有对象会共享原型中的属性,这样一个对象改变了该属性也会反映到其他对象当中。
单纯使用原型方式定义对象无法在构造函数中为属性赋初值,只能在对象生成后再去改变属性值。
比如,username改为数组后:
function Person()
{
} Person.prototype.username = new Array();
Person.prototype.password = "123"; Person.prototype.getInfo = function()
{
alert(this.username + ", " + this.password);
} var person = new Person();
var person2 = new Person(); person.username.push("zhangsan");
person.username.push("lisi");
person.password = "456"; person.getInfo(); //输出:zhangsan,lisi, 456
person2.getInfo(); //输出:zhangsan,lisi, 123 //虽然没有对person2对象进行修改,但是它的name和person是一样的,即为zhangsan,lisi
这是因为使用原型方式,person和person2指向的是同一个原型,即对应了同样的属性对象。
对于引用类型(比如数组),两个对象指向了同一个引用,所以对一个所做的更改会影响另一个。
而对于字符串(字面常量值),重新赋值之后就指向了另一个引用,所以二者的修改互不影响。
对原型方式的改进:
使用原型+构造函数方式来定义对象,对象之间的属性互不干扰,各个对象间共享同一个方法。
<script type="text/javascript">
//使用原型+构造函数方式来定义对象 function Person()
{
this.username = new Array();
this.password = "123";
} Person.prototype.getInfo = function()
{
alert(this.username + ", " + this.password);
} var p = new Person();
var p2 = new Person(); p.username.push("zhangsan");
p2.username.push("lisi"); p.getInfo();
p2.getInfo(); </script>
五.动态原型方式
在构造函数中通过标志量让所有对象共享一个方法,而每个对象拥有自己的属性。
<script type="text/javascript"> function Person()
{
this.username = "zhangsan";
this.password = "123"; if(typeof Person.flag == "undefined")
{
//此块代码应该只在第一次调用的时候执行
alert("invoked"); Person.prototype.getInfo = function()
{
//这个方法定义在原型中,会被每一个对象所共同拥有
alert(this.username + ", " + this.password);
} Person.flag = true;//第一次定义完之后,之后的对象就不需要再进来这块代码了 }
} var p = new Person();
var p2 = new Person(); p.getInfo();
p2.getInfo(); </script>
参考资料
圣思园张龙老师Java Web视频教程。
W3School JavaScript教程:http://www.w3school.com.cn/js/index.asp
英文版:http://www.w3schools.com/js/default.asp
JavaScript学习12 JS中定义对象的几种方式的更多相关文章
- JavaScript学习12 JS中定义对象的几种方式【转】
avaScript学习12 JS中定义对象的几种方式 转自: http://www.cnblogs.com/mengdd/p/3697255.html JavaScript中没有类的概念,只有对象. ...
- js中定义对象的几种方式
转载:http://blog.sina.com.cn/s/blog_60f632050100wz7h.html (1)基于已有对象的扩充方法:适用于临时构建对象,弊端:每次构建对象都要新建一个. va ...
- (六)javascriptJS中定义对象的几种方式(转)
JavaScript学习12 JS中定义对象的几种方式 转自: http://www.cnblogs.com/mengdd/p/3697255.html JavaScript中没有类的概念,只有对象 ...
- JavaScript中定义对象的四种方式
最近在阅读< JavaScript 高级程序设计>,未免遗忘读过的内容,就打算以博客的形式做些读书笔记.今天介绍的是 JavaScript 中的四种定义对象的方法,除了这四种方法,还有工厂 ...
- JS中访问对象的两种方式区别
可以使用下面两种方式访问对象的属性和方法 1.对象名.属性名 对象名.方法名() 2.对象名["属性名"] 对象名["方法名"]() var obj = { n ...
- js中定义变量的三种方式const,val,let 的区别
js中三种定义变量的方式const, var, let的区别. 1.const定义的变量不可以修改,而且必须初始化. 1 const b = 2;//正确 2 // const b;//错误,必须初始 ...
- JS中定义对象和集合
在js中定义对象: 方式一: var obj = {}; obj['a']=1; obj['b']=2; 方式二: var obj=new Object(); obj.a=1; obj.b=2; 在j ...
- 基础篇:1.JavaScript运行在html中,引用有几种方式?—— 6.js中常用的输出方式?
书接上文,上文提到若干条JavaScript的基础性知识,大部分都是一些概念性的东西,本着认真严谨的态度,我们要认真对待,有些条目的问题是某个知识点的周边延伸,为节约篇幅,就一起整理了,如有描述不对的 ...
- js中声明Number的五种方式
转载自:http://www.jb51.net/article/34191.htm <!DOCTYPE html> <html> <head> <meta c ...
随机推荐
- Git的奇技淫巧🙈
Git的奇技淫巧
- Windows Azure Service Bus (3) 队列(Queue) 使用VS2013开发Service Bus Queue
<Windows Azure Platform 系列文章目录> 在之前的Azure Service Bus中,我们已经介绍了Service Bus 队列(Queue)的基本概念. 在本章中 ...
- JS&CSS文件请求合并及压缩处理研究(五)
接上篇.在我们最终调用 @Html.RenderResFile(ResourceType.Script) 或者 @Html.RenderResFile(ResourceType.StyleSheet) ...
- [Logstash-input-redis] 使用详解
redis插件的完整配置 input { redis { batch_count => 1 #返回的事件数量,此属性仅在list模式下起作用. data_type => "lis ...
- Asp.net 加密解密类
namespace Wedn.Net { /// <summary> /// EncryptHelper 来′自? wedn.net /// </summary> public ...
- CSS魔法堂:你真的懂text-align吗?
前言 也许提及text-align你会想起水平居中,但除了这个你对它还有多少了解呢?本篇打算和大家一起来跟text-align来一次负距离的交往,你准备好了吗? text-align属性详解 The ...
- Design Pattern: Not Just Mixin Pattern
Brief 从Mix-In模式到Mixin模式,中文常用翻译为“混入/织入模式”.单纯从名字上看不到多少端倪,而通过采用Mixin模式的jQuery.extend我们是否可以认为Mixin模式就是深拷 ...
- WinForm GDI+ 资料收集
UI(User Interface)编程在整个项目开发过程中是个颇为重要的环节,任何好的解决方案若没有良好的用户界面呈现给最终用户,那么就算包含了最先进的技术也不能算是好程序.UI编程体现在两个方面, ...
- Sandcastle入门:创建C#帮助文档
Sandcastle入门:创建C#帮助文档 今天学到了一个东西:利用vs2005生成的dll/xml来生成帮助文档. 完成这个伟大任务的是Sandcastle,微软推出的类库文档编译工具. 在开始这篇 ...
- JavaBean 的小知识点
/** * @author http://roucheng.cnblogs.com * @version 2016-05-08 */ public class Person { private Str ...