一、对象理解
现实世界 万物皆对象, 一切事物都是对象 对象还是一个具体的事物 对象: 特征和行为组成 特征是名词 用来描述对象的, 行为是动词 程序中的对象 是对现实世界中事物的抽象 1. js中的对象其实就是生活中的一个抽象 2. js中的对象是一个无序属性的集合 3. 其属性可以包含基本值,对象或函数,对象就是一组没有顺序的值 4. 对象的行为和特征 行为: 方法 特征: 属性 如何创建一个对象, 如何使用对象的成员 对象: 属性和方法 称为成员 this在对象中代表的是当前对象
1.字面量创建对象
var dog = { name: 'puppy', type: '中华田园犬', age: 2, color: 'yellow', bark: function () { console.log(this.name + 'wang wang wang') }, eat: function () { console.log(this.name + '啃骨头') } } 属性访问 console.log(dog.name); console.log(dog.type); 另一种访问属性的方法 console.log(dog['name']); 方法访问 dog.bark(); dog.eat(); 函数和方法的区别 函数: 独立存在的就是函数 函数名() 调用 方法: 属于对象的函数 对象名.方法() 调用
2. new Object创建对象并动态添加属性
2. new Object() Object 是一个构造函数 new的方式来调用的构造函数 new Object() 调用构造函数 会在内存中创建一个对象 // 动态添加属性和方法 var hero = new Object(); 创建一个空对象 hero.name = 'huangzhong'; hero.weapon = ''攻击; hero.equipment = ['tk','gj','kj']; hero.attack = function () { console.log(this.name +':attack lalala') } hero.attack();
3. 工厂函数创建对象
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 + ': 攻击') } return hero; } var hero1 = createHero('huangzhong','gongjian',['toukui','xuezi'],100);
4.自定义构造函数创建对象
命名: 遵从帕斯卡规则, 第一个单词的第一个姊妹大写,后续的每个单词首字母大写 function Hero(name,weapon,equipment,blood) { // this 动态给对象增加成员 this 指向当前对象 this.name = name; this.weapon = weapon; this.equipment = equipment; this.blood = blood; this.attack = function () { console.log(this.name + 'attacking') } } var hero1 = new Hero('huangzhong','gongjian','toukui',100)
二、 new关键字和this
1. new关键字的执行过程
1. 在内存中创建了一个空的对象 2. 让构造函数中的this指向刚刚创建的对象 3. 执行构造函数, 在构造函数中设置函数和方法 4. 返回了当前对象
2. this出现的三个地方
1. 在方法中 this 指向的是这个方法所属的对象 2. 函数中 指向window 3. 构造方法中 this就是构造函数中创建的对象
三、对象的操作案例
案例1: for in 遍历对象
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
var obj = { name: 'zs', age: 18, sex: 'male', sayHi: function () { console.log(this.name + ': hello'); } } for (var key in obj) { console.log(key + '---' + obj[key]); }
添加属性
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
for (var i = 0; i < 10; i++) { o['a' + i] = i * 2 }
删除成员delete
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
var o = { name: 'abc', say: function () { } } console.log(o.name); delete o.name; console.log(o.name);