JavaScript中的对象我的分享

时间  2019-12-10
标签 javascript 对象 我的 分享 栏目 JavaScript 繁體版
原文   原文链接

对象

对象的概念

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

对象的分类

    1. 内置对象/原生对象:浏览器

      • 引用类型能够称做为内置对象

    2. 宿主对象:函数

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

    3. 自定义对象优化

      • 开发人员建立的对象

    • Object对象是什么spa

      • object类型是全部JavaScript类型的父级

    建立对象

    对象的初始化器建立方式

    var 对象名 = {
属性名 : 属性值,
方法名 : function(){
方法体
}
}
    • 注意: 若是存在多个属性名的话中间用 " , "隔开

    示例代码:code

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

    示例代码:ip

    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对象相同的属性和方法

    示例代码:get

    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 对象名[方法名]
    相关文章
    相关标签/搜索
    每日一句
      每一个你不满意的现在，都有一个你没有努力的曾经。
    本站公众号
       欢迎关注本站公众号,获取更多信息
    联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程