Web开发技术梳理 0xC JavaScript（0x9）使用对象

    JavaScript 的设计是一个简单的基于对象的范式。一个对象就是一系列属性的集合，一个属性包含一个名和一个值。一个属性的值可以是函数，这种情况下属性也被称为方法。除了浏览器里面预定义的那些对象之外，也可以定义自己的对象。

对象概述

    javascript 中的对象(物体)，和其它编程语言中的对象一样，可以比照现实生活中的对象(物体)来理解它。 javascript 中对象(物体)的概念可以比照着现实生活中实实在在的物体来理解。
    在javascript中，一个对象可以是一个单独的拥有属性和类型的实体。我们拿它和一个杯子做下类比。一个杯子是一个对象(物体)，拥有属性。杯子有颜色，图案，重量，由什么材质构成等等。同样，javascript对象也有属性来定义它的特征。

对象和属性

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

var myCar = new Object();
myCar.make = "Ford";
myCar.model = "Mustang";
myCar.year = 1969;

myCar.noProperty; // undefined
//也可以通过方括号访问或者设置
myCar["make"] = "Ford";
myCar["model"] = "Mustang";
myCar["year"] = 1969;

枚举一个对象的所有属性

• for...in 循环——该方法依次访问一个对象及其原型链中所有可枚举的属性。
• Object.keys(o)——该方法返回一个对象 o 自身包含（不包括原型中）的所有属性的名称的数组。
• Object.getOwnPropertyNames(o)——该方法返回一个数组，它包含了对象 o 所有拥有的属性（无论是否可枚举）的名称。

创建新对象

    使用对象初始化器

var obj = { property_1:   value_1,   // property_# 可以是一个标识符...
            2:            value_2,   // 或一个数字...
           ["property" +3]: value_3,  //  或一个可计算的key名... 
            // ...,
            "property n": value_n }; // 或一个字符串

    这里 obj 是新对象的名称，每一个 property_i 是一个标识符（可以是一个名称、数字或字符串字面量），并且每个 value_i 是一个其值将被赋予 property_i 的表达式。obj 与赋值是可选的；如果不需要在其他地方引用对象，就不需要将它赋给一个变量。
    如果一个对象是通过在顶级脚本的对象初始化器创建的，则 JavaScript 在每次遇到包含该对象字面量的表达式时都会创建对象。同样的，在函数中的初始化器在每次函数调用时也会被创建。

    使用构造函数 

    作为另一种方式，可以通过两步来创建对象：

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

/*为了定义对象类型，为对象类型创建一个函数
以声明类型的名称、属性和方法。*/
function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}
//创建对象
var mycar = new Car("Eagle", "Talon TSi", 1993);


//一个对象的属性值可以是另一个对象
function Person(name, age, sex) {
  this.name = name;
  this.age = age;
  this.sex = sex;
}
var rand = new Person("Rand McKinnon", 33, "M");
var ken = new Person("Ken Jones", 39, "M");

var car1 = new Car("Eagle", "Talon TSi", 1993, rand);
var car2 = new Car("Nissan", "300ZX", 1992, ken);

     使用Object.create()

// Animal properties and method encapsulation
var Animal = {
  type: "Invertebrates", // Default value of properties
  displayType : function() {  // Method which will display type of Animal
    console.log(this.type);
  }
}

// Create new animal type called animal1 
var animal1 = Object.create(Animal);
animal1.displayType(); // Output:Invertebrates

// Create new animal type called Fishes
var fish = Object.create(Animal);
fish.type = "Fishes";
fish.displayType(); // Output:Fishes

    继承

    所有的 JavaScript 对象继承于至少一个对象。被继承的对象被称作原型，并且继承的属性可通过构造函数的 prototype 对象找到。

     对象属性索引

    在 JavaScript 1.0 中，可以通过名称或序号访问一个属性。但是在 JavaScript 1.1 及之后版本中，如果最初使用名称定义了一个属性，则必须通过名称来访问它；而如果最初使用序号来定义一个属性，则必须通过索引来访问它。

为对象类型定义属性

     可以通过 prototype 属性为之前定义的对象类型增加属性。这为该类型的所有对象，而不是仅仅一个对象增加了一个属性。

/*为所有类型为 car 的对象增加了 color 属性，然后为对象 
car1 的 color 属性赋值
*/
Car.prototype.color = null;
car1.color = "black";

     定义方法

    一个方法 是关联到某个对象的函数，或者简单地说，一个方法是一个值为某个函数的对象属性。定义方法就像定义普通的函数，除了它们必须被赋给对象的某个属性。

objectName.methodname = function_name;

var myObj = {
  myMethod: function(params) {
    // ...do something
  }
  
  // 或者 这样写也可以
  
  myOtherMethod(params) {
    // ...do something else
  }
};

     通过this引用对象

    JavaScript 有一个特殊的关键字 this，它可以在方法中使用以指代当前对象。

function validate(obj, lowval, hival) {
  if ((obj.value < lowval) || (obj.value > hival)) {
    alert("Invalid Value!");
  }
}

    可以在每个元素的 onchange 事件处理器中调用 validate，并通过 this 传入相应元素，代码如下：

<input type="text" name="age" size="3"
  onChange="validate(this, 18, 99)">

    定义getters和setters

    一个 getter 是一个获取某个特定属性的值的方法。一个  setter 是一个设定某个属性的值的方法。可以为预定义的或用户定义的对象定义 getter 和 setter 以支持新增的属性。定义 getter 和 setter 的语法采用对象字面量语法。

var o = {
  a: 7,
  get b() { 
    return this.a + 1;
  },
  set c(x) {
    this.a = x / 2
  }
};

console.log(o.a); // 7
console.log(o.b); // 8
o.c = 50;
console.log(o.a); // 25

    下面这个例子展示使用getter和setter方法扩展 Date原型，为预定义好的Date类添加一个year的属性。定义属性year的getter和setter方法用到了Date类中已存在的getFullYear和setFullYear方法。

//定义属性year的getter和setter：
var d = Date.prototype;
Object.defineProperty(d, "year", {
  get: function() { return this.getFullYear() },
  set: function(y) { this.setFullYear(y) }
});
//通过一个Date对象使用getter和setter:
var now = new Date();
console.log(now.year); // 2000
now.year = 2001; // 987617605170
console.log(now);
// Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001

    删除属性

    可以用 delete 操作符删除一个不是继承而来的属性。

//Creates a new object, myobj, with two properties, a and b.
var myobj = new Object;
myobj.a = 5;
myobj.b = 12;

//Removes the a property, leaving myobj with only the b property.
delete myobj.a;

    如果一个全局变量不是用 var 关键字声明的话，也可以用 delete 删除它：

g = 17;
delete g;

    比较对象

// 两个变量, 两个具有同样的属性、但不相同的对象
var fruit = {name: "apple"};
var fruitbear = {name: "apple"};

fruit == fruitbear // return false
fruit === fruitbear // return false

    在 JavaScript 中 objects 是一种引用类型。两个独立声明的对象永远也不会相等，即使他们有相同的属性，只有在比较一个对象和这个对象的引用时，才会返回true.

// 两个变量, 同一个对象
var fruit = {name: "apple"};
var fruitbear = fruit;  // 将fruit的对象引用(reference)赋值给 fruitbear
                        // 也称为将fruitbear“指向”fruit对象
// fruit与fruitbear都指向同样的对象
fruit == fruitbear // return true
fruit === fruitbear // return true