首页 > 代码库 > 第八章——对象
第八章——对象
因为JavaScript是一种基于原型的语言,所有JavaScript中对象的工作方式,与其他基于类的语言中的对象不同。JavaScript对象基本上是属性和值的集合,这在编程中称为哈希表(hash table)。其中的值可以是任意类型的数据,包括函数、数组和其他对象。可以使用对象从一处向另一处传递多个值(当使用JSON在JavaScript和另一门语言之间传递数据时,这是非常容易的,后面章节将对此进行讨论)
一.创建单一对象(单一对象用于特定目的,例如创建名值对,或创建不与其他对象共享代码的唯一对象)的方法:
①对象构造函数
var car=new Object(); car.seats="cloth"; car.engine="V-6"; car.show_features=function(){ window.alert("car:"+car.seats+"seats,"+car.engine+"engine"); }; car.show_features();
或者(先创造函数,然后将此函数赋值给对象的函数)
var car=new Object(); car.seats="cloth"; car.engine="V-6"; function my_alert(){ window.alert("car:"+car.seats+"seats,"+car.engine+"engine"); }; car.show_features=my_alert; car.show_features();
②对象字面量表示法
var car={ seats:"cloth", engine:"V-6", show_features:function(){ window.alert("car:"+car.seats+"seats,"+car.engine+"engine"); } }
二.访问属性值:
①圆点表示法:window.alert(car.seats);
②括号表示法:window.alert(car["seats"]);
当需要使用属性名但它被存储在变量中时,括号表示法的这个特性会非常有用。因为圆点表示法只允许使用基本的属性名称,不能使用变量值。
三.对象结构:当以特定的方式编写对象时,可以创建一个对象,将它作为其他对象的结构或者模型。
①构造函数,构造函数可以为对象创建可重用代码(注意函数名以大写字母(C)开头,这非必须,但有助于与其他类型的函数区分开来)
function Car(seats,engine,radio){
this.seats=seats;
this.engine=engine;
this.radio=radio;
this.describe=function(){
document.write("This amazing car has these features:");
document.write(this.seats+"seats,"+this.engine+"engine,"+this.radio);
};
}
var car1=new Car("cloth","v-6","Tape Deck");
car1.describe();
在构造函数中添加方法这种方式非常直接,但对于对象的每个实例都会创建一个相同任务的函数方法,将会耗费时间和空间。看下面的方法:
function Car(seats,engine,radio){
this.seats=seats;
this.engine=engine;
this.radio=radio;
this.describe=describe_car();
}
function describe_car(){
document.write("This amazing car has these features:");
document.write(this.seats+"seats,"+this.engine+"engine,"+this.radio);
}
不过,这种方法也有不利之处:现在该方法函数是全局,这样大量应该在Car结构的局部上下文之内的函数都出现在全局上下文中,从而使全局上下文变得混乱。为了解决这个问题,下面将学习使用原型。
四.使用原型:JavaScript中的每个函数都有prototype(原型)属性,该属性是一个对象,其中包含用该函数创建的每个对象实例都可以使用的属性和方法。对于共享的属性和方法,这种方式将使代码很容易就可以跨实例重用。
function Car(seats,engine,radio){
this.seats=seats;
this.engine=engine;
this.radio=radio;
}
Car.prototype.locks="automatic";
var car1=new Car("cloths","V-6","Type Deck");
window.alert(car1.locks);//automatic
原理:在JavaScript中,调用对象的属性或方法将首先检查尝试使用它的对象。如果无法找到相应的属性或方法,并不会立刻放弃。相反,JavaScript将搜索对象原型来检查是否有匹配的值。实际上可向实例中添加与原型中的属性同名的属性,这将有效的隐藏该对象原型中的同名属性的值。
function Car(seats,engine,radio){
this.seats=seats;
this.engine=engine;
this.radio=radio;
}
Car.prototype.locks="automatic";
var car1=new Car("cloths","V-6","Type Deck");
car1.locks="manual";
window.alert(car1.locks);//manual
五.hasOwnProperty()方法:
有时要确认在对象实例(不是原型)中是否存在某个属性。如果存在,该方法返回true,否则false;
function Car(seats,engine,radio){
this.seats=seats;
this.engine=engine;
this.radio=radio;
}
Car.prototype.locks="automatic";
var car1=new Car("cloths","V-6","Type Deck");
var ca2=new Car("cloth","V-4","CD Changer");
car1.locks="manual";
window.alert(car1.locks);//manual
window.alert(car1.locks);//automatic
window.alert(car1.hasOwnProperty("locks");//true
window.alert(car2.hasOwnProperty("locks");//false
六.为方法使用原型:因为原型在对象的构造函数之外,并不在全局上下文中,因此它是添加方法函数的最佳位置,这些方法函数将在对象的每个实例之间共享。将对象每个实例的属性添加到构造函数中(如果它们具有唯一值),并将方法添加到原型中,以便在所有实例中共享。基于上面的原因,生成自定义对象有一种通用模式,被称为构造函数/原型结合模式。
function Car(seats,engine,radio){
this.seats=seats;
this.engine=engine;
this.radio=radio;
}
Car.prototype.describe=function(){
document.write("This amazing car has these features:");
document.write(this.seats+"seats,"+this.engine+"engine,"+this.radio);
}
var car1=new Car("cloth","V-6","Tape Deck");
car1.describe();
七.for-in:JavaScript允许使用for-in循环遍历对象的属性,以及使用with语句来轻松访问特定的对象。
for( var prop_name in car1){
document.write(prop_name+":"+car1[prop_name]+"<br>");
}
注意,该循环将显示所有的属性,包括对象原型中的属性。如果只希望使用对象实例中的属性,可以使用hasOwnProperty()方法来检查每个属性
for( var prop_name in car1){
if(car1.hasOwnProperty(prop_name)){
document.write(prop_name+":"+car1[prop_name]+"<br>");
}
}
②with语句:在with语句中可以直接使用对象的属性名来访问属性值。(通常不鼓励使用with,因为它存在性能问题,并且在使用它时,容易不小心对全局变量进行赋值或改写)
with(car1){
document.write("Seats:"+seats+"<br>");
document.write("Engine:"+engine+"<br>");
document.write("Radio:"+theradio);
}
八.两个预定义对象(这两个对象都是window对象的一部分,可以通过window.navigator.property访问其属性,但是也可以直接使用):
①导航对象navigator对象的属性:
appCodeName——浏览器的代码名称
appName——浏览器的全名
appVersion——浏览器的版本和其他的一些信息
还有一些其他的
②history对象的属性:
length——返回浏览器当前窗口的历史回话页面的数量
③history对象的方法:
back(),使浏览器返回浏览器历史列表中的后一页
forward(),使浏览器返回浏览器历史列表中的前一页
go(),接收一个整形参数,可正可负,代表前进和返回几个页面,如果参数超过历史列表内容,将什么也不做。
第八章——对象