javascript（JS） 0基础快速入门 （三）（JS对象）

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

Object 对象

• 对象的分类

  • 1、 内建对象

    • 由ES 标准定义的对象，在任何的ES的实现中都可以使用
    • 比如：Math String Number Boolean Function Object ···

  • 2、宿主对象

    • 由JS运行环境提供的对象，目前来讲主要由浏览器提供的对象

    • 比如 BOM DOM

  • 3、自定义对象

    • 由开发人员自己创建的对象

对象的创建

• 使用new关键字调用的函数，是构造函数constructor
• 构造函数时专门用来创建对象的
• 使用typeof 检查一个对象时，会返回object
• var obj = Object（）；
• 像obj添加属性：obj. name = "XXX"
• 读取对象中的属性： obj.name

对象的属性

• 对象的属性名不强制要求遵守标识符的规范
• 如果要使用特殊的属性名，用【】来命名
• obj["123"] = xxx; 读取 ： obj["123"];

js中的属性可以是任何值

• 设置obj2 为obj 的属性
• obj.test = obj2; obj2.name="xxx"; obj.test.name; 会出现xxx。

in 运算符会检查一个对象中是否含有指定的属性，有true，否false

对象中的数据保存的是在内存地址

Object.defineProperty( )

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

Object.defineProperty(obj, prop, descriptor)

• 参数 ：

  • obj ： 要定义属性的对象
  • prop ：要定义或修改的属性的名称或 Symbol
  • descriptor 要定义或修改的属性描述符

• 返回值：被传递给函数的对象

Object.defineProperty(object1, 'property1', {
  value: 42
});
console.log(object1.property1); // expected output: 42

对象中的存在的描述符有两种主要形式： 数据描述符 和 存取描述符 。

数据描述符是 一个具有值的属性，该值是可写的也可以是不可写的

存取描述符是由 getter 函数和 setter 函数所描述的属性。一个描述符只能是这两者其中之一；不能同时是两者

描述符：

描述符	configurable	enumerable	value	writable	get	set
默认值	false	false	undefined	false	undefined	undefined
作用	当且仅当该属性的 configurable 键值为 true 时，该属性的描述符才能够被改变，同时该属性也能从对应的对象上被删除。	当且仅当该属性的 enumerable 键值为 true 时，该属性才会出现在对象的枚举属性中。	该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）	当且仅当该属性的 writable 键值为 true 时，属性的值，也就是上面的 value，才能被赋值运算符改变。	属性的 getter 函数，如果没有 getter，则为 undefined。当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入 this 对象（由于继承关系，这里的this并不一定是定义该属性的对象）。该函数的返回值会被用作属性的值。	属性的 setter 函数，如果没有 setter，则为 undefined。当属性值被修改时，会调用此函数。该方法接受一个参数（也就是被赋予的新值），会传入赋值时的 this 对象。

如果一个描述符不具有 value、writable、get 和 set 中的任意一个键，那么它将被认为是一个数据描述符。如果一个描述符同时拥有 value 或 writable 和 get 或 set 键，则会产生一个异常。

描述符可拥有的键值

	configurable	enumerable	value	writable	get	set
数据描述符	可以	可以	可以	可以	不可以	不可以
存取描述符	可以	可以	不可以	不可以	可以	可以

添加多个属性和默认值

考虑特性被赋予的默认特性值非常重要，通常，使用点运算符和 Object.defineProperty() 为对象的属性赋值时，数据描述符中的属性默认值是不同的，如下例所示。

var o = {};

o.a = 1;
// 等同于：
Object.defineProperty(o, "a", {
  value: 1,
  writable: true,
  configurable: true,
  enumerable: true
});


// 另一方面，
Object.defineProperty(o, "a", { value : 1 });
// 等同于：
Object.defineProperty(o, "a", {
  value: 1,
  writable: false,
  configurable: false,
  enumerable: false
});

自定义 Setters 和 Getters

下面的例子展示了如何实现一个自存档对象。当设置temperature 属性时，archive 数组会收到日志条目。

function Archiver() {
  var temperature = null;
  var archive = [];

  Object.defineProperty(this, 'temperature', {
      // this 给构造函数上的temperature 属性添加get 和set 方法
    get: function() {
      console.log('get!');
      return temperature;
    },
    set: function(value) {
      temperature = value;
      archive.push({ val: temperature });
    }
  });

  this.getArchive = function() { return archive; };
}

var arc = new Archiver();
arc.temperature; // 'get!'
arc.temperature = 11;
arc.temperature = 13;
arc.getArchive(); // [{ val: 11 }, { val: 13 }]

继承属性

如果访问者的属性是被继承的，它的 get 和 set 方法会在子对象的属性被访问或者修改时被调用。如果这些方法用一个变量存值，该值会被所有对象共享。

function myclass() {
}

var value;
// 往 mycalss原型上添加一个x属性
Object.defineProperty(myclass.prototype, "x", {
  get() {
    return value;
  },
  set(x) {
    value = x;
  }
});

var a = new myclass();
var b = new myclass();
//  a 与 b 都共享myclass 上的x属性
a.x = 1;
console.log(b.x); // 1

这可以通过将值存储在另一个属性中解决。

在 get 和 set 方法中，this 指向某个被访问和修改属性的对象。

function myclass() {
}

Object.defineProperty(myclass.prototype, "x", {
  //  通过 this 改变属性存储的位置 谁调用this 就是谁
  get() {
    return this.stored_x;
  },
  set(x) {
    this.stored_x = x;
  }
});

var a = new myclass();
var b = new myclass();
// 调用原型上的x的set方法往自身实例对象添加一个属性 stored_x = 1
a.x = 1;
// 调用原型上的x的get方法往自身实例对象查找一个属性 return stored_x 
console.log(b.x); // undefined
console.log(a.x); // 1

不像访问者属性，值属性始终在对象自身上设置，而不是一个原型。然而，如果一个不可写的属性被继承，它仍然可以防止修改对象的属性。

function myclass() {
}

myclass.prototype.x = 1;
Object.defineProperty(myclass.prototype, "y", {
  writable: false,
  value: 1
});

var a = new myclass();
//  往自身实例上添加一个x属性为2
a.x = 2;
console.log(a.x); // 2
console.log(myclass.prototype.x); // 1
a.y = 2; // Ignored, throws in strict mode
// 去原型上找，自身没有
console.log(a.y); // 1
console.log(myclass.prototype.y); // 1

---

对象字面量 var obj ={};

• 使用字面量，可以在创建对象时，直接指定对象中的属性
• var obj = {name:"猪八戒"，age："28"，test：{name:"沙和尚"}}；

列举对象中的属性

for (var n in obj){

​ console.log(n);

​ console.log(obj [n] );

可以用中括号来使用变量

对象中有几个属性，循环就会执行几次

使用工厂方法创建对象

• 当要创建都多个同样的代码时，可以构造函数来创建

  function creatPerson(name,gender,age){
  
      //创建一个对象
  
      //用来存贮这些属性值
  
      var obj = new Object();
  
     obj.name = name;
  
       obj.gender  = gender;
  
       obj.age = age;
  
       obj.sayName = function(){
         console.log(this.name);
  
      };
  
        return obj;
  
    }
  
     var obj2 = creatPerson("孙悟空","男",29);
  
     var obj3 = creatPerson("猪八戒","男",20);
  
     var obj4 = creatPerson("沙和尚","男",27);
  
    console.log(obj2);
  
    obj2.sayName();
  
    obj3.sayName();
  
     obj4.sayName();
  

原型对象

函数以构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性，

• 指向该构造函数的原型对象，我们可以通过__proto__来访问该属性

原型对象相当于一个公共区域，所有同一个类的实例都可以访问这个原型对象

function MyClass (){

}

Myclass.prototype.a = 123;

Myclass.prototype.sayName = function(){alert("sda")};

var mc  = new MyClass();

var mc1 = new MyClass();

mc.prototype.a == mc1.prototype.a;  mc