浅谈JS对象的那些事

对象的概念

为什么要有对象

如果有一组相关的数据，松散的存储不利于使用，存入数组中受下标限制又必须有固定的顺序，而对象可以自定义名称存储一系列无序的相关数据

什么是对象

显示生活中的对象：万物皆对象，对象是一个具体的事物，一个具体的事物就会有行为和特征

• 举例：一部车，一个手机
  • 车是一类事物，门口停的那辆车才是对象
  • 特征：红色、四个*
  • 行为：驾驶、刹车

JS中的对象

• JS中的对象
  • JS中的对象其实是对生活中对象的一个抽象
  • JS的对象是无序属性的集合
• 其属性可以包含基本知识、对象或函数。对象就是一组没有顺序的值。我们可以吧JS中的对象想象成键值对，其中值可以使数据和函数
• 对象的行为和特征
  • 特征—在对象中用属性表示
  • 行为—在对象中用方法表示

对象字面量

• 创建一个对象最简单的方式是使用对象字面量赋值给变量。类似数组
• 对象字面量语法：{}
• 内部可以存放多条数据，数据与数据之间用逗号分隔，最后一个后面不要加逗号
• 每条数据都是有属性名和属性值组成，键值对写法：k: v
  • k：属性名
  • v：属性值，可以是任意类型的数据，比如简单类型数据、函数、对象

var obj = {
    k1: v1,
    k2: v2,
    k3: v3
}

区分属性和方法

• 属性：
  • 对象的描述性特征，一半是名词，相当于定义在对象内部的变量
• 方法：
  • 对象的行为和功能，一般是动词，定义在对象中的函数

对象数据的调用和更改

• 用对象的变量名打点调用某个属性名，得到属性值
• 在对象内部用this打点调用属性名。this替代对象
• 用对象的变量名后面加[]调用，[]内部是字符串格式的属性名
• 调用方法时，需要在方法名后加()执行

var obj = {
    name: "XL",
    age: 18,
    sayHi: function () {
        console.log(this.name + "向你致敬")
    }
};

console.log(obj.name)
console.log(obj.age)
obj.sayHi()

console.log(obj["name"])
console.log(obj["age"])
obj["sayHi"]()

• 更改属性的属性值方法：先调用属性，在等号赋值 obj.age = 18888
• 增加新的属性和属性值：使用点语法或者[]方法直接定义新属性，等号赋值 obj.height = 187
• 删除一条属性：使用delete关键字，空格后面加属性调用 delete obj.age

new Object() 方法创建对象

• Object() 构造函数，是一种特殊的函数。主要用来创建对象时初始化对象，即为对象成员变量赋初始值，总与new运算符一起使用在创建对象的语句中
  1. 构造函数用于创建一类对象，首字母要大写
  2. 构造函数要和new一起使用才有意义

// new Object() 创建新对象
var nObj = new Object();    // 创建了一个新的空的对象
// 添加属性和方法
nObj.name = "SL";
nObj.age = 18;
nObj.sayHi = function () {
    console.log("你好")
};
// 调用
console.log(nObj);

new在执行时会做四件事情

• new会在内存中和创建一个新的空对象
• new会让this指向这个新的对象
• 执行构造函数 目的：给这个新对象加属性和方法
• new会返回这个新对象

工厂函数方法创建对象

如果要创建多个类似的对象，可以将new Object() 过程封装到一个函数中，将来调用函数就能创建一个对象，相当于一个生产对象的函数工厂，用来简化代码

// 工厂方法就是相当于对new Object() 方法的一个封装
function createObj (name, age) {
    // 创建一个空对象
    var cObj = new Object();
    // 添加属性和方法，属性可以接受参数的值
    cObj.name = name;
    cObj.age = age;
    cObj.sayHi = function () {
        console.log("你好")
    };
    // 将对象作为函数的返回值
    return cObj;
}
// 相互创建一个对象可以调用工厂函数
var c1 = createObj("zs", 18);
var c2 = createObj("ls", 28);
// 输出
console.log(c1);
console.log(c2);

自定义构造函数创建对象

• 比工厂方法更加简单
• 自定义一个创建具体对象的构造函数，函数内部不需要new一个构造函数的过程，直接使用this代替对象进行属性和方法的书写，也不需要return一个返回值
• 使用时，利用new关键字调用自定义的构造函数即可
• 注意：构造函数的函数名首字母需要大写，区别于其他普通函数名

// 自己定义一个构造函数
function Obj(name, age) {
    // 不需要使用new一个新对象 用this替代将来创建的新对象
    this.name = name;
    this.age = age;
    this.sayHi = function () {
        console.log("你好")
    }
}
// 使用new调用构造函数
var o1 = new Obj("zs", 18);
var o2 = new Obj("ls", 28);

遍历对象方法

• for in 循环也是循环的一种，专门用来遍历对象，内部会定义一个k变量，k变量在每次循环时会从第一个开始接收属性名，一直接收到最后一条属性名，执行完后跳出循环
• 简单的循环遍历：输出每一项的属性名和属性值

for (var k in obj) {
    console.log(k + "属性的属性值是" + obj[k]);
}

简单数据类型和复杂数据类型

两者的区别

• 基本类型又叫做值类型，复杂类型又叫做引用类型
  • 值类型：简单数据类型，基本数据类型，在存储时，变量中存储的是值本身，因此叫做值类型
  • 引用类型：复杂数据类型，在存储时，变量中存储的仅仅是地址(引用)，因此叫做引用数据类型

堆和栈

• 栈：由操作系统自动分配释放，存放在函数的参数值，局部变量的值等
• 堆：存储复杂类型（对象）一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收

简单数据类型在内存中的存储

变量中如果存储的是简单类型的数据，那么变量中存储的是值本身，如果将变量赋值给另一个变量，是将内部的值复制一份给了另一个变量，两个变量之间没有联系，一个变化，另一个不会同时变化

var a = 5;
var b = a;
a = 10;
console.log(a);
console.log(b);

复杂数据类型在内存中的存储

如果将复杂类型的数据赋值给一个变量，复杂类型的数据会在内存中创建一个原型，而变量中存储的是指向对象的一个地址，如果将变量赋值给另一个变量，相当于将地址复制一份给了新的便利，两个变量的地址相同，指向的是同一个原型，不论通过那个地址更改了原型，都是在原型上发生的更改，两个变量下次访问时，都会发生变化

var p1 = {
    name: "zs",
    age: 18
}
var p = p1; // p1将内部存储的指向对象原型的地址复制给了 P
// 两个变量之间是一个联动的关系，一个变化会引起另一个变化
p.name = "ls";
console.log(p);
console.log(p1);

数组和函数与对象是类似的

var arr = [1, 2, 3, 4];
var arr1 = arr;
arr[4] = 5;
console.log(arr);
console.log(arr1);