对象
描述
- 是一个拥有属性和方法的集合体
-
属性
- 表示该对象的外貌
-
方法
- 表示该对象的行为
对象的分类
-
内置对象
- 表示JavaScript中的预定义对象
-
宿主对象
- 表示匹配浏览器的对象
- 比如:DOM、BOM
-
自定义对象
- 表示由开发人员定义的对象
定义对象
字面量方式
语法
var 对象名 = {
属性名 :属性值,
方法名 :function () {
方法体
}
}
var obj1 = {
name : '张小凡',
nian : 20,
qingyun : function () {
console.log( '御雷真诀' )
}
};
console.log( obj1 );
构建函数方式
语法
var 对象名 = new Object({
属性名 : 属性值,
方法名 : function(){
方法体
}
})
var obj2 = new Object( {
name : '海龙',
nian : 18,
tianyin : function () {
console.log( '万灭心钟' )
}
} );
console.log( obj2 );
Object.create()方法
语法
var 对象名 = Object.create()
var obj3 = Object.create( );
console.log( obj3 );
调用对象的属性和方法
第一种方式
调用属性
- 对象名.属性名
- 不适合用于复杂的属性名
/* 定义一个对象 */
var obj = {
name : '张小凡',
nian : 20,
'men-pai' : 'qing-yun',
faqi : function () {
console.log( '嗜血 摄魂' )
}
};
console.log( obj );
/* 调用属性 */
console.log( obj.name );// 显示 张小凡
/* 调用复杂的属性名时,该方法会报错 */
console.log( obj.men-pai );// 显示 ReferenceError: pai is not defined
调用方法
- 对象名.方法名()
/* 定义一个对象 */
var obj = {
name : '张小凡',
nian : 20,
'men-pai' : 'qing-yun',
faqi : function () {
console.log( '嗜血 摄魂' )
}
};
console.log( obj );
/* 调用方法 */
console.log( obj.faqi() );// 显示 嗜血 摄魂
第二种方式
调用属性
- 对象名[属性名]
- 适合用于复杂的属性名
/* 定义一个对象 */
var obj = {
name : '张小凡',
nian : 20,
'men-pai' : 'qing-yun',
faqi : function () {
console.log( '嗜血 摄魂' )
}
};
console.log( obj );
/* 调用属性 */
console.log( obj['nian'] );// 显示 20
/* 调用复杂的属性名时,可以正常显示 */
console.log( obj['men-pai'] );// 显示 qing-yun
调用方法
- 对象名[方法名]()
/* 定义一个对象 */
var obj = {
name : '张小凡',
nian : 20,
'men-pai' : 'qing-yun',
faqi : function () {
console.log( '嗜血 摄魂' )
}
};
console.log( obj );
/* 调用方法 */
console.log( obj['faqi']() );// 显示 嗜血 摄魂
新增对象的属性和方法
第一种方式
新增属性
- 对象名.新的属性名 = 属性值
/* 定义一个对象 */
var obj = {
name : '张小凡',
nian : 20,
faqi : function () {
console.log( '嗜血 摄魂' )
}
};
console.log( obj );// 显示 { name: '张小凡', nian: 20, faqi: [Function: faqi] }
/* 新增属性 */
obj.menpai = '青云';
console.log( obj );// 显示 { name: '张小凡', nian: 20, faqi: [Function: faqi], menpai: '青云' }
新增方法
- 对象名.新的方法名 = function(){ 方法体 }
/* 定义一个对象 */
var obj = {
name : '张小凡',
nian : 20,
faqi : function () {
console.log( '嗜血 摄魂' )
}
};
console.log( obj );// 显示 { name: '张小凡', nian: 20, faqi: [Function: faqi] }
/* 新增方法 */
obj.gongfa = function () {
console.log( '御雷真诀' )
}
console.log( obj );// 显示 { name: '张小凡', nian: 20, faqi: [Function: faqi], menpai: '青云', gongfa: [Function] }
第二种方式
新增属性
- 对象名[新的属性名] = 属性值
/* 定义一个对象 */
var obj = {
name : '张小凡',
nian : 20,
faqi : function () {
console.log( '嗜血 摄魂' )
}
};
console.log( obj );// 显示 { name: '张小凡', nian: 20, faqi: [Function: faqi] }
/* 新增属性 */
obj['zhandouli'] = 20000;
console.log( obj );// 显示 { name: '张小凡', nian: 20, faqi: [Function: faqi], menpai: '青云', zhandouli: 20000 }
新增方法
- 对象名[新的方法名] = function(){ 方法体 }
/* 定义一个对象 */
var obj = {
name : '张小凡',
nian : 20,
faqi : function () {
console.log( '嗜血 摄魂' )
}
};
console.log( obj );// 显示 { name: '张小凡', nian: 20, faqi: [Function: faqi] }
/* 新增方法 */
obj['biecheng'] = function () {
console.log( '鬼厉先生' )
}
console.log( obj );// 显示 { name: '张小凡', nian: 20, faqi: [Function: faqi], menpai: '青云', gongfa: [Function], zhandouli: 20000, biecheng: [Function] }
修改对象的属性和方法
第一种方式
修改属性
- 对象名.已存在的属性名 = 新的属性值
/* 定义一个对象 */
var obj = {
name : '张小凡',
nian : 20,
faqi : function () {
console.log( '嗜血 摄魂' )
}
};
console.log( obj );// 显示 { name: '张小凡', nian: 20, faqi: [Function: faqi] }
/* 修改属性 */
obj.nian = 18;
console.log( obj );// 显示 { name: '张小凡', nian: 18, faqi: [Function: faqi] }
修改方法
- 对象名.已存在的方法名 = 新的function(){ 方法体 }
/* 定义一个对象 */
var obj = {
name : '张小凡',
nian : 20,
faqi : function () {
console.log( '嗜血 摄魂' )
}
};
console.log( obj );// 显示 { name: '张小凡', nian: 20, faqi: [Function: faqi] }
/* 修改方法 */
console.log( obj.faqi() );// 显示 嗜血 摄魂
/* 对方法进行修改 */
obj.faqi = function () {
console.log( '诛仙' )
}
console.log( obj.faqi() );// 显示 诛仙
第二种方式
修改属性
- 对象名[已存在的属性名] = 新的属性值
/* 定义一个对象 */
var obj = {
name : '张小凡',
nian : 20,
faqi : function () {
console.log( '嗜血 摄魂' )
}
};
console.log( obj );// 显示 { name: '张小凡', nian: 20, faqi: [Function: faqi] }
/* 修改属性 */
obj['nian'] = 22;
console.log( obj );// 显示 { name: '张小凡', nian: 22, faqi: [Function: faqi] }
修改方法
- 对象名[已存在的方法名] = 新的function(){ 方法体 }
/* 定义一个对象 */
var obj = {
name : '张小凡',
nian : 20,
faqi : function () {
console.log( '嗜血 摄魂' )
}
};
console.log( obj );// 显示 { name: '张小凡', nian: 20, faqi: [Function: faqi] }
/* 修改方法 */
console.log( obj['faqi']() );// 显示 嗜血 摄魂
/* 对方法进行修改 */
obj['faqi'] = function () {
console.log( '诛仙' )
}
console.log( obj['faqi']() );// 显示 诛仙
删除对象的属性和方法
第一种方法
删除属性
- delete 对象名.属性名
/* 定义一个对象 */
var obj = {
name : '张小凡',
nian : 20,
faqi : function () {
console.log( '嗜血 摄魂' )
}
};
console.log( obj );// 显示 { name: '张小凡', nian: 20, faqi: [Function: faqi] }
delete obj.nian;
console.log( obj );// 显示 { name: '张小凡', faqi: [Function: faqi] }
删除方法
- delete 对象名.方法名
- 删除方法时不能带小括号
/* 定义一个对象 */
var obj = {
name : '张小凡',
nian : 20,
faqi : function () {
console.log( '嗜血 摄魂' )
}
};
console.log( obj );// 显示 { name: '张小凡', nian: 20, faqi: [Function: faqi] }
/* 删除方法 */
delete obj.faqi;
console.log( obj );// 显示 { name: '张小凡' }
第二种方法
删除属性
- delete 对象名[属性名]
/* 定义一个对象 */
var obj = {
name : '张小凡',
nian : 20,
faqi : function () {
console.log( '嗜血 摄魂' )
}
};
console.log( obj );// 显示 { name: '张小凡', nian: 20, faqi: [Function: faqi] }
/* 删除属性 */
delete obj['name'];
console.log( obj );// 显示 { nian: 20, faqi: [Function: faqi] }
删除方法
- delete 对象名[方法名]
- 删除方法时不能带小括号
/* 定义一个对象 */
var obj = {
name : '张小凡',
nian : 20,
faqi : function () {
console.log( '嗜血 摄魂' )
}
};
console.log( obj );// 显示 { name: '张小凡', nian: 20, faqi: [Function: faqi] }
/* 删除方法 */
delete obj['faqi'];
console.log( obj );// 显示 { nian: 20 }
删除对象属性和方法时的注意
- 调用一个已经删除的属性会显示 undefined
- 调用一个已经删除的方法会报错
/* 调用一个已经删除的属性会显示 undefined */
console.log( obj.name );// 显示 undefined
/* 调用一个已经删除的方法会报错 */
console.log( obj.faqi() );// 显示 TypeError: obj.faqi is not a function
遍历对象
- 通过循环语句遍历对象来获得对象中的属性值或方法体中的内容
- 由于无法确定对象长度,所以while、do...while、for语句不合适使用,建议for...in语句
var obj = {
'name' : '张小凡',
'nian' : 20,
'faqi' : function(){
console.log( '嗜血 摄魂' );
}
}
/* 对 对象中的内容进行遍历 */
for ( var of in obj ) {
/* 设置条件表达式来选择判断属性和方法进行区分显示 */
if (typeof o1[of] === 'function') {
// 是对象的方法
obj[of]();
} else {
// 是对象的属性
console.log( obj[of] );
}
}
检测对象
调用对象时会出现的问题
- 在调用一个不存在的对象属性时会显示 undefined
var obj = {
'name' : '张小凡',
'nian' : 20,
'faqi' : function(){
console.log( '嗜血 摄魂' );
}
}
console.log( obj.zy );// 显示:undefined
解决方法
- 可以先对 对象的属性或方法进行检测
- 检测是否有该属性或方法
/* 使用 in 关键字判断对象中是否存在指定的属性 */
if ( 'name' in obj ) {
console.log( obj.name );// 有属性 会直接显示 - 张小凡
}
/* 使用 Object 提供的 hasOwnProperty() */
if ( obj.hasOwnProperty( 'zy' ) ) {
console.log( obj.zy );//没有没有属性 会不显示
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。