对象

描述

  • 是一个拥有属性和方法的集合体
  • 属性

    • 表示该对象的外貌
  • 方法

    • 表示该对象的行为

对象的分类

  • 内置对象

    • 表示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 );//没有没有属性 会不显示
}

蔡志远
9 声望5 粉丝