JavaScript中的对象个人分享

头像
a达达
    阅读 7 分钟
    1

    对象

    对象的概念

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

    对象的分类

    1. 内置对象/原生对象:

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

    2. 宿主对象:

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

    3. 自定义对象

      • 开发人员创建的对象

    • 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);// 调用结果为 { }

    创建空对象

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

      1. var obj1 = {};
      2. var obj2 = new Object();
      3. var obj3 = Object();
      4. var obj4 = new Object(undefined);
      5. var obj5 = new Object(null);
      6. var obj6 = Object(undefined);
      7. var obj7 = Object(null);
      8. 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]);
    }
}

    调用对象的方法

    1. 对象名.方法名()
    2. 对象名[方法名]()

    示例代码:

    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
    a达达
    21 声望5 粉丝
    « 上一篇
    JavaScript中的函数个人分享
    下一篇 »
    JavaScript中的面向对象个人分享

    引用和评论

    推荐阅读
    头像
    Ajax系列之JSON数据格式

    a达达阅读 2.6k

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

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

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.6k评论 8

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

    夕水赞 16阅读 2.2k评论 4

    头像
    前端开发工具

    寒青赞 15阅读 4.6k

    头像
    开发插件集合

    寒青赞 12阅读 3k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.2k评论 2

    0 条评论
    得票最新