JavaScript 之 核心语法 [ 对象 ]

头像
蔡志远
    阅读 7 分钟

    对象

    描述

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

    • 属性

      • 表示该对象的外貌

    • 方法

      • 表示该对象的行为

    对象的分类

    • 内置对象

      • 表示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 );//没有没有属性 会不显示
}
    javascript
    蔡志远
    9 声望5 粉丝
    « 上一篇
    JavaScript 之 核心语法 [ 函数和作用域 ]
    下一篇 »
    JavaScript 之 面向对象 [ Object类型 ]

    引用和评论

    推荐阅读
    头像
    Ajax 之 [ jQuery中的Ajax ]

    蔡志远阅读 1.3k

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.4k评论 7

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.7k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.6k评论 4

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.3k评论 2

    0 条评论
    得票最新