JavaScript（Ⅶ）对象

 

1. 对象

JavaScript 中的对象，和其它编程语言中的对象一样，可以比照现实生活中的对象来理解它。 JavaScript 中对象的概念可以比照着现实生活中实实在在的物体来理解。
在 JavaScript 中，一个对象可以是一个单独的拥有属性和类型的实体。拿它和一个杯子做下类比，一个杯子是一个对象，拥有属性。杯子有颜色、图案、重量等等。同样， JavaScript 对象也有属性来定义它的特征。
方法 是关联到某个对象的函数，或者简单地说，一个方法是一个值为某个函数的对象属性。定义方法就象定义普通的函数，除了它们必须被赋给对象的某个属性。

1.1 对象分类

• 内置对象/原生对象

  就是 JavaScript 语言预定义的对象。在 ECMAScript 标准定义，由 JavaScript 解释器/引擎提供具体实现。（String\Number)

• 宿主对象

  指的是 JavaScript 运行环境提供的对象。一般是由浏览器厂商提供实现（目前也有独立的 JavaScript 解释器/引擎提供实现），主要分为 BOM 和 DOM。

• 自定义对象

  就是由开发人员自主创建的对象。

2.1 对象初始化器方式

使用对象初始化器也被称作通过字面值创建对象。通过对象初始化器创建对象的语法如下:

var 对象名 = {
           属性名 : 属性值,
           方法名 : function(){
               方法体
           }
       }

var hero1 = {
            name : 'zhangwuji',
            age : 18,
            sayMe : function(){
                console.log('this is zhangwuji.');
            }
        }

 

2.2 构造函数方式

• 通过 JavaScript 提供的预定义类型的构造函数来创建对象，如下示例:

var date = new Date();// 创建一个 Date 对象
var str = new String("this is string.");// 创建一个 String 对象
var num = new Number(100);// 创建一个 Number 对象

 

• 通过 JavaScript 提供的 Object 类型的构造函数来创建自定义对象，如下示例:

var obj = new Object();// 创建一个自定义对象

       *new - 关键字，表示创建一个新的对象
       * Object - 在JavaScript中是对象的祖先

为该对象设置属性和方法
       * 设置属性 - 对象名.属性名 = 属性值;
       * 设置方法 - 对象名.方法名 = function(){}

var hero2 = new Object();
        hero2.name = 'zhouzhiruo';
        hero2.sayMe = function(){
            console.log('this is zhouzhiruo.');
        }

2.3 Object.create() 方法

Object.create() 方法创建一个拥有指定原型和若干个指定属性的对象。语法如下:

Object.create(proto, [ propertiesObject ])

 

参数:

• proto 参数: 一个对象，作为新创建对象的原型。
• propertiesObject 参数: 可选。该参数对象是一组属性与值，该对象的属性名称将是新创建的对象的属性名称，值是属性描述符。

通过 Object.create() 方法创建一个新对象，同时扩展自有属性。

3. 对象的属性

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

 

3.1 定义对象的属性

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

var hero = {
            name : 'zhangwuji',
            age : 18,
            sayMe : function(){
                console.log('this is zhangwuji.');
            }
        }

• 可以通过点符号来创建一个对象的属性。

/*
            TODO 新增属性或方法
            TODO * 对象名.新的属性名 = 属性值;
            TODO * 对象名.新的方法名 = function(){}
          */

 hero.job = 'jiaozhu';
        hero.sayJob = function(){
            console.log('my job is jiaozhu.');
        }

 

• JavaScript 对象的属性也可以通过方括号创建。对象有时也被叫作关联数组, 因为每个属性都有一个用于访问它的字符串值。

var myCar = new Object();

myCar["make"] = "Ford";
myCar["model"] = "Mustang";
myCar["year"] = 1969;

/*
            TODO 修改属性或方法
            TODO * 对象名.原有属性名 = 新的属性值;
            TODO * 对象名.原有方法名 = function(){}
         */
        hero.name = 'zhouzhiruo';
        hero.sayMe = function(){
            console.log('this is zhouzhiruo.');
        }

3.2 访问对象的属性

• 可以通过点符号来访问一个对象的属性。  对象名.属性名   ；对象名.方法名()

  let hero1 = {
            name : 'zhangwuji',
            age : 18,
            sayMe : function(){
                console.log('this is zhangwuji.');
            }
        }

        console.log(hero1.name);

var emp = { ename : 'Tom', salary : 3500 };

emp.ename = 'Tommy';// 修改属性的值
console.log(emp.ename);// 获取属性的值

• JavaScript 对象的属性也可以通过方括号访问。对象有时也被叫作关联数组, 因为每个属性都有一个用于访问它的字符串值。

 var hero = {
            name : 'zhangwuji',
            age : 18,
            // TODO 定义的属性或方法名 - 必须定义为字符串类型
            'content-type' : 'text/html',
            sayMe : function(){
                console.log('this is zhangwuji.');
            }
        }

        /*
            TODO 对象的属性和方法具有一种通用的调用方式
            TODO * 属性 -> 对象名['属性名']
            TODO * 方法 -> 对象名['方法名']()
         */
        console.log(hero['name']);
        hero['sayMe']();
        // TODO 适用于属性名或方法名命名方式比较复杂的
        console.log(hero['content-type']);

 

3.3 删除对象的属性

 

var hero = {
            name : 'zhangwuji',
            age : 18,
            sayMe : function(){
                console.log('this is zhangwuji.');
            }
        }

      /*
            TODO 删除操作使用一个 delete 关键字
            TODO * delete 对象名.属性名
            TODO * delete 对象名.方法名
         */
        delete hero.name;
        delete hero.sayMe;

 3.4 属性访问出错

   <script>
        let hero = {
            name : 'zhangwuji',
            age : 18,
            sayMe : function(){
                console.log('this is zhangwuji.');
            }
        }

        // todo 调用不存在的属性
        console.log(hero.sex);// undefined
        // todo  调用不存在的方法
        console.log(hero.ha());// Uncaught TypeError: hero.ha is not a function
    </script>

 

3.5遍历（枚举）属性

 let hero = {
            name : 'zhangwuji',
            age : 18,
            sayMe : function(){
                console.log('this is zhangwuji.');
            }
        }

• for…in 循环: 该方法依次访问一个对象及其原型链中所有可枚举的属性。

语法结构：

for(var name in 对象名 ){

name代表了对象的属性名或方法名

}

<script>
        let hero = {
            name : 'libufan',
            age : 18,
            sayMe : function(){
                console.log('laallaall');
            }
        }
     console.log(typeof hero['sayMe']);// 输出：function
       for(let pro in hero){
           //得到属性名或方法名
           // 区分属性或方法 用 typeof
         if(typeof hero[pro] == "function"){
             console.log(1)
             hero[name]();
         } else {
             console.log( hero[pro]);
         }
       }
    </script>

 

 

3.6 检测对象的属性

可以使用如下四种方法检测对象中是否存在指定属性:

• 使用 in 关键字。// 掌握

<script>
        let hero = {
            name : 'libufan',
            age : 18,
            sayMe : function(){
                console.log('laallaall');
            }
        }

        console.log('name' in hero);// 输出 ：true
    </script>

 

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

console.log( hero.hasOwnProperty( 'ename' ));

 

• 使用 undefined 进行判断。

console.log( hero.ename === undefined );

 

• 使用 if 语句进行判断。

if( hero.ename ){
    console.log( 'ename属性存在' );
}