JavaScript 之核心语法 [ 对象 ]

fxp 发布于2019-08-23 11:00 / 2928人阅读

摘要：对象描述是一个拥有属性和方法的集合体属性表示该对象的外貌方法表示该对象的行为对象的分类内置对象表示中的预定义对象宿主对象表示匹配浏览器的对象比如自定义对象表示由开发人员定义的对象定义对象字面量方式语法对象名属性名属性值方法名方法体张小凡御雷

对象描述

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

属性

表示该对象的外貌

方法

表示该对象的行为

对象的分类

内置对象

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

云服务器 GPU云服务器 AJAX核心对象面向对象语法分析 javascript核心 javascript 语法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96908.html

《JavaScript 闯关记》之简介

摘要：浏览器只是实现的宿主环境之一，其他宿主环境包括和。年月，版发布，成为国际标准。事件定义了事件和事件处理的接口。对于已经正式纳入标准的来说，尽管各浏览器都实现了某些众所周知的共同特性，但其他特性还是会因浏览器而异。 JavaScript 是面向 Web 的编程语言，绝大多数现代网站都使用了 JavaScript，并且所有的现代 Web 浏览器（电脑，手机，平板）均包含了 JavaScri...

baihe 2019-08-21 10:55 评论0 收藏0
JavaScript 闯关记

摘要：对象数组初始化表达式，闯关记之上文档对象模型是针对和文档的一个。闯关记之数组数组是值的有序集合。数组是动态的，根闯关记之语法的语法大量借鉴了及其他类语言如和的语法。《JavaScript 闯关记》之 DOM（下） Element 类型除了 Document 类型之外，Element 类型就要算是 Web 编程中最常用的类型了。Element 类型用于表现 XML 或 HTML 元素...

mj 2019-08-21 18:45 评论0 收藏0
【JavaScript】核心语法之对象

摘要：对象一对象对象是什么理解成你所看到的任何物体独有属性并且使用方法对象的分类内置对象原生对象是以为标准定义好的对象，可直接拿来使用宿主对象是以浏览器自身运行环境下提供的对象，并且才可使用自定义对象开发人自身创建的对象，并使用二创建对象对象初始 JS(JavaScript) 对象一.对象1.对象是什么；理解成你所看到的任何物体独有属性并且使用方法2.对象的分类；内置对象/原生对象；是以...

haoguo 2019-08-26 12:10 评论0 收藏0
JavaScript 之核心语法 [ 数据类型 ]

摘要：数据类型数据类型表示数值的类型类型的分类原始类型类型数字类型类型分为整数和浮点数整数正整数负整数变量为数字类型整数显示浮点数小数变量为数字类型浮点数显示浮点数在小数点前面如果没有数字，会被默认为在小数点前的数字为比如会显示浮点数的数据类型数据类型 - 表示数值的类型类型的分类原始类型 number类型（数字类型） number类型分为整数和浮点数整数 - 正整数、0 、负...

luffyZh 2019-08-23 10:46 评论0 收藏0
【JavaScript】核心语法之数据类型

摘要：数据类型原始类型类型实为数字不区分整数和浮点类型整数类型包括负整数，和正整数浮点类型表示小数类型整数和浮点数小数或并不区分整数与浮点数变量的定义并初始化字面量或直接量定义数字值浮点类型是只该数值包含整数部分，小数部分，小数点和小数部分浮点类 JS(JavaScript) 数据类型； 1.原始类型； number类型；实为数字JS不区分整数和浮点类型；整数类型；包括负整数，0和正...

iflove 2019-08-23 11:32 评论0 收藏0