【JavaScript】核心语法之对象

haoguo 发布于2019-08-26 12:10 / 3043人阅读

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

JS(JavaScript)

对象
一.对象
1.对象是什么；
理解成你所看到的任何物体独有属性并且使用方法
2.对象的分类；

内置对象/原生对象；

是以ECMAScript为标准定义好的对象，可直接拿来使用

宿主对象；

是以浏览器自身运行环境下提供的对象，并且才可使用

自定义对象；

开发人自身创建的对象，并使用
二.创建对象；
1.对象初始化方法；
通过字面量创建对象

</>复制代码 
/*对象的初始化创建方式
var 对象名 = {
    属性名 : 属性值,
    方法名 : function(){
        方法体
    }
}
    */
var obj1 = {
    name:"犬夜叉",
    age: 16,
    sayMe :function () {
        console.log("我是犬夜叉");
    }
}

2.构造函数方法；
通过JS的预定义类型来创造对象

</>复制代码 
/*对象构造函数
* 利用所用引用类型创建对应对象；具体类型
  var num = new Number();// Number类型
  var str = new String();// String类型
  var boo = new Boolean();// Boolean类型
  利用Object作为构造函数创建对象
  var 对象名 = new Object();
  var 对象名 = Object();
 */
var num = new Number();//Number类型
var num2 = Number();
var str = new String();//String类型
var boo = new Boolean();//Boolean类型
var obj2 = new Object();
var obj3 = new Object();
console.log(obj2);
console.log(obj3);

3.Object.create方法；
指定原型和多个指定属性对象

</>复制代码 
var obj6 = Object.create(null);
var obj7 = Object.create(obj1);
/*利用Object.create()方法创建对象
* var 对象名 = Object.create(null)；创建一个空对象
  var 对象名 = Object.create(obj)
  obj- 表示另一对象
  当前创建新对象拥有与obj对象相同属性和方法
 */

三.对象的属性；
1.调用对象的属性；
对象名.属性名；不能用复杂命名属性名称
对象名[属性名]；能用复杂命名属性名称

</>复制代码 
var obj = {
    name : "犬夜叉",
    "Type-Content" : "text/html",
    sayMe : function(){
        console.log("我是犬夜叉");
    }
}
/*
    对象名.属性名
      * 不适用于复杂命名的属性名称
 */
console.log(obj.name);// 犬夜叉
// console.log(obj.Type-Content);
/*
    对象名[属性名]-通用调用方式
      * 适用于复杂命名的属性名称
 */
console.log(obj["name"]);// 犬夜叉
console.log(obj["Type-Content"]);// text/html
// 访问一个对象不存在的属性 -> 值为 undefined
console.log(obj.age);

2.新增对象的属性；
以两种属性表示
对象名.新的属性名 = 属性值
对象名[新的属性名] = 属性值

</>复制代码 
var obj = {
    name : "漩涡鸣人",
    sayMe : function(){
        console.log("我是漩涡鸣人");
    }
}
/*
    对象名.新的属性名 = 属性值
    对象名[新的属性名] = 属性值
 */
obj.age = 18;
console.log(obj);
/*
  空对象默认没有自身的属性和方法(父级Object)
 */
var obj1 = {};
console.log(obj1);
obj1.name = "日向雏田";
console.log(obj1);

3.修改对象的属性；

</>复制代码 
var obj = {
    name : "漩涡鸣人",
    sayMe : function(){
        console.log("我是漩涡鸣人");
    }
}
/*
    对象名.已存在属性名 = 属性值
    对象名[已存在属性名] = 属性值
 */
obj.name = "日向雏田";
console.log(obj);

4.删除对象的属性；
以delete表示删除该属性
delete 对象名.属性名
delete 对象名[属性名]

</>复制代码 
var obj = {
    name : "犬夜叉",
    sayMe : function(){
        console.log("我是犬夜叉");
    }
}
/*
    delete 对象名.属性名
    delete 对象名[属性名]
 */
delete obj.name;
console.log(obj.name);// undefined

四.对象的方法；
1.调用对象的方法；
有两种方法表示调用对象
对象名.方法名()
对象名[方法名]()

</>复制代码 
var obj = {
    name : "犬夜叉",
    age : 18,
    sayMe : function(){
        console.log("我是犬夜叉");
    }
}
// 对象名.方法名()
obj.sayMe();
// 对象名[方法名]()
obj["sayMe"]();

2.新增对象的方法；
以function()来表示新增对象
对象名.新的方法名 = function(){}
对象名[新的方法名] = function(){}

</>复制代码 
var obj = {
    name : "漩涡鸣人",
    age : 16,
    sayMe : function(){
        console.log("我是漩涡鸣人");
    }
}
// 对象名.新的方法名 = function(){}
obj.sayYou = function(){
    console.log("你是日向雏田");
}
console.log(obj);
// 对象名[新的方法名] = function(){}

3.修改对象的方法；

</>复制代码 
var obj = {
    name : "漩涡鸣人",
    age : 16,
    sayMe : function(){
        console.log("我是漩涡鸣人");
    }
}
// 1.对象名.方法名 = function(){}
obj.sayMe = function(){
    console.log("你是日向雏田");
}
console.log(obj);
obj.sayMe();
// 2.对象名[方法名] = function(){}

4.删除对象的方法；
delete 对象名.方法名
delete 对象名[方法名]

</>复制代码 
var obj = {
    name : "犬夜叉",
    age : 16,
    sayMe : function(){
        console.log("我是犬夜叉");
    }
}
// delete 对象名.方法名
delete obj.sayMe;
// 访问对象中不存在的方法-报错(TypeError: obj.sayMe is not a function)
// obj.sayMe();
console.log(obj.sayMe);// undefined
console.log(obj);
// 以属性是否存在的方式进行判断
if ("sayMe" in obj) {
    // 确认目前是个方法
    if (obj.sayMe instanceof Function) {
        obj.sayMe();// 方法调用
    }
}
// 以上代码可以优化为以下代码
if ("sayMe" in obj && obj.sayMe instanceof Function) {
    obj.sayMe();// 方法调用
}
// delete 对象名[方法名]

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

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

转载请注明本文地址：https://www.ucloud.cn/yun/108139.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 之核心语法 [ 数据类型 ]

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

luffyZh 2019-08-23 10:46 评论0 收藏0
JavaScript 之核心语法 [ 对象 ]

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

fxp 2019-08-23 11:00 评论0 收藏0
【JavaScript】核心语法之数据类型

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

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

发表评论

登陆后可评论

0条评论

haoguo

男|高级讲师

我要关注我要私信

TA的文章

#yyds干货盘点# Web应用测试

阅读 2359·2021-11-25 09:43
flex-box 速记表

阅读 2971·2019-08-30 15:52
css position属性为absolute时，其百分值的计算

阅读 1933·2019-08-30 15:44
CSS3 filter（滤镜）属性

阅读 1014·2019-08-30 10:58
移动端video局部播放视频

阅读 800·2019-08-29 18:43
css实现水平垂直居中

阅读 3253·2019-08-29 18:36
javascript 运算符

阅读 2364·2019-08-29 17:02
CSS方法论（一）

阅读 1498·2019-08-29 17:01

资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

【JavaScript】核心语法之对象

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

相关文章

**《JavaScript 闯关记》之简介**

JavaScript 闯关记

JavaScript 之核心语法 [ 数据类型 ]

JavaScript 之核心语法 [ 对象 ]

**【JavaScript】核心语法之数据类型**

发表评论

0条评论

haoguo

男|高级讲师

TA的文章

#yyds干货盘点# Web应用测试

flex-box 速记表

css position属性为absolute时，其百分值的计算

CSS3 filter（滤镜）属性

移动端video局部播放视频

css实现水平垂直居中

javascript 运算符

CSS方法论（一）

最新活动

企业采购季！

多种GPU机型限时特惠

GPU算力平台

高等级、高电力的数据中心托管服务