资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/JavaScript中的对象个人分享

JavaScript中的对象个人分享

cppprimer / 3193人阅读

摘要：对象对象的概念所谓对象就是是一个拥有属性和方法的集合体对象的分类内置对象原生对象引用类型可以称作为内置对象宿主对象就是寄生在一个东西上的对象比如浏览器提供的对象比如自定义对象开发人员创建的对象对象是什么类型是所有类型的父级创建对象对象的初始

对象 对象的概念

所谓对象就是是一个拥有属性和方法的集合体

对象的分类

内置对象/原生对象:

引用类型可以称作为内置对象

宿主对象:

就是寄生在一个东西上的对象比如浏览器提供的对象

比如：DOM、BOM

自定义对象

开发人员创建的对象

Object对象是什么

object类型是所有JavaScript类型的父级

创建对象 对象的初始化器创建方式 
var 对象名 = {
属性名 : 属性值,
方法名 : function(){
方法体
}
}

注意: 如果存在多个属性名的话中间用 " , "隔开

示例代码:

var obj1 = {
    name : "一花一世界",
    name1 : "一叶一孤城",
    soso : function () {
        console.log("你是哈士奇")
    }
};
对象的构造函数方式

利用所有引用类型常见对应的对象 - 就是具有具体的类型

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 = Object();

console.log(obj2);// {}// 调用结果为 { }
console.log(obj3);// {}// 调用结果为 { }

var obj4 = new Object(undefined);
var obj5 = new Object(null);

console.log(obj4);// 调用结果为 { }
console.log(obj5);// 调用结果为 { }
利用Object.create()方法创建对象

var 对象名 = Object.create(null) - 就是创建一个空对象

var 对象名 = Object.create(obj)

obj - 表示另一个对象

特点 - 当前创建的新对象拥有与obj对象相同的属性和方法

示例代码:

var obj6 = Object.create(null);
var obj7 = Object.create(obj1);

console.log(obj6);// 调用结果为 { }
console.log(obj7);// 调用结果为 { }
创建空对象

创建空对象的方式目前有以下几种

var obj1 = {};

var obj2 = new Object();

var obj3 = Object();

var obj4 = new Object(undefined);

var obj5 = new Object(null);

var obj6 = Object(undefined);

var obj7 = Object(null);

var obj8 = Object.create(null);

创建方式的对比

Number,String和Boolean

字面量方式创建的是原始类型,构造函数方式创建是引用类型

Array和Object

无论是字面量方式还是构造函数方式创建的都是引用类型

示例代码:

// 1. Number类型
var num1 = 100;// 字面量方式
var num2 = new Number();// 构造函数方式

// 2. String类型
var str1 = "一花一世界";// 字面量方式
var str2 = new String();//构造函数方式

// 3.Boolean类型
var boo1 = true;// 字面量方式
var boo2 = new Boolean();// 构造函数方式

// 4.Array类型
var arr1 = [];
var arr2 = new Array();

// 5.Object类型
var obj1 = {};
var obj2 = new Object();
变量与对象

示例代码:

/* 变量声明并初始化值 */
var obj = 100;
/* 输出调用 */
console.log(obj);// 调用结果为 100
/* 变量重新赋值为对象 */
obj = {
    /* 对象的属性 */
    name : "一花一世界",
    /* 对象的方法 */
    soso : function () {
        /* 方法体 */
        console.log("一叶一孤城");
    }
};
/* 输出调用 */
console.log(obj);// 调用结果为 { name: "一花一世界", soso: [Function: soso] }
变量,函数与对象

注意: 如果访问一个对象不存在的属性时 - 值为 undefined

示例代码:

var obj = {
    neme : "一花一世界",
    "Type-Content" : "text/HTML",
    sayMe : function () {
        console.log("一叶一孤城");
    }
};

console.log(obj.soso);// 调用结果为 undefined

创建一个对象 - 具有name和age属性与sayMe()方法

对象的属性 - 类似于变量

对象的属性 - 类似于变量

其实定义的变量就是某个对象的属性,定义的函数就是某个对象的方法

JavaScript找那个具有一个全局对象(Global) - 仅存在与概念

浏览器运行环境 - BOM中Window(窗口)对象

Node.js运行环境

示例代码:

var obj1 = {
    name : "一花一世界",
    age : "有点飘",
    sayMe : function () {
        console.log("一叶一孤城");
    }
};
console.log(Object);// 调用结果为 [Function: Object]
console.log(Global);// 调用结果为报错 - ReferenceError: Global is not defined

控制台调用图:

调用对象的属性方式 对象名.属性名 - 名称简单的调用方式

注意: 不适合用于复杂命名的属性名称

示例代码:

var obj = {
    neme : "一花一世界",
    "Type-Content" : "text/HTML",
    sayMe : function () {
        console.log("一叶一孤城");
    }
};

console.log(obj.neme);// 调用结果为 一花一世界

控制台调用图:

对象名称[属性名] - 通用的调用方式

适用于复杂命名的属性名称

特点: 该种方式比较通用

示例代码:

var obj = {
    neme : "一花一世界",
    "Type-Content" : "text/HTML",
    sayMe : function () {
        console.log("一叶一孤城");
    }
};

console.log(obj.neme);// 调用结果为 一花一世界
console.log(obj["Type-Content"]);// 调用结果为 text/HTML

控制台调用图:

修改对象的属性 对象名.已存在的属性名 = 属性值

示例代码:

var obj = {
    name : "一花一世界",
    sayMe : function(){
        console.log("一花一世界");
    }
}

obj.name = "一叶一孤城";
console.log(obj);// 调用结果为 { name: "一叶一孤城", sayMe: [Function: sayMe] }
对象名[已存在的属性名] = 属性值

示例代码:

var obj = {
    name : "一花一世界",
    sayMe : function(){
        console.log("一花一世界");
    }
}

obj["name"]
console.log(obj);// 调用结果为 { name: "一叶一孤城", sayMe: [Function: sayMe] }
删除对象的属性 delete 对象名.属性名

示例代码:

var obj = {
    name : "一花一世界",
    sayMe : function(){
        console.log("一花一世界");
    }
}

delete obj.name;
console.log(obj.name);//调用结果为 undefined
delete 对象名[属性名]

示例代码:

var obj = {
    name : "一花一世界",
    sayMe : function(){
        console.log("一花一世界");
    }
}

delete obj["name"];
console.log(obj.name);//调用结果为 undefined
检测对象的属性 判断对象的属性值是否为 undefined

示例代码:

var obj = {
    name : "张无忌",
    age : 18
}

if (obj.age !== undefined) {
    console.log("obj对象的age属性存在...");
} else {
    console.log("请先定义obj对象的age属性...");
}
判断对象的属性值 - 先转换为Boolean类型

示例代码:

var obj = {
    name : "张无忌",
    age : 18
}

if (obj.age) {
    console.log("obj对象的age属性存在...");
}
利用in关键字进行判断

示例代码:

var obj = {
    name : "张无忌",
    age : 18
}

if ("age" in obj) {
    console.log("obj对象的age属性存在...");
} else {
    console.log("obj对象的age属性不存在...")
}
Object类型提供了hasOwnProperty()方法

示例代码:

var obj = {
    name : "张无忌",
    age : 18
}

if (obj.hasOwnProperty("age")) {
    console.log("obj对象的age属性存在...");
} else {
    console.log("obj对象的age属性不存在...")
}
遍历对象的属性

示例代码:

var obj = {
    name : "一花一世界",
    age : 18,
    sayMe : function(){
        console.log("一花一世界");
    }
}
// 1.for...in语句
for (var objAttr in obj) {
    // 通过对象属性或方法对应的值的类型进行区别
    if (obj[objAttr] instanceof Function) {
        // 当前是对象的方法
        obj[objAttr]();
    } else {
        // 当前是对象的属性
        console.log(obj[objAttr]);
    }
}

// 2.Object类型提供了keys()方法 - 只能遍历可枚举的属性
var arr = Object.keys(obj);
for (var v in arr) {
    var objAttr = arr[v];
    // 通过对象属性或方法对应的值的类型进行区别
    if (obj[objAttr] instanceof Function) {
        // 当前是对象的方法
        obj[objAttr]();
    } else {
        // 当前是对象的属性
        console.log(obj[objAttr]);
    }
}

// 3.Object类型提供了getOwnPropertyNames()方法 - 包括不可枚举的属性
var arr = Object.getOwnPropertyNames(obj);
for (var v in arr) {
    var objAttr = arr[v];
    // 通过对象属性或方法对应的值的类型进行区别
    if (obj[objAttr] instanceof Function) {
        // 当前是对象的方法
        obj[objAttr]();
    } else {
        // 当前是对象的属性
        console.log(obj[objAttr]);
    }
}
调用对象的方法

对象名.方法名()

对象名[方法名]()

示例代码:

var obj = {
    name : "一花一世界",
    age : 18,
    sayMe : function(){
        console.log("一花一世界");
    }
}
// 1.对象名.方法名()
obj.sayMe();
// 2.对象名[方法名]()
obj["sayMe"]();
新增对象的方法

注意: 和新增对象的属性方法类似

示例代码:

var obj = {
    name : "一花一世界",
    age : 18,
    sayMe : function(){
        console.log("我是风儿");
    }
}
// 1.对象名.新的方法名 = function(){}
obj.sayYou = function(){
    console.log("你是沙");
}
console.log(obj);
// 2.对象名[新的方法名] = function(){}
修改对象的方法

注意: 和修改对象属性的方法类似

示例代码:

var obj = {
    name : "一花一世界",
    age : 18,
    sayMe : function(){
        console.log("我是风儿");
    }
}
// 1.对象名.方法名 = function(){}
obj.sayMe = function(){
    console.log("你是沙");
}
console.log(obj);
obj.sayMe();
// 2.对象名[方法名] = function(){}
删除对象的方法

注意: 和删除对象属性的方法类似

示例代码:

var obj = {
    name : "一花一世界",
    age : 18,
    sayMe : function(){
        console.log("一笑一人生");
    }
}
// 1.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();// 方法调用
}

// 2.delete 对象名[方法名]
超融合服务器 专线服务 javascript分享 js中的对象 javascript中的 javaScript中的this

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

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

相关文章

  • JavaScript面向对象中的错误与异常个人分享

    摘要：错误与异常错误与异常概念所谓错误就是错误就是程序中不正常的运行状态在其他编程语言中称为异常或错误解释器会为每个错误情况创建并且抛出一个对象对象包含错误的描述信息语句语句作用用于捕获和处理代码中的错误语句作用用于处理语句中出现的错误语句 错误与异常 错误与异常概念 所谓错误就是错误就是程序中不正常的运行状态 在其他编程语言中称为异常或错误 解释器会为每个错误情况创建并且抛出一个Erro...

    王陆宽 评论0 收藏0

  • JavaScript面向对象中的this关键字个人分享

    摘要：关键字关键字描述本身没有任何含义但它也可以代表任何含义被自动定义在所有的函数作用域中都有一个共同点它总是要返回一个对象指向哪个对象不取决于定义在哪它取决于调用位置注意建议搞不明白时尽量不要使用否则会很混乱一定要理解之后使用的基本用法表示在函 this关键字 this关键字描述 this本身没有任何含义,但它也可以代表任何含义 this被自动定义在所有的函数作用域中 this都有一个共...

    nevermind 评论0 收藏0

  • JavaScript面向对象中的继承个人分享

    摘要：继承原型链所谓言行链就是如果构造函数或对象的原型指向构造函数或对象的原型再指向构造函数或对象以此类推最终的构造函数或对象的原乡指向的原型由此形成一条链状结构被称之为原型链示例代码原型链通过构造函数创建对象将的原型指向对象通过构造函数创建对象 继承 原型链 所谓言行链就是如果构造函数或对象A,A的原型指向构造函数或对象B,B的原型再指向构造函数或对象C,以此类推,最终的构造函数或对象的原...

    Coly 评论0 收藏0

  • JavaScript面向对象中的严格模式个人分享

    摘要：严格模式严格模式的概念所谓严格模式就是对中的一种限制性更强的方式属于代码的一种强制规则来规范代码的格式简单的说就是必须按照严格模式的规则书写代码否则就会报错严格模式修正了一些引擎难以优化的错误同样的代码有些时候严格模式会比非严格模式下更加快 严格模式 严格模式的概念 所谓严格模式就是对JavaScript中的一种限制性更强的方式. 属于代码的一种强制规则,来规范代码的格式简单的说就是...

    lordharrd 评论0 收藏0

  • JavaScript面向对象中的String类型个人分享

    摘要：类型大小写转换表示将小写内容转换为大写内容表示将大小内容转换为小写内容示例代码构造函数方式表示将小写内容转换为大写内容表示将大小内容转换为小写内容调用结果为调用结果为控制台调用效果图根据指定位置获取字符串表示通过指定字符串中指定字符 String类型 大小写转换 toUpperCase() - 表示将小写内容转换为大写内容 toLowerCase() - 表示将大小内容转换为小写内容...

    Fundebug 评论0 收藏0

  • JavaScript面向对象中的Array类型个人分享

    摘要：类型检测数组示例代码调用结果为方法作用用于判断当前对象的数据类型结果特点可以准确判断出当前变量的类型调用结果为调用结果为报错调用结果为调用结果为方法判断指定类型是否出现在当前对象的原型链中调用结果为转换数组提供了两种方法用于数组的转 Array类型 检测数组 示例代码: var arr = [1,2,3,4,5]; console.log(arr instanceof Array);/...

    KnewOne 评论0 收藏0

发表评论

登陆后可评论

0条评论

cppprimer

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<