JavaScript - 对象

对象和属性

var myCar = new Object();
myCar.make = 'Ford';
myCar.model = 'Mustang';
myCar.year = 1969;
// 另一种对象属性访问方式，方括号表示法
myCar['make'] = 'Ford';
myCar['model'] = 'Mustang';
myCar['year'] = 1969;

对象中未指派的属性，其值为：undefined，而不是：null。

myCar.color; // undefined

另类的对象属性名称：

// four variables are created and assigned in a single go, 
// separated by commas
var myObj = new Object(),
    str = 'myString',
    rand = Math.random(),
    obj = new Object();

myObj.type              = 'Dot syntax';
myObj['date created']   = 'String with space';
myObj[str]              = 'String value';
myObj[rand]             = 'Random Number';
myObj[obj]              = 'Object';
myObj['']               = 'Even an empty string';

console.log(myObj);

还可以通过存储在变量中的字符串来访问属性(方括号表示法)：

let myCar = new Object();
myCar.make = 'Ford';
myCar.model = 'Mustang';
myCar.year = 1969;
//
let propertyName = "make"
console.log(myCar[propertyName]); // Ford
propertyName = "model";
console.log(myCar[propertyName]); // Mustang

function showProps(obj, objName) {
    let result = '';
    for (let i in obj) {
        // obj.hasOwnProperty() 用來從對象的原型鏈中過濾出屬性
        if (obj.hasOwnProperty(i)) {
            result += objName + '.' + i + ' = ' + obj[i] + '\n';
        }
    }
    return result;
}
showProps(myCar, "myCar");
// myCar.make = Ford
// myCar.model = Mustang
// myCar.year = 1969

---

遍历对象的属性

ECMAScript 5之后，有三种方式遍历对象的属性：

• for...in 此方法会遍历对象和其原型链中所有可枚举属性。
• Object.keys(o) 此方法会返回一个数组，其中包含对象o的所有自身(不在原型链中)的可枚举属性的名称("keys")。
• Object.getOwnPropterNames(o) 此方法会返回一个数组，其中包含对象o的所有自身的属性(可枚举属性和不可枚举属性)名称。

---

创建新对象

使用对象初始化程序

var obj = { property_1:   value_1,   // property_# may be an identifier...
            2:            value_2,   // or a number...
            // ...,
            'property n': value_n }; // or a string

对象初始化程序，出现之后，表示已经创建对象了。

var myHonda = {color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}};
// 语句执行完成，已经创建对象，无需使用 new 关键字创建对象

使用构造器函数

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);
var kenscar = new Car('Nissan', '300ZX', 1992);
var vpgscar = new Car('Mazda', 'Miata', 1990);

// 对象的属性中，可以放入其他对象
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');
function Car(make, model, year, owner) {
  this.make = make;
  this.model = model;
  this.year = year;
  this.owner = owner;
}
var car1 = new Car('Eagle', 'Talon TSi', 1993, rand);
var car2 = new Car('Nissan', '300ZX', 1992, ken);

可以向之前定义的对象中加入属性

car1.color = 'black';

使用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中的对象都至少继承于另一个对象。被继承的对象称作原型蓝本，继承的属性可以在原型对象的构造器中对应到。更多信息参考：Inheritance and the prototype chain

---

索引对象属性

可以通过属性名称，或其序数索引，引用对象的属性。若最初是通过名称定义属性，那么必须一直通过名称来访问属性；若最初是通过索引定义属性，那么必须一直通过索引访问属性。这种机制的例外情况是：反射自HTML的类似数组的对象。document.forms[1]    document.forms["myForm"]    document.forms.myForm。

---

为对象类型定义属性

使用对象的prototype属性，向对象的原始定义中加入新的属性。此种方式加入的属性，在所有该对象类型的实例中都会出现。区别于对象实例单独加入的属性。

Car.prototype.color = null;
car1.color = 'black';

---

定义方法

objectName.methodname = functionName;

var myObj = {
  myMethod: function(params) {
    // ...do something
  }

  // OR THIS WORKS TOO

  myOtherMethod(params) {
    // ...do something else
  }
};
object.methodname(params); // 呼叫方法

function displayCar() {
  var result = 'A Beautiful ' + this.year + ' ' + this.make
    + ' ' + this.model;
  pretty_print(result);
}
function Car(make, model, year, owner) {
  this.make = make;
  this.model = model;
  this.year = year;
  this.owner = owner;
  this.displayCar = displayCar; // 上方定义的 function
}
/*
car1.displayCar();
car2.displayCar();
*/

---

使用this

this关键字，使用在方法中，指代当前对象。

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

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

---

定义 getters 和 setters

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

var d = Date.prototype;
Object.defineProperty(d, 'year', {
  get: function() { return this.getFullYear(); },
  set: function(y) { this.setFullYear(y); }
});
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

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

var o = { a: 0 };

Object.defineProperties(o, {
    'b': { get: function() { return this.a + 1; } },
    'c': { set: function(x) { this.a = x / 2; } }
});

o.c = 10; // Runs the setter, which assigns 10 / 2 (5) to the 'a' property
console.log(o.b); // Runs the getter, which yields a + 1 or 6

---

删除属性

使用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;
console.log ('a' in myobj); // yields "false"

可以使用delete操作符，删除没有使用var关键字声明的全局变量

g = 17;
delete g;

---

比较对象

JavaScript中，对象为引用类型；两个完全分离的对象，永远不会相等，即使它们拥有相同的属性。

// Two variables, two distinct objects with the same properties
var fruit = {name: 'apple'};
var fruitbear = {name: 'apple'};

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

// ***
// Two variables, a single object
var fruit = {name: 'apple'};
var fruitbear = fruit;  // assign fruit object reference to fruitbear

// here fruit and fruitbear are pointing to same object
fruit == fruitbear; // return true
fruit === fruitbear; // return true

// ***
fruit.name = 'grape';
console.log(fruitbear);    // yields { name: "grape" } instead of { name: "apple" }