JavaScript 中没有类的概念,所以它的对象也与基于类的语言中的对象有所不同。创建一个JavaScript对象有如下的方式,由浅入深一 一列举对比。
使用JavaScript中的Object来创建,如下代码:
var computer=new Object();
computer.color="White";
computer.brand="Apple";
computer.description=function(){
console.log(this.brand+","+this.color+" computer");
};
这种方式的缺点在于,如果创建很多对象,就需要有很多重复的代码,除了在测试及简单应用中使用上面的方式,基本很少使用了。
抽象出创建具体对象的过程,通过函数来间接生成对象,如下:
function createComputer(color,brand){
var o=new Object();
o.color=color;
o.brand=brand;
o.description=function(){
console.log(this.brand+","+this.color+" computer");
};
}
var macbookpro=createComputer("White","Apple");
var thinkpad=createComputer("black","IBM");
使用这种设计模式解决了创建多个相似对象的问题,但由于是通过函数方式来生成对象,所以无法识别一个对象的类型。
通过创建自定义的构造函数,在构造函数中定义对象的属性和方法,如下代码:
function Computer(color,brand){
this.color=color;
this.brand=brand;
this.description=function(){
console.log(this.brand+","+this.color+" computer");
};
}
var macbookpro=new Computer("White","Apple");
var thinkpad=new Computer("black","IBM");
可以看到,创建实例的时候,使用了关键字new操作符,这种方式的缺点就是每一个方法均需要在创建每一个实例的时候再创建一次。当然,我们可以把方法放在构造函数外面,通过函数变量指向外部方法来避免这个问题,但这样就破坏了OO的封装性,同时,所有的外部方法函数,均变为了"全局函数”。
【注】在使用new创建一个新的实例的时候,经过四个步骤。创建一个新对象;将构造函数的作用域给新对象(此时this就会指向这个新对象);执行构造函数中的代码(为新对象添加属性);返回新对象.
JavaScript中的每一个函数都有一个prototype属性,它可以包含由特定类型的所有实例共享的属性与方法,即生成一个让所有对象实例共享属性方法的原型对象类型。如下代码:
function Computer(){};
Computer.prototype.color="White";
Computer.prototype.brand="Apple";
Computer.prototype.description=function(){
console.log(this.brand+","+this.color+" computer");
};
var macbookpro1=new Computer();
var macbookpro2=new Computer();
即macbookpro1与macbookpro2两个变量访问同一组属性与方法。当然,上面的代码可以使用字面变量的方式重新写一下
function Computer(){};
Computer.prototype={
constructor: Computer,
color:"White",
brand:"Apple",
description:function(){
console.log(this.brand+","+this.color+" computer");
}
};
var macbookpro1=new Computer();
var macbookpro2=new Computer();
【注】以上在字面变量中添加constructor属性,并将其指向Computer对象,是因为使用字面变量的方式整体重写了Computer.prototype对象,造成Computer.prototype.constructor不是指向默认的Computer对象。
使用原型对象会有意想不到的效果,比如动态地添加一些属性。但同时,由于原型中所有属性是被很多实例所共享的,如果有属性是引用型的,那么只要在一个实例中改变这个引用型属性的值,所有其它的实例也会被影响。
结合这两种模式,可以使得每个实例都会有一份自已的实例属性副本,同时也共享对方法的引用,最大限度节省了内存。如下:
function Computer(color,brand){
this.color=color;
this.brand=brand;
};
Computer.prototype={
constructor: Computer,
description:function(){
console.log(this.brand+","+this.color+" computer");
}
};
var macbookpro=new Computer("White","Apple");
var thinkpad=new Computer("black","IBM");
这种模式算是标准的模式了,如果觉得构造函数与原型分开定义了,可以使用动态原型,将原型放入构造方法中,如下:
function Computer(color,brand){
this.color=color;
this.brand=brand;
if(typeof this.description != 'function'){
Computer.prototype.description=function(){
console.log(this.brand+","+this.color+" computer");
};
}
};
分享到:
相关推荐
主要介绍了JavaScript基于面向对象之创建对象,详细的分析面向对象的原型方式以及其他综合的方式,感兴趣的小伙伴们可以参考一下
本文列举了各种JavaScript对象与数组,同时包括对上述每一对象或数组所完成工作的简短描述,以及与其相关的属性方法,以及事件处理程序,还注明了该对象或数组的父对象用户同样可能需要参考Online Companion中的超级...
使用Javascript创建类和对象的方法有很多,现在就来列举一下:1、原始的创建方法,2、工厂方法模式,3、构造方法模式,4、动态原型方法。下面我们就来通过实例详细看下
Ajax基本对象的属性和方法:动态创建内容时所用的W3C DOM属性和方法。用于遍历XML的DOM元素方法。用于处理XML的DOM元素属性。标准XMLHttpRequest操作
使用Javascript创建对象的方式有很多,现在就来列举一下其中的四种方式,并且罗列出了每种方式的优缺点,可以让大家进行选择使用,下面来看看。 工厂模式 function createPerson(name, age){ var obj = new ...
通过列举JavaScript应用的最佳实践和示例,本书展示了如何将该语言集成到浏览器环境中,及如何在符合标准的网站中应用这些已通过实践验证的编码技术。 本书内容: JavaScript应用程序的结构,包括基本的语句和...
《JavaScript学习指南(第2版)》通过列举JavaScript应用的最佳实践和示例,本书展示了如何将该语言集成到浏览器环境中,及如何在符合标准的网站中应用这些已通过实践验证的编码技术。 本书内容: ● JavaScript应用...
• 13.3.htm DHTML对象模型方法显示和修改网页文字内容 • 13.4.htm DHTML对象模型方法新增和删除表格行内容 • 13.5.htm W3C对象模型方法显示和修改网页内容 • 13.6.htm W3C对象...
• 13.3.htm DHTML对象模型方法显示和修改网页文字内容 • 13.4.htm DHTML对象模型方法新增和删除表格行内容 • 13.5.htm W3C对象模型方法显示和修改网页内容 • 13.6.htm W3C对象...
2、 创建对象有几种方法(必会) 79 4、简述创建函数的几种方式? (必会) 79 5、Javascript 创建对象的几种方式? (必会) 79 6、请指出 JavaScript 宿主对象和原生对象的区别?(必会) 81 7、 JavaScript 内置...
网上有人分享经验,说到学习前端开发技术JavaScript很实用的一些书籍,从入门到高级,一一列举,很不错。整理了一下发上来。 名称: JavaScript+DOM编程艺术.pdf 概述: “本书理应奉为经典。文笔清晰,采用了优秀...
(1)简化代码 ——————————————————————————– JavaScript定义对象和数组非常简单,我们想要创建一个对象,一般是这样写的: 代码如下: var car = new Object(); car.colour = ‘red’; ...
JS提供了一些内置对象、...一、Arguments 类型Arguments 类型 不能由程序员手动创建其对象,即你不能 new Arguments() 。 它有且仅有一个对象arguments 代码如下:function func() { console.log(arguments[0]) // 1
4.6.2 列举(listing),70排序(sorting)以及合计(counting) 4.6.3 用动态查找器(finder)查询 4.6.4 使用hql进行查询 4.6.5 按样本(example)查询 4.6.6 使用条件(criteria)查询 ...
七、在ADO.NET中,对于Command对象的ExecuteNonQuery()方法和ExecuteReader()方法,下面叙述错误的是( ) A.insert、update、delete等操作的Sql语句主要用ExecuteNonQuery()方法来执行; B.ExecuteNonQuery()方法...
配置要创建一个 Imagine 实例,应该使用构造函数方法。 可用的签名是: var img = new Imagine(object);var img = new Imagine(string);var img = new Imagine(string,object);在哪里: object:一个包含上面列出的...
1、对象obj是通过new Constructor创建的,那么 obj instanceof Constructor 为true 代码如下:function Person(n, a) { this.name = n; this.age = a; } var p = new Person(‘John Backus’, 82); console.log(p ...
和已经出版的同类图书相比,《Java Web开发技术大全:JSP+Servlet+Struts+Hibernate+Spring+Ajax》讲解由浅入深,涵盖更多内容,列举了大量典型实例具有超强的实用性,另外,《Java Web开发技术大全:JSP+Servlet+...
70、TreeSet里面放对象,如果同时放入了父类和子类的实例对象,那比较时使用的是父类的compareTo方法,还是使用的子类的compareTo方法,还是抛异常! 48 71、说出一些常用的类,包,接口,请各举5个 49 72、java中有...
70、TreeSet里面放对象,如果同时放入了父类和子类的实例对象,那比较时使用的是父类的compareTo方法,还是使用的子类的compareTo方法,还是抛异常! 48 71、说出一些常用的类,包,接口,请各举5个 49 72、java中有...