JavaScript学习笔记（九）：对象

1 对象长啥样？

var person = {
    name: "xiaowus",
    height: 178
}

其中， "person" 是对象名，对象的访问和修改都要用到对象名
"name" 和 "height" 是属性名，"xiaowus" 和 "178" 是属性值
属性值的数据类型可以为原始值，也可以为对象，还可以为方法（function）
属性值跟在属性名后边，用冒号分隔。属性名和属性值共同组成了一个属性
属性与属性之间用逗号分隔
用 " { } " 将属性包裹起来，形成一个完整的对象

2 属性的增删改查

查询属性的值，即访问：
通过对象名 + 点 "." + 属性名进行访问

console.log(person.name);   //输出"xiaowus"
console.log(person.height); //输出178
console.log(person,girlfriend);  //输出undefined

当访问一个不存在的属性时，不会报错，会返回undefined

修改属性的值：
直接用访问的方式，然后给它重新赋值即可

person.name = "javascript";
person.height = 185;
console.log(person.name);   //输出"javascript"
console.log(person.height); //输出185

增加属性：
直接用 "." ，后面接上新属性的名称，然后直接赋值即可

person.sex = "male";
person.job = "student"
console.log(person.sex);    //输出"male"
console.log(person.job);    //输出"student"

删除属性
使用系统关键字：delete，delete后面接对象和属性名

delete person.job;
console.log(person.job);    //输出undefined

3 对象的创建

有两种方法：

var obj = {} ，就是文章开头的那种方式
通过构造函数创建
- 系统自带的构造函数：Object()
- 自定义构造函数

系统自带的构造函数Object()：

var obj = new Object();
obj.name = 'abc';
obj.sex = 'male';

上面的代码等价于：

var obj = {
    name: 'abc',
    sex: 'male'
}

下面是自定义构造函数的示例：

function Phone(color) {
    this.color = color;
    this.name = "Xiaomi 9"
    this.price = 2400;
    this.boot = function() {
        console.log(this.name + "开机了");
    }
}

var phone = new Phone('white');
phone.boot();

上面代码的运行结果为："Xiaomi 9开机了"

在构造函数里面，可以通过 "this+属性名" 来直接定义属性
this指代的就是对象本身，如：

var obj = {
    a : function(){
        return this===obj;
    }
}
console.log( obj.a() ); //输出结果为true

创建对象的时候，只需在构造函数前面加个new，通过new来执行构造函数，执行完就会返回一个以构造函数为模板的对象

4 构造函数内部原理

内部执行有三个步骤：

在函数体最前面隐式地加上一个空对象：this = { }
执行 this.xxx = xxx; （这里就是自定义属性部分）
隐式地返回this对象

代码示例：

function Person(name, age, sex) {
    //隐式地生成一个空对象    
    //var this = { };

    //下面就是自定义部分，给this对象添加属性
    this.name = name;
    this.age = age;
    this.sex = sex;
    
    //最后隐式地返回this对象
    //return this;
}

var person = new Person('张三', 20, '男');

可以强制改变构造函数的返回值：

function Car(){
    this.name = "玛莎拉蒂";
    this.color = "black";
    
    var obj = {
        name: "五菱宏光",
        color: "white";
    }

    return obj;
}

var car = new Car();
console.log(car.name);  //输出：五菱宏光

当给构造函数加上一个返回值，且这个返回值是另一个对象时，使用该构造函数创建对象得到的是返回值里的对象
就如上面的代码一样，本来是要返回一个 '玛莎拉蒂' 的Car对象，结果返回了一个 '五菱宏光' 的Car对象

但如果给构造函数加上的返回值是一个原始值，则创建对象时会忽略这个返回值

function Car(){
    this.name = "玛莎拉蒂";
    this.color = "black";

    return 123; //这个返回值汇报系统忽略，相当于没执行
}

var car = new Car();
console.log(car.name);  //输出：玛莎拉蒂