JavaScript核心语法——对象

对象

对象的概述

对象是什么

JavaScript中的对象,和其他编程语言中的对象一样。可以对比现实生活中的一些东西来理解他。
在JavaScript中,一个对象可以使一个单纯的拥有属性和类型的实体。假如和一个杯子相比较,一个杯子是一个对象,拥有属性。杯子有颜色、图案、重量等。同样,JavaScript对象也有属性来定义它的特征。
方法是关联到某个对象的函数,或者简单来说,一个方法是一个值为某和函数的对象属性。定义方法就像定义普通的函数,出了他们必须被赋给对象的某个属性。

对象的分类

1.内置对象/原生对象
就是JavaScript语言预定义的对象。在ECMAScript标准定义,有JavaScript解释器/引擎提供具体实现。
2.宿主对象
指的是JavaScript运行环境提供的对象。一般由浏览器厂商提供实现(目前也有独立的JavaScript解释器/引擎提供实现),主要分文BOM和DOM。
3.自定义对象
就是由开发人员自主创建的对象。
对象的初始化器常见方式,代码如下;

Object对象

Object对象是什么

Object类型与Array、Math等一样都是JavaScript的引用类型。不过Object类型是JavaScript中所有类型的父级(所有类型的对象都可以使用Object的属性和方法)。
JavaScript可以通过Object的构造函数来创建自定义对象。当以非构造函数形式被调用时,Object等同于new Object()。

创建对象

对象初始化器方式

使用对象初始化器也被称作通过字面值创建对象。

1.对象的初始化器创建方式
      var 对象名 = {
        属性名 : 属性值,
        方法名 : function(){
            方法体
        }
      }
 
var obj1 = {
    name : '张无忌',
    age : 18,
    sayMe : function(){
        console.log('我是张无忌');
    }
}

构造函数方式

构造函数时通过JavaScript提供的预定义类型的构造函数来创建对象的。
代码如下;

对象的构造函数方式
       利用所有引用类型创建对应的对象 -> 具有具体的类型
        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()方法

Object.create()方法创建一个拥有指定原型和若干个指定属性的对象。
参数;
1.proto参数;一个对象,作为新创建对象的原型
2.propertiesObject参数;可选。该参数对象是一组属性与值,该对象的属性名称试试创建的对象的属性名称,值是属性描述符。
代码如下;

利用Object.create()方法创建对象
      var 对象名 = Object.create(null) -> 创建一个空对象
      var 对象名 = Object.create(obj)
      obj - 表示另一个对象
      特点 - 当前创建的新对象拥有与obj对象相同的属性和方法
 
var obj6 = Object.create(null);
var obj7 = Object.create(obj1);

对象的属性

定义对象的属性

一个JavaScript对象有很对属性。一个对象的属性可以解释成一个附加到对象的变量。对象的属性和普通的JavaScript变量基本没有什么区别,仅仅是属性属于某个对象。

var obj = {
    name : '张无忌',
    'Type-Content' : 'text/html',
    sayMe : function(){
        console.log('我是张无忌');
    }
}
/*
    1.对象名.属性名
      * 不适用于复杂命名的属性名称
 */
console.log(obj.name);// 张无忌
// console.log(obj.Type-Content);

    2.对象名[属性名] - 通用的调用方式
       适用于复杂命名的属性名称
 
console.log(obj['name']);// 张无忌
console.log(obj['Type-Content']);// text/html

 访问一个对象不存在的属性 -> 值为 undefined
console.log(obj.age);

访问对象的属性

1.JavaScript可以通过点符号来访问一个对象的属性。

var emp = {
    ename:'Tom',salary:3500
};
emp.ename = 'Tommy'//修改属性的值
console.log(emp.ename);//获取属性的值

2.JavaScript对象的属性也可以通过方括号访问。

var emp = {
    ename:'Tom',salary:3500
};
emp['ename'] = 'Tony';//修改属性的值
console.log(emp["ename"]);//获取属性的值

遍历属性

JavaScript提供了三种原生方法用于遍历或枚举对象的属性;
1.for...in循环:该方法依次访问一个对象及其原型链中所有课枚举的属性。
2.Objectkeys(object)方法:该方法返回一个对象o自身包含(不包括原型中)的所有属性的名称的数组。
3.ObjectgetOwnpropertyNames(object)方法:该方法返回一个数组,他包含了对象o所有拥有的属性(无论是否可枚举)的名称。

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]);
    }
}

属性访问出错

当不确定对象是否存在、对象的属性是否存在时,可以使用错误处理结构try...catch语句块来捕捉抛出的错误,避免程序异常终止。

//访问未声明的变量
console.log(emp);

//访问未声明的属性
var emp = {};
console.log(emp.ename);

//访问未声明的属性的成员
console.log(emp.ename.length);

检查对象的属性

检查对象的属性可以使用以下四种方法检测对象中是否存在指定属性
1.使用关键字in

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

if ('age' in obj) {
    console.log('obj对象的age属性存在...');
} else {
    console.log('obj对象的age属性不存在...')

2.使用Object对象的hasOwnProperty()方法。

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

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

3.使用undefined进行判断。

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

if (obj.age !== undefined) {
    console.log('obj对象的age属性存在...');
} else {
    console.log('请先定义obj对象的age属性...');
}

4.使用if语句进行判断

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

if (obj.age) {
    console.log('obj对象的age属性存在...');
}

删除对象的属性

可以用delete操作符删除一个不是继承而来的属性。

var obj = {
    name : '张无忌',
    sayMe : function(){
        console.log('我是张无忌');
    }
}

    1.delete 对象名.属性名
    2.delete 对象名[属性名]
 
delete obj.name;
console.log(obj.name);// undefined

对象的方法

定义对象的方法

定义方法就像定义普通的函数,出了他们必须被赋予给对象的某个属性。

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.对象名.方法名()
obj.sayMe();
// 2.对象名[方法名]()
obj['sayMe']();

删除对象的方法

可以用delete操作符删除对象
代码示例;

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 对象名[方法名]

相关推荐