对象

为什么要有对象

什么是对象

函数的参数如果特别多的话，可以使用对象简化。

function printPerson(name, age, sex...) {
};
// 函数的参数如果特别多的话，可以使用对象简化。
function printPerson(person) {
    console.log(person.name);
    ...
}

现实生活

万物皆对象，一切事物都是对象，对象是一个具体的事物，一个具体的事物就会有行为和特征。

例如：
1、手机和汽车不是对象，它们是一类事物
2、车是一类事物，门口停的那辆车才是对象
	特征：红色、四个轮子
	行为：驾驶、刹车

对象是由特征和行为组成

1. 特征一般是名词，是描述这个对象的；
2. 行为一般是动词，是指对象可以做的事情。

JavaScript中的对象

JavaScript中的对象是对现实世界中对象的抽象

JavaScript中的对象是无序属性的集合

1. 其属性可以包含基本值、对象或函数；
2. 对象就是一组没有顺序的值；
3. 可以吧JavaScript中的对象想象成键值对，其中值可以是数据和函数。
4. 对象的特征和行为
   • 特征——属性
   • 行为——方法

var student = {
    name: '张飞'， // 特征
    age: 18， // 特征
    sex: '男'， // 特征
    sayHi: function () {
        console.log('Hello');
    } // 行为
}

对象和函数的区别

函数：可以封装一段代码，独立存在

对象：封装一组属性和方法

方法：属于对象的函数

创建对象

对象字面量

// 创建一个对象：dog
// 属性：名字name  品种type  年龄age  颜色color
// 方法：叫bark  吃eat
var dog = {
    name: '小白',
    type: '中华田园犬',
    age: 2,
    color: 'Yellow',
    // 在方法中使用属性的值
    // this 在方法中代表的是当前对象 dog
    bark: function () {
        console.log(this.name + '汪汪汪');
    },
    eat: function () {
        console.log(this.name + '啃骨头')
    },
};

// 访问对象的属性 对象.属性名
console.log(dog.name);
console.log(dog.type);
console.log(dog.age);
console.log(dog.color);
// 访问对象的方法 对象.方法名
dog.bark();
dog.eat();

// 属性的另一种访问方式 对象['属性名']
console.log(dog['name']);
console.log(dog['type']);
console.log(dog['age']);
console.log(dog['color']);

new Object()

Object是一个构造函数，通过new的方式来调用构造函数

// 创建一个对象：hero
// 属性：名字name 武器weapon  装备eqipment  血条blood
// 方法：攻击attack  加速跑run
var hero = new Object(); // new Object调用构造函数创建了一个空的对象并且赋给hero

//打印一个不存在的属性，输出 undefined
console.log(hero.name); // undefined

// 属性
hero.name = '黄忠';
hero.weapon = '弓箭';
hero.eqipment = ['衣服', '鞋子', '头盔'];
hero.blood = 100;
// 方法
hero.attack = function () {
    console.log(this.name + '射箭');
};
hero.run = function () {
    console.log(this.name + '加速跑');
};

工厂方法

// 创建一个函数
function createHero(name, weapon, equipment, blood) {
    var hero = new Object(); // 创建一个空对象
    
    // 属性
    hero.name = name;
    hero.weapon = weapon;
    hero.equipment = equipment;
    hero.blood = blood;
    //方法
    hero.attack = function () {
        console.log(this.name + '攻击');
    };
    hero.run = function () {
        console.log(this.name + '加速跑');
    };
    return hero;
};

// 通过函数创建对象
hero1 = createHero('黄忠', '弓箭', ['衣服', '鞋子', '头盔'], 100);
hero2 = createHero('刘备', '剑', ['衣服', '鞋子', '头盔'], 100);
hero3 = createHero('张飞', '丈八蛇矛', ['衣服', '鞋子', '头盔'], 100);
hero4 = createHero('关羽', '青龙偃月刀', ['衣服', '鞋子', '头盔'], 100);

console.log(hero1);
console.log(hero2);
console.log(hero3);
console.log(hero4);

自定义构造函数

自定义构造函数命名方式：帕斯卡命名，第一个单词的第一个字母大写，后续的每一个单词的第一个字母都大写

// 自定义构造函数 Hero
function Hero(name, weapon, equipment, blood) {
    this.name = name;
    this.weapon = weapon;
    this.equipment = equipment;
    this.blood = blood;
    
    this.attack = function () {
        console.log(this.name + ':攻击');
    };
    this.run = function () {
        console.log(this.name + ':加速跑');
    };
}

var hreo1 = new Hero('黄忠', '弓箭', ['衣服', '鞋子', '头盔'], 100);
var hreo2 = new Hero('刘备', '剑', ['衣服', '鞋子', '头盔'], 100);
var hreo3 = new Hero('张飞', '丈八蛇矛', ['衣服', '鞋子', '头盔'], 100);
var hreo4 = new Hero('关羽', '青龙偃月刀', ['衣服', '鞋子', '头盔'], 100);

new关键字

new的执行过程

1. 在内存中创建了一个空的对象；
2. 让构造函数中的this指向刚刚创建的对象；
3. 执行构造函数，在构造函数中设置属性和方法（当然也可以做其他事情）；
4. 返回了当前对象

this

this出现在以下位置，分别代表什么

1. 在函数中，this指向Window；

   function fn() {
       console.log(this); // Window
   }
   

2. 在方法中，this指向的是这个方法所属的对象；

   var obj = {
       name: "zs",
       age: 18,
       sayHi: function () {
           console.log(this.name + "say:Hello")
       }
   }
   obj.sayHi(); // zssay:Hello
   

3. 构造函数中，this就是构造函数创建的对象；

   var function Obj(name, age) {
       this.name = name;
       this.age = age;
       this.sayHi = function () {
           console.log(this.name + 'say:Hello')
       }
   }
   
   var o = new Obj('lisi', 18);
   o.sayHi(); // zssay:Hello
   

   function Fn() {
       this.name = 'lisi';
       this.age = 18;
       console.log(this);
   }
   
   var o = new Fn(); // fn{name:"lisi", age: 18}
   Fn(); // Window
   

遍历和删除对象属性

遍历对象属性

var o = {
    name: 'zhangsan',
    age: 18,
    sayHi: function () {
        console.log(this.name + ":Hello")
    }
}

for (var key in o) {
    console.log(key + "---" + o[key]);
}

动态给对象添加属性

var o = {};

for (var i = 0; i < 10; i++) {
    o['a' + i] = i;
}
console.log(o);

删除对象属性

var o = {
    name: 'zhangsan',
    age: 18,
    sayHi: function () {
    }
}

console.log(o.name);
console.log(o.sayHi);

delete o.name;
delete o.sayHi;

console.log(o.name);
console.log(o.sayHi);