JavaScript学习之使用对象

什么是对象

对象是单个实物的抽象，是一个单独的拥有属性和类型的实体。比如，一个杯子是一个对象(物体)，拥有属性，杯子有颜色，图案，重量，由什么材质构成等等。

对象封装了属性（property）和方法（method）。

对象和属性

一个对象有很多属性，一个对象的属性可以被解释成一个附加到对象上的变量。对象的属性和普通的 变量基本没什么区别，仅仅是属性属于某个对象。属性定义了对象的特征。

可以通过点符号来访问一个对象的属性，也可以通过方括号[]访问。

let person = {
  na: "Mike",
  age: 18,
  sex: "man"
};
console.log(person.na);   //Mike
console.log(person["age"]);   //18

创建对象

• 对象字面量方式创建对象(对象初始化器)

var personObj = {
  personName : "小红",
  age : 20,
  sex : "W"
};

创建一个对象为personObj，这个对象拥有personName,age,sex三个属性。属性可以是一个标识符，一个数字，一个字符串。

• 使用构造函数创建对象

可以通过两步来创建对象：

　　1、通过创建一个构造函数来定义对象的类型。首字母大写是非常普遍而且很恰当的惯用法。

　　2、通过 new 创建对象实例。

function Person(name,age,sex){
  this.name = name;
  this.age = age;
  this.sex = sex;
}
var person1 = new Person("小米",20,"男");
var person2 = new Person("小青",18,"女");

console.log(person1.name + ":" + person1.age + ":" + person1.sex);  //小米:20:男
console.log(person2.name + ":" + person2.age + ":" + person2.sex);  //小青:18:女

function Fragrance(make,smell,owner){
  this.make = make;
  this.smell = smell;
  this.owner = owner;
}
var fragrance1 = new Fragrance("Dior","sweet",person1); 
var fragrance2 = new Fragrance("Channel","fresh ",person2); 

console.log(fragrance1.make + ":" + fragrance1.smell + ":" + fragrance1.owner.name);  //Dior:sweet:小米
console.log(fragrance2.make + ":" + fragrance2.smell + ":" + fragrance2.owner.name);  //Channel:fresh :小青

使用new命令时，它后面的函数依次执行下面的步骤。

　　1、创建一个空对象，作为将要返回的对象实例。

　　2、将这个空对象的原型，指向构造函数的prototype属性。

　　3、将这个空对象赋值给函数内部的this关键字。

　　4、开始执行构造函数内部的代码。

也就是说，构造函数内部，this指的是一个新生成的空对象，所有针对this的操作，都会发生在这个空对象上。构造函数之所以叫“构造函数”，就是说这个函数的目的，就是操作一个空对象（即this对象），将其“构造”为需要的样子。

如果构造函数内部有return语句，而且return后面跟着一个对象，new命令会返回return语句指定的对象；否则，就会不管return语句，返回this对象。

function PersonDemo(name){
  this.name = name;
  return {
    age:18,
    sex:"女"
  };
}

var pd1 = new PersonDemo("花花");
console.log(pd1.name);  //undefined
console.log(pd1); // return 对象

• 使用 Object.create() 方法创建对象

var Animal = {
  type : "cat",
  disPlayType : function(){
    console.log("type=======" + this.type);
  }
};

var animal = Object.create(Animal);
animal.disPlayType(); //type=======cat

animal.type = "dog";  //创建新的动物
animal.disPlayType(); //type=======dog

遍历对象的三种方式

• 使用for...in循环

var personObj2 = {
  personName : "小红",
  age : 20,
  sex : "W"
};
//使用for...in
for (let key in personObj2) {
  console.log(key);   //输出的key是属性
}

• 使用Object.keys(),Object.values()

var personObj2 = {
  personName : "小红",
  age : 20,
  sex : "W"
};

//使用Object.keys(),Object.values()
console.log(Object.keys(personObj2))  // [ 'personName', 'age', 'sex' ]

Object.keys(personObj2).forEach(function(key){
  console.log(key + ":" + personObj2[key]);
})

　console.log(Object.values(personObj2))  // [ '小红', 20, 'W' ]

• 使用Object.getOwnPropertyNames()

var personObj2 = {
  personName : "小红",
  age : 20,
  sex : "W"
};

//使用Object.getOwnPropertyNames()
console.log(Object.getOwnPropertyNames(personObj2)); //[ 'personName', 'age', 'sex' ]

Object.getOwnPropertyNames(personObj2).forEach(function(key){
  console.log(key + ":" + personObj2[key]);
})