js创建对象

一、什么是对象？

   对象是一组无序的相关属性和方法的集合，也就是存储数据的集合。

   对象是由属性和方法组成的。

二、定义对象的三种方式

2.1 字面量定义对象

• 对象里面的数据单元 采用 键名:键值 或 属性:属性值 的语法形式存储
• 多个数据单元中间用逗号隔开

//name就是obj对象的键名/属性，'王昭没有君啊'是值、属性值
//fn是一个方法，冒号后面是一个匿名函数
var obj = {name:'王昭没有君啊',sex:'男',age:'**',
           fn:function(){
               console.log('正在努力写博客');
           }

};

调用对象的属性的方法：

（1）对象.属性

      不支持数字键名，不支持解析变量

（2）对象['属性']

      支持数字键名，支持解析变量

调用对象的方法

** **对象.方法名()

var obj = {name:'王昭没有君啊',sex:'男',age:'**',
           fn:function(){
               console.log('正在努力写博客');
           }

};

console.log(obj);
console.log(obj.name);
console.log(obj['name']);

obj.fn();

执行结果：

变量、属性，函数、方法的区别：

** **相同点：变量、属性，他们都是用来存储数据的

不同点：

   变量：单独声明并赋值 使用的时候直接写变量名 单独存在

   属性：在对象里面不需要声明 使用的时候必须是 对象.属性 或 对象['属性']

不同点：函数、方法，都是实现某种功能的

   函数：单独声明 调用的 函数名()是单独存在的

   方法：是在对象里面的 调用方式： 对象.方法();

              用来描述对象的行为和功能

2.2 new Object定义对象

• 利用 = 赋值 添加对象的属性和方法
• 每个属性、方法之间用分号结束

var obj = new Object();

obj.name = '王昭没有君啊';
obj.sex = '男';
obj.age = '**';
obj.fn = function() {
    console.log('正在努力写博客');
} 

console.log(obj.name);
console.log(obj['sex']);
obj.fn();

console.log(obj);

执行结果：

2.3 构造函数定义对象

构造函数的语法格式

function 构造函数名() {

** this.属性 = 属性值;**

** this.方法 = function() {}**

}

注意：

 前面两种方法定义对象一次只能定义一个对象，如果对象里面的很多 属性和方法 和另一个对象大部分是相同的，一般我们只能进行复制粘贴到另一个对象里，这样写是可以的，但是就显得略微粗糙，怎么办呢，那么我们就可以利用 函数的方法 去重复这些相同的代码，这个函数就称为 **构造函数**，这个函数封装的不是普通的代码，而是封装的对象，它呢，其实就是把对象里面的一些 相同的 属性和方法 抽象 出来 封装到函数里面。

通过new关键字创建对象的过程 就是 对象实例化。

function Person(name,num,sex) { //构造函数名首字母需要大写

   this.name = name;
   this.age = num;
   this.sex = sex;

   this.fn = function (grade) {
      console.log(grade);
   }
}

//调用构造函数不需要return 就可以返回结果
//调用构造函数 必须使用 new
//使用 new Person()调用函数 就可以定义一个对象
var protagonist = new Person('叶天帝', 24, '男');
    
console.log(protagonist.name);
console.log(protagonist.age);
console.log(protagonist.sex);
protagonist.fn('红尘仙');

var fristProtagonist = new Person('荒天帝', 30, '男');

console.log(fristProtagonist.name);
console.log(fristProtagonist.age);
console.log(fristProtagonist.sex);
protagonist.fn('红尘仙');

执行结果：

构造函数和对象的区别：

构造函数：泛指的某一大类

对象：特指某一个具体的事物

三、对象的基本操作

定义一个对象：

var obj = {name:'王昭没有君啊',sex:'男',age:'**',
           fn:function(){
               console.log('正在努力写博客');
           }

};

执行结果：

然后分别进行以下操作 ：

**修改对象 **

对象是已经存在的

//修改
obj.name = '王昭君';
obj.sex = '女';

执行结果：

新增对象

  对象是不存在的

//新增
obj.addr = '北京';
console.log(obj);

执行结果：

删除对象

格式一：

 delete( 对象.属性 )

 delete( 对象['属性'] )

格式二：

  delete 对象.属性

  delete 对象['属性']

  对象是已经存在的

//删除
delete(obj.sex);
delete(obj['age']);

执行结果：

四、循环遍历对象

对象只能用 for...in 循环遍历

注：for...in 循环在我的另一篇文章 JavaScript数组相关知识 有详解

var obj = {name:'王昭没有君啊',sex:'男',age:'**'};

//循环遍历对象
for (var index in obj) {

    //index 存储的是obj对象的键名
    console.log(index);

    //对象.属性不能解析变量
    //这里必须使用 对象['属性'] 的方式,可以解析变量
    console.log(obj[index]);
}

执行结果：