对象基础
对象是一个包含相关数据和方法的集合(通常由一些变量和函数组成,我们称之为对象里面的属性和方法)。
在 javascript 中,一个对象可以是一个单独的拥有属性和类型的实体。我们拿它和一个杯子做下类比。一个杯子是一个对象(物体),拥有属性。杯子有颜色,图案,重量,由什么材质构成等等。同样, javascript 对象也有属性来定义它的特征。
对象的分类
1. 内建对象
- 由ES标准中定义的对象,在任何的ES的实现中都可以使用
- 比如:
Math
String
Number
Function
Object
…
2. 宿主对象
- 由JS的运行环境提供的对象,目前来讲主要指由浏览器提供的对象
- 比如
BOM
DOM
3. 自定义对象
- 由开发人员自己创建的对象
对象和属性
一个 javascript 对象有很多属性。一个对象的属性可以被解释成一个附加到对象上的变量。属性定义了对象的特征。
点表示法
可以用点表示法来访问对象的属性和方法。比如:
person.age
person.name.first
括号表示法
另外一种访问属性的方式是使用括号表示法。比如:
person['age']
person['name']['first']
创建新对象
可以通过对象初始化器创建对象。或者可以创建一个构造函数并使用该函数和 new
操作符初始化对象。
使用对象初始化器
通过对象初始化器创建对象的语法如下:
var obj = { property_1: value_1, // property_# 可以是一个标识符...
2: value_2, // 或一个数字...
["property" +3]: value_3, // 或一个可计算的key名...
// ...,
"property n": value_n }; // 或一个字符串
使用构造函数
作为另一种方式,你可以通过两步来创建对象:
- 通过创建一个构造函数来定义对象的类型。首字母大写是非常普遍而且很恰当的惯用法。
- 通过
new
创建对象实例。
为了定义对象类型,为对象类型创建一个函数以声明类型的名称、属性和方法。例如:
function Car(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
}
这里是通过使用 this 将传入函数的值赋给对象的属性。( this 在后面会讲到)
现在可以像这样创建一个 mycar
对象:
var mycar = new Car("Eagle", "Talon TSi", 1993);
可以通过调用 new
创建任意数量的 car
对象。
使用 Object.create 方法
对象也可以用 Object.create()
方法创建。该方法非常有用,因为它允许你为创建的对象选择一个原型对象,而不用定义构造函数。
var Car = {
type: "Sedan", // 属性默认值
displayType : function() { // 用于显示type属性的方法
console.log(this.type);
}
}
// 创建一辆新的车——car1
var car1 = Object.create(Car);
car1.displayType(); // Output:Sedan
// 创建一种新的动物——Fishes
var car2 = Object.create(Car);
car2.type = "Coupe";
car2.displayType(); // Output:Coupe
继承
所有的 JavaScript 对象至少继承于一个对象。被继承的对象被称作原型,并且继承的属性可通过构造函数的 prototype
对象找到。
定义方法
一个方法 是关联到某个对象的函数,或者说,一个方法是一个值为某个函数的对象属性。定义方法就像定义普通的函数,除了它们必须被赋给对象的某个属性。例如:
// objectName.methodname = function_name;
var myObj = {
myMethod: function(params) {
// ...do something
}
// 或者这样写
myOtherMethod(params) {
// ...do something else
}
};
通过 this
引用对象
JavaScript 有一个特殊的关键字 this
,它可以在方法中使用以指代当前对象。例如:
var person1 = {
name : 'Chris',
greeting: function() {
alert('Hi! I\'m ' + this.name + '.');
}
}
var person2 = {
name : 'Brian',
greeting: function() {
alert('Hi! I\'m ' + this.name + '.');
}
}
在这里,person1.greeting() 会输出:”Hi! I’m Chris.”;person2.greeting() 会输出:”Hi! I’m Brain.”
定义 getters 与 setters
一个 getter 是一个获取某个特定属性的值的方法。一个 setter 是一个设定某个属性的值的方法。你可以为预定义的或用户定义的对象定义 getter 和 setter 以支持新增的属性。定义 getter 和 setter 的语法采用对象字面量语法。
下面例子描述了getters 和 setters 是如何为用户定义的对象 o
工作的。
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
- 对象的属性如下:
o.a
— 数字o.b
— 返回o.a
+ 1 的 gettero.c
— 由o.c 的值所设置 o.a 值的
setter
删除对象的属性
你可以用 delete
操作符删除一个不是继承而来的属性。下面的例子说明如何删除一个属性:
var myobj = new Object;
myobj.a = 5;
myobj.b = 12;
delete myobj.a;
对象的比较
在 JavaScript 中 objects 是一种引用类型。两个独立声明的对象永远也不会相等,即使他们有相同的属性,只有在比较一个对象和这个对象的引用时,才会返回true.
// 两个变量, 两个具有同样的属性、但不相同的对象
var fruit = {name: "apple"};
var fruitbear = {name: "apple"};
fruit == fruitbear // return false
fruit === fruitbear // return false
// 两个变量,同一个对象
var fruit = {name: "apple"};
var fruitbear = fruit;
// fruit与fruitbear都指向同样的对象
fruit == fruitbear // return true
fruit === fruitbear // return true
GitHub Issues