特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
JavaScript中的一个对象就是一系列属性的集合,一个属性包含一个属性名和一个属性值(key/value
)。一个属性的值可以是函数(这个时候也被称为方法)。除了内置的对象之外,还可以自定义对象。接下来学习在JavaScript中怎么使用对象、属性、函数和方法以及怎么自定义创建对象。
对象概述
JavaScript中的对象和其他编程语言中的对象一样,它也像我们生活中的物体,通过生活中的物体,我们能更好的理解JavaScript对象。在JavaScript中,一个对象可以是一个单独的拥有属性和类型的实体。好比我们生活中的一辆车。这辆车就是一个对象(物体),它拥有属于自己的一些属性(车的特征之类)。比如车子的型号、颜色、哪生生产的、开了多少公司等等。同样JavaScript对象也有属性来定义它的特征。
对象属性
一个JavaScript对象有很多属性。一个对象的属性可以被解释成一个附加到对象上的变量。对象的属性和普能的JavaScript变量没什么区别,仅仅是属性属于某个对象。属性定义了对象的特征。例如,我们创建了一个car
的对象,然后这个对象有三个属性,make
、model
和year
。
var car = new Object();
car.make = 'Ford';
car.model = 'Mustang';
car.year = 1969;
对象属性的创建方式
JavaScript中的对象的属性有两种创建方式。其中一种通过.
的方式创建,另外一种通过[]
的方式来创建。
var person = new Object();
// 通过.创建属对象属性
person.name = 'w3cplus';
// 通过[]创建对象属性
person['age'] = 7;
console.log(person);
注意:JavaScript对象中未赋值的属性的值为undefined
,而不是null
。比如:
person.profession; // => undefined
但是,如果对象不存在,那么试图查询这个不存在的对象的属性就会报错。null
和undefined
值都没有属性,因此查询这些值的属性会报错,例如:
var person = {}
person.wife.name;
除非确定person
和person.wife
都是对象,否则不能这样写表达式person.wife.name
,因为会报未捕获的错误类型,提面提供两种避免出错的方法:
// 冗余碍易懂的写法
var name;
if (person) {
if (person.wife) {
name = person.wife.name;
}
}
// 简练又常用的写法
var name = person && person.wife && person.wife.name
对象属性的访问方式
JavaScript中的对象属性的访问方式同样可以通过.
或[]
来访问。比如:
person.name; // => "w3cplus"
person["age"]; // => 7
一个对象的属性名可以是任何有效的 JavaScript 字符串,或者可以被转换为字符串的任何类型,包括空字符串。然而,一个属性的名称如果不是一个有效的 JavaScript 标识符(例如,一个由空格或连字符,或者以数字开头的属性名),就只能通过方括号标记访问。这个标记法在属性名称是动态判定(属性名只有到运行时才能判定)时非常有用。例如:
// 同时创建四个变量,用逗号分隔
var myObj = new Object(),
str = "myString",
rand = Math.random(),
obj = new Object();
myObj.type = "Dot syntax";
myObj["date created"] = "String with space";
myObj[str] = "String value";
myObj[rand] = "Random Number";
myObj[obj] = "Object";
myObj[""] = "Even an empty string";
console.log(myObj);
请注意,方括号中的所有键都将转换为字符串类型,因为JavaScript中的对象只能使用String
类型作为键类型。 例如,在上面的代码中,当将键obj
添加到myObj
时,JavaScript将调用obj.toString()
方法,并将此结果字符串用作新键。
删除对象属性
delete
运算符用来删除对象属性,事实上delete
只是断开属性和宿主对象的联系,并没有真正的删除它。delete
运算符只能删除自有属性,不能删除继承属性。要删除继承属性必须从定义这个属性的原型对象上删除它,而且这会影响到所有继承自这个原型的对象。
delete
运算符用来删除对象属性,如果删除成功或所删除的项目不存在,delete
将返回true
。然而,并不是所有的属性都可以删除,一些内置核心和客户端属性是不能删除的,通过var
语句声明的变量不能删除,通过function
语句定义的函数也是不能删除的。例如:
var o = { x: 1, y: 2}; // 定义一个对象
console.log(delete o.x); // true,删除一个属性
console.log(delete o.x); // true,什么都没做,x 在已上一步被删除
console.log("x" in o); // false,这个属性在对象中不再存在
console.log(delete o.toString); // true,什么也没做,toString是继承来的
console.log(delete 1); // true,无意义
检测对象属性
JavaScript对象可以看做属性的集合,我们经常会检测集合中成员的所属关系(判断某个属性是否存在于某个对象中)。可以通过in
运算符、hasOwnPreperty()
和propertyIsEnumerable()
来完成这个工作,甚至仅通过属性查询也可以做到这一点。
in
运算符的左侧是属性名(字符串),右侧是对象。如果对象的自有属笥或继承属性中包含这个属性则返回true
。例如:
var person = {
name: 'w3cplus',
age: 7
};
console.log('w3cplus' in person); // => false, 'w3cplus'不是 person的属性
console.log('age' in person); // => true, ‘age’是person的属性
console.log('toString' in person); // => true, 'toString'是person的继承属性
对象的hasOwnProperty()
方法用来检测给定的名字是否是对象的自有属性。对于继承属性它将返回false
。例如:
var person = {
name: 'w3cplus',
age: 7
}
console.log(person.hasOwnProperty('name')); // => true, 'name'是person的自有属性
console.log(person.hasOwnProperty('age')); // => true, 'age'是person的自有属性
console.log(person.hasOwnProperty('toString'));// => false, 'toString'是person的继承属性
propertyIsEnumerable()
是hasOwnProperty()
的增强版,只有检测到是自有属性且这个属性的可枚举性(Enumerable Attribute)为true
时它才返回true
。某些内置属性是不可枚举的。通常由JavaScript代码创建的属性都是可枚举的,除非在ECMAScript 5中使用一个特殊的方法来改变属性的可枚举性。
var person = inherit({
name: 'w3cplus',
age: 7
});
person.occupation = 'student';
person.propertyIsEnumerable('occupation'); // => true, occupation是person的自有属性,可枚举
person.propertyIsEnumerable('age'); // => false, age是person的继承属性, 不可枚举
Object.prototype.propertyIsEnumerable('toString');// => false, toString是person的继承属性,不可枚举
除了使用in
运算符之外,另一种更简便的方法是使用!==
来判断一个属性是否是undefined
。例如:
var person = {
name: 'w3cplus',
age: 7
}
console.log(person.name !== undefined); // => true, name是person的属性
console.log(person.w3cplus !== undefined); // => false, w3cplus不是person的属性
console.log(person.toString !== undefined);// => true, toString是person的继承属性
然而有一种场景只能使用in
运算符,而不能使用上述属性访问的方式。in
可以区分不存在的属性和存在但值为undefined
的属性。例如:
var obj = {
x: undefined
}
console.log(obj.x !== undefined); // => false,x属性存在,但值为undefined
console.log(obj.y !== undefined); // => false,y属性不存在
console.log('x' in obj); // => true, x属性存在
console.log('y' in obj); // => false, y属性不存在
console.log(delete obj.x); // => true,删除了obj对象里的x属性
console.log(obj.x !== undefined); // => false,x属性不存在
console.log('x' in obj); // => false, x属性不存在
另外一种用到null
(以及undefined
)的场景是当检测一个属性是否在对象中存在时,比如:
// 不好的写法:检测假值
if (object[propertyName]) {
// 一些代码
}
// 不好的写法:和null相比较
if (object[propertyName] != null) {
// 一些代码
}
// 不好的写法:和undefined相比较
if (object[propertyName] != undefined) {
// 一些代码
}
上面这段代码里的每个判断,实际上是通过给定的名字来检查属性的值,而并非判断给定的名字所指的属性是否存在。在第一个判断中,当属性值为假值时结果会出错,比如:0
、" "
(空字符串)、false
、null
和undefined
,毕竟这些都是属性的合法值。
如需转载,烦请注明出处:https://www.w3cplus.com/javascript/working-with-Objects.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!