JavaScript对象详解（六）

JavaScript对象是存储 键值对 的集合，表示属性和值的映射关系，这与Java中的HashMap很相似。JavaScript中所有对象都是由 Object 类派生的。

1、对象的使用

1.1、使用对象字面量法

// 一、通过对象字面量法来创建对象，键为字符串(如果不是字符串，底层也会自动转成字符串)，
// 值可以为任何数据类型，未赋值的属性的值为undefined
let obj2 = {
   };  
let obj3 = {
   
    name: "Carrot",
    _for: "Max",//'for' 是保留字之一，使用'_for'代替
    details: {
   
        color: "orange",
        size: 12
    }
}
// 3、可以使用链式访问方式来访问属性
obj3.details.color; // orange
obj3["details"]["size"]; // 12
// 4、对象的销毁，给对象赋值null即可
obj3 = null;
// 5、动态添加属性和方法
//添加属性：
let obj4 = {
   };
obj4.name = "李太白";
obj4.age = 18;
//添加方法：
obj4.sex = function(){
   
	//方法代码
};
//访问方法：
obj4.sex; //或 obj4.sex();
/* 注意：
1. 属性名及方法名如果与对象原有的属性或方法同名，会重写属性的内容和方法的功能！
2. 方法是作为属性来存储的函数。
3. 不要把字符串、数值和布尔值声明为对象！（会增加代码的复杂性并降低执行速度）
*/
// 6、删除属性和方法，还能删除不是用var修饰的变量！
delete obj4.name;
delete obj4.sex;
let nb = 3;
delete nb;
// 7、遍历对象的属性
for(let key in 对象名){
   
	//使用：对象名[key]来获得对象中相应属性的值;
}

1.2、使用构造函数

// 二、通过构造函数来创建对象
function Person(name, age) {
    // 这是构造函数(也称为对象原型)， You是对象实例
  // 使用 this 将传入函数的值赋给对象的属性
  this.name = name;
  this.age = age;
}
// new一个person对象，用You接收
let You = new Person('You', 24);
// 点表示法操作属性
You.name = 'Simon';
let name = You.name;
// 括号表示法操作属性
You['name'] = 'Simon';
let name = You['name'];
// 括号表示法可以被用来访问以预留关键字作为名称的属性的值，但是不会被编辑器优化
obj.for = 'Simon'; // 语法错误，因为 for 是一个预留关键字
obj["for"] = 'Simon'; // 工作正常
// 可以使用变量定义键
let user = prompt('what is your key?');
obj[user] = prompt('what is its value?');

1.3、使用 Object.create()

// 封装动物的属性和方法
var Animal = {
   
  type: "Invertebrates", // 属性默认值
  displayType : function() {
     // 用于显示 type 属性的方法
    console.log(this.type);
  },
  myOtherMethod(params) {
    // 方法也能这样写
    // ...做其他事情
  }
}

// 创建一种新的动物——animal1
var animal1 = Object.create(Animal);
animal1.displayType(); // Output:Invertebrates

// 创建一种新的动物——Fishes
var fish = Object.create(Animal);
fish.type = "Fishes";
fish.displayType(); // Output:Fishes

2、继承与原型链

所有的 JavaScript 对象至少继承于一个对象，被继承的对象称作原型，并且继承的属性可通过 prototype 对象找到。
 
JavaScript 中每个实例对象（object）都有一个私有属性（称之为 __proto__）指向它的构造函数的原型对象（prototype）。该原型对象也有一个自己的原型对象（__proto__），层层向上直到一个对象的原型对象为 null。根据定义，null 没有原型，并作为这个 原型链 中的最后一个环节。
 
几乎所有 JavaScript 中的对象都是位于原型链顶端的 Object 的实例。

2.1、基于原型链的继承

2.1.1、继承属性

// 让我们从一个函数里创建一个对象 o，它自身拥有属性 a 和 b：
let f = function () {
   
   this.a = 1;
   this.b = 2;
}
/* 这么写也一样
function f() {
  this.a = 1;
  this.b = 2;
}
*/
let o = new f(); // {a: 1, b: 2}

// 在 f 函数的原型上定义属性
f.prototype.b = 3;
f.prototype.c = 4;

// 不要在 f 函数的原型上直接定义 f.prototype = {b:3,c:4};这样会直接打破原型链
// o.[[Prototype]] 有属性 b 和 c (其实就是 o.__proto__ 或者 o.constructor.prototype)
// o.[[Prototype]].[[Prototype]] 是 Object.prototype.
// 最后 o.[[Prototype]].[[Prototype]].[[Prototype]] 是 null
// 这就是原型链的末尾，即 null，根据定义，null 就是没有 [[Prototype]]。

// 综上所述，整个原型链如下：
// {a:1, b:2} ---> {b:3, c:4} ---> Object.prototype---> null

console.log(o.a); // 1
// a 是 o 的自身属性吗？是的，该属性的值为 1

console.log(o.b); // 2
// b 是 o 的自身属性吗？是的，该属性的值为 2
// 原型上也有一个'b'属性，但是它不会被访问到。
// 这种情况被称为"属性遮蔽 (property shadowing)"

console.log(o.c); // 4
// c 是 o 的自身属性吗？不是，那看看它的原型上有没有
// c 是 o.[[Prototype]] 的属性吗？是的，该属性的值为 4

console.<