JavaScript 的设计是一个简单的基于对象的范式。一个对象就是一系列属性的集合,一个属性包含一个名和一个值。一个属性的值可以是函数,这种情况下属性也被称为方法。除了浏览器里面预定义的那些对象之外,也可以定义自己的对象。
对象概述
javascript 中的对象(物体),和其它编程语言中的对象一样,可以比照现实生活中的对象(物体)来理解它。 javascript 中对象(物体)的概念可以比照着现实生活中实实在在的物体来理解。
在javascript中,一个对象可以是一个单独的拥有属性和类型的实体。我们拿它和一个杯子做下类比。一个杯子是一个对象(物体),拥有属性。杯子有颜色,图案,重量,由什么材质构成等等。同样,javascript对象也有属性来定义它的特征。
对象和属性
一个 javascript 对象有很多属性。一个对象的属性可以被解释成一个附加到对象上的变量。对象的属性和普通的 javascript 变量基本没什么区别,仅仅是属性属于某个对象。属性定义了对象的特征
var myCar = new Object();
myCar.make = "Ford";
myCar.model = "Mustang";
myCar.year = 1969;
myCar.noProperty; // undefined
//也可以通过方括号访问或者设置
myCar["make"] = "Ford";
myCar["model"] = "Mustang";
myCar["year"] = 1969;
枚举一个对象的所有属性
- for...in 循环——该方法依次访问一个对象及其原型链中所有可枚举的属性。
- Object.keys(o)——该方法返回一个对象 o 自身包含(不包括原型中)的所有属性的名称的数组。
- Object.getOwnPropertyNames(o)——该方法返回一个数组,它包含了对象 o 所有拥有的属性(无论是否可枚举)的名称。
创建新对象
使用对象初始化器
var obj = { property_1: value_1, // property_# 可以是一个标识符...
2: value_2, // 或一个数字...
["property" +3]: value_3, // 或一个可计算的key名...
// ...,
"property n": value_n }; // 或一个字符串
这里 obj 是新对象的名称,每一个 property_i 是一个标识符(可以是一个名称、数字或字符串字面量),并且每个 value_i 是一个其值将被赋予 property_i 的表达式。obj 与赋值是可选的;如果不需要在其他地方引用对象,就不需要将它赋给一个变量。
如果一个对象是通过在顶级脚本的对象初始化器创建的,则 JavaScript 在每次遇到包含该对象字面量的表达式时都会创建对象。同样的,在函数中的初始化器在每次函数调用时也会被创建。
使用构造函数
作为另一种方式,可以通过两步来创建对象:
- 通过创建一个构造函数来定义对象的类型。首字母大写是非常普遍而且很恰当的惯用法。
- 通过 new 创建对象实例。
/*为了定义对象类型,为对象类型创建一个函数
以声明类型的名称、属性和方法。*/
function Car(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
}
//创建对象
var mycar = new Car("Eagle", "Talon TSi", 1993);
//一个对象的属性值可以是另一个对象
function Person(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
}
var rand = new Person("Rand McKinnon", 33, "M");
var ken = new Person("Ken Jones", 39, "M");
var car1 = new Car("Eagle", "Talon TSi", 1993, rand);
var car2 = new Car("Nissan", "300ZX", 1992, ken);
使用Object.create()
// Animal properties and method encapsulation
var Animal = {
type: "Invertebrates", // Default value of properties
displayType : function() { // Method which will display type of Animal
console.log(this.type);
}
}
// Create new animal type called animal1
var animal1 = Object.create(Animal);
animal1.displayType(); // Output:Invertebrates
// Create new animal type called Fishes
var fish = Object.create(Animal);
fish.type = "Fishes";
fish.displayType(); // Output:Fishes
继承
所有的 JavaScript 对象继承于至少一个对象。被继承的对象被称作原型,并且继承的属性可通过构造函数的 prototype 对象找到。
对象属性索引
在 JavaScript 1.0 中,可以通过名称或序号访问一个属性。但是在 JavaScript 1.1 及之后版本中,如果最初使用名称定义了一个属性,则必须通过名称来访问它;而如果最初使用序号来定义一个属性,则必须通过索引来访问它。
为对象类型定义属性
可以通过 prototype 属性为之前定义的对象类型增加属性。这为该类型的所有对象,而不是仅仅一个对象增加了一个属性。
/*为所有类型为 car 的对象增加了 color 属性,然后为对象
car1 的 color 属性赋值
*/
Car.prototype.color = null;
car1.color = "black";
定义方法
一个方法 是关联到某个对象的函数,或者简单地说,一个方法是一个值为某个函数的对象属性。定义方法就像定义普通的函数,除了它们必须被赋给对象的某个属性。
objectName.methodname = function_name;
var myObj = {
myMethod: function(params) {
// ...do something
}
// 或者 这样写也可以
myOtherMethod(params) {
// ...do something else
}
};
通过this引用对象
JavaScript 有一个特殊的关键字 this,它可以在方法中使用以指代当前对象。
function validate(obj, lowval, hival) {
if ((obj.value < lowval) || (obj.value > hival)) {
alert("Invalid Value!");
}
}
可以在每个元素的 onchange 事件处理器中调用 validate,并通过 this 传入相应元素,代码如下:
<input type="text" name="age" size="3"
onChange="validate(this, 18, 99)">
定义getters和setters
一个 getter 是一个获取某个特定属性的值的方法。一个 setter 是一个设定某个属性的值的方法。可以为预定义的或用户定义的对象定义 getter 和 setter 以支持新增的属性。定义 getter 和 setter 的语法采用对象字面量语法。
var o = {
a: 7,
get b() {
return this.a + 1;
},
set c(x) {
this.a = x / 2
}
};
console.log(o.a); // 7
console.log(o.b); // 8
o.c = 50;
console.log(o.a); // 25
下面这个例子展示使用getter和setter方法扩展 Date原型,为预定义好的Date类添加一个year的属性。定义属性year的getter和setter方法用到了Date类中已存在的getFullYear和setFullYear方法。
//定义属性year的getter和setter:
var d = Date.prototype;
Object.defineProperty(d, "year", {
get: function() { return this.getFullYear() },
set: function(y) { this.setFullYear(y) }
});
//通过一个Date对象使用getter和setter:
var now = new Date();
console.log(now.year); // 2000
now.year = 2001; // 987617605170
console.log(now);
// Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001
删除属性
可以用 delete 操作符删除一个不是继承而来的属性。
//Creates a new object, myobj, with two properties, a and b.
var myobj = new Object;
myobj.a = 5;
myobj.b = 12;
//Removes the a property, leaving myobj with only the b property.
delete myobj.a;
如果一个全局变量不是用 var 关键字声明的话,也可以用 delete 删除它:
g = 17;
delete g;
比较对象
// 两个变量, 两个具有同样的属性、但不相同的对象
var fruit = {name: "apple"};
var fruitbear = {name: "apple"};
fruit == fruitbear // return false
fruit === fruitbear // return false
在 JavaScript 中 objects 是一种引用类型。两个独立声明的对象永远也不会相等,即使他们有相同的属性,只有在比较一个对象和这个对象的引用时,才会返回true.
// 两个变量, 同一个对象
var fruit = {name: "apple"};
var fruitbear = fruit; // 将fruit的对象引用(reference)赋值给 fruitbear
// 也称为将fruitbear“指向”fruit对象
// fruit与fruitbear都指向同样的对象
fruit == fruitbear // return true
fruit === fruitbear // return true