11.JavaScript学习笔记——对象

对象

1. 对象的定义

ECMA-262将对象定义为一组属性的无序集合。

对象就是一组没有特定顺序的值，对象的每个属性或方法都由一个名称来标识，这个名称映射到一个值。

一个对象有多个属性，一条属性包括key（属性名）和value（属性值），两者用":“连接，两条属性用”,“隔开，注意不是”;"。

var mrDeng = {
    name : "MrDeng",
    age : 40,
    sex : "male",
    health : 100,
    smoke : function () {
        console.log("I am smoking ! cool!!");
        this.health --;
    },
    drink : function () {
        console.log("I am drinking.");
        this.health ++;
    }
};

在对象中，函数可以称为方法。

在对象内，this可以理解为对象的第一人称，this.health相当于mrDeng.health。

在对象中，当访问对象没有的属性时，不会报错，而会返回undefined。

2. 属性的增、删、改、查

• 增

属性的增加，在对象定义后，对象名.新增属性名 = "";

例如上例，添加代码mrDeng.wife = "xiaoliu";，则mrDeng对象就会新增一个wife属性。

• 删

借助delete操作符

delete 对象名.已有属性名;

• 改

对象名.已有属性名 = 新值;

• 查

对象名.已有属性名;

3. 对象的创建方法

1.var obj = {};plainObject（对象字面量/对象直接量）

2.构造函数

• 系统自带的构建函数 new Object()

var obj = new Object();
obj.name = "abc";
obj.sex = "female";  //javascript中，单引号双引号是一样的，但是为了与PHP联用，最好使用单引号

• 自定义的构造函数

自定义的构造函数，与函数定义写法上没有区别，因此为了便于区分，自定义的构造函数的函数名采用大驼峰式命名规则。这条要求是便于区分，人为设定的，与语法无关。

function MyCar (color) {
    this.color = color;
    this.name = 'BMW';
    this.height = '1400';
    this.lang = '4900';
    this.weight = 1000;
    this.health = 100;
    this.run = function () {
        this.health --;
    }
}

var car = new MyCar('red');
var car1 = new MyCar('blue');

4. 构造函数内部原理

1. 在函数体最前面隐式的加上var this = {}；
2. 执行this.xxx = xxx;；
3. 隐式的返回this.

function Student(name, age, sex) {
    //1.
    //var this = {};
    //2.
    //执行下列语句
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.grade = 2017;
    //3.
    //return this;
}

var student = new Student('zhangsan', 18, 'male');

注意必须有new，不然Student()只是一个函数，而不是构造函数。

根据内部原理，可以设计一个函数来模拟构造函数。

function Person(name, height) {
    var that = {};
    that.name = name;
    that.height = height;
    return that;
}

var person = Person();

此时，Person()是一个函数，而不是构造函数，所以不用加上new。

在构造函数中，可以显式的返回一个对象，但是不会返回原始值。

function Student(name, age, sex) {
    //1.
    //var this = {};
    //2.
    //执行下列语句
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.grade = 2017;
    //3.
    //return this;
    return {};
}

var student = new Student('zhangsan', 18, 'male');

上例返回空对象。

function Student(name, age, sex) {
    //1.
    //var this = {};
    //2.
    //执行下列语句
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.grade = 2017;
    //3.
    //return this;
    return 123;
}

var student = new Student('zhangsan', 18, 'male');

上例仍然返回this，且不会报错。

5. 属性的表示方法

除了上面说的obj.prop，还有obj["prop"]的写法。

在使用obj.prop时系统会隐式的将此转换为obj["prop"].

第二种写法在使用上会更加灵活，可以利用字符串的拼接实现一些特别的功能。

例如：

var deng = {
    wife1 : 'xiaoliu',
    wife2 : 'xiaozhang',
    wife3 : 'xiaomeng',
    wife4 : 'xiaowang',
    sayWife : function (num) {
        return this.["wife" + num];
    }
}
console.log(deng.sayWife(3));   //xiaomeng