JavaScript中的对象

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

JavaScript中的一个对象就是一系列属性的集合,一个属性包含一个属性名和一个属性值(key/value)。一个属性的值可以是函数(这个时候也被称为方法)。除了内置的对象之外,还可以自定义对象。接下来学习在JavaScript中怎么使用对象、属性、函数和方法以及怎么自定义创建对象。

对象概述

JavaScript中的对象和其他编程语言中的对象一样,它也像我们生活中的物体,通过生活中的物体,我们能更好的理解JavaScript对象。在JavaScript中,一个对象可以是一个单独的拥有属性和类型的实体。好比我们生活中的一辆车。这辆车就是一个对象(物体),它拥有属于自己的一些属性(车的特征之类)。比如车子的型号、颜色、哪生生产的、开了多少公司等等。同样JavaScript对象也有属性来定义它的特征。

对象属性

一个JavaScript对象有很多属性。一个对象的属性可以被解释成一个附加到对象上的变量。对象的属性和普能的JavaScript变量没什么区别,仅仅是属性属于某个对象。属性定义了对象的特征。例如,我们创建了一个car的对象,然后这个对象有三个属性,makemodelyear

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

但是,如果对象不存在,那么试图查询这个不存在的对象的属性就会报错。nullundefined值都没有属性,因此查询这些值的属性会报错,例如:

var person = {}
person.wife.name;

除非确定personperson.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" "(空字符串)、falsenullundefined,毕竟这些都是属性的合法值。

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/javascript/working-with-Objects.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部