JavaScript对象

什么是对象

• 对象是一种复合值，它汇聚多个值（原始值或者是其它对象），并且允许我们按照
  名称存储和获取这些值。

• 对象是一个属性无序的集合，每个属性都有自己的名字和值，只有在对象中，其使
  用起来与顺序无关，只需要打点即可调用。

• 在JavaScript中对象可以从其它对象继承属性

• JavaScript对象是动态的，即可以动态的添加和删除对象属性

  ​

认识对象

• 创建自定义对象我们可以通过创建Object实例来实现，然后再给他添加属性和方法
  （函数）

  <script>
      let person = new Object();
      person.name = "zhangsan";
      person.age = 18;
      person.job = "Teacher"; 
      console.log(this.name+"，年龄"+this.age+"岁，他的工作是："+this.job);
      person.work = function(){
      }
  </script>

  <script>
     let person = {
      name = "zhangsan",
      age = 18,
      job = "Teacher",
      console.log(this.name+"，年龄"+this.age+"岁，他的工作
  是："+this.job);
      work(){
   }
  }
  </script>

属性的类型

• JavaScript使用了一些内部特性来描述属性的特征，这些特性由JavaScript实现引
  擎的规范定义的，所以开发者不能直接在JavaScript中访问这些访问。

属性的特性分两种

**数据属性**

• 【Configurable】：表示属性是否可以通过delete删除并重新定义，

  是否可以修改它的特性，以及是否可以把它改为访问器属性。其默认情况下为true

• 【Enumerable】：表示属性是否可以通过for-in循环返回，默认情况

  也为true

• 【Writable】：表示属性的值是否可以被修改，其默认值为true

• 【Value】：包含属性的实际值，其默认值为undefined

• 这些属性特性我们在定义对象时并不需要显式的添加前三个，而Value特性
  也会被我们定义，如：name:”zhangsan

• 如果想要修改这些默认特性，就必须使用Object.defineProperty()方
  法，这个方法在使用时接收三个参数：要给其添加属性的对象，属性的名
  称，以及一个描述特性的对象及其参数

• 示例

  <script>
      let person = {};
      Object.defineProperty(person,"name",{
      writable:false,
      value:"王麻子"
      });
      console.log(person.name);
      person.name = "张金条";
      console.log(person.name);
  </script>

  <script>
      let person = {};
      let person = {};
      Object.defineProperty(person,"name",{
      // configurable:true,
      configurable:false,
      value:"王麻子"
      });
      console.log(person.name);
      delete person.name;
      console.log(person.name);
  </script>

访问器属性

• 访问器属性不包含数据值，它包含一个获取（getter）函数以及一个设置
  （setter）函数，不过这两个函数并非必须函数。

• 在读取访问器属性时，程序会自个调用获取函数，也就是说获取函数的主
  要任务就是返回一个有效的值

• 访问器属性也有4个特性用了描述它们的行为

  【Configurable】，默认值为true，表示能否通过delete删除属性从而
  重新定义属性，能否修改属性的特性，能否把属性修改为访问器属性
  【Enumerable】，默认值为true，能否通过for-in循环返回属性
  【get】读取这个属性时调用的函数 getter函数
  【set】在为这个属性赋值时调用的函数 setter函数

• 以上这些属性也是不能直接定义的，必须通过Object-defineProperty()

• 示例

<script>
     let book = {
       name:"七侠五义",
       price:1
     };
  
     book.name = "斗破苍穹";
     console.log(book.name);
     Object.defineProperty(book,"name",{
     get(){
      return this.name;
     },
     set(newValue){
      this.name = newValue;
     }
     });
 </script>

对象合并

• 在开发JavaScript时我们会把多个对象合并使用

• 具体来说就是把一个对象的所有属性复制到了目标对象上，这种方式也被称之为混
  入，通过对象的合并我们可以增强对象功能

• JavaScript专门为合并对象提供了一个Object.assign()方法，这个方法接收一个目
  标对象和一个或多个其它对象（源对象），然后将每个源对象中自有属性复制到目
  标对象

• 示例

  <script>
      //目标对象
      Obj1 = {name:"老八"};
      //源对象
      Obj2 = {name:"老八"};
      //把2复制到目标对象中
      result = Object.assign(Obj1,Obj2);
      console.log(Obj1 === result)
      console.log(Obj2 === result)
      console.log(result)
     
      console.log(result)
  </script>

增强的对象语法

• ES6位对象定义了很多定义对象及其操作对象的语法特性，这些特性可以极大程度
  提高对象处理的方便程度

• 属性值得简写

  在给对象添加值时我们可以引用变量

  <script>
   let username= "sanlvzi";
   let person = {
   username:username
   };
   console.log(person)
   </script>

  还能简写（以下这种情况必须时变量名域对象的属性名相同才可以这么写）

<script>
   let username= "sanlvzi";
   username
   };
   let person = {
   console.log(person)
</script>

对象解构

基本使用

• 对象解构是从对象中检索属性键的值。

  name:"张麻子",
  age:18
  let user = {
  }

• 传统取值来说，我们可以使用打点表示法或者是下标法来从对象中检索值

  let username = user.name;
  let age = user['age']

• 以上这种方法是没有任何问题的，但是就当属性较多时，我们的代码中会产生
  较多的重复代码，然后ES6就搞出来了一个技术叫做对象解构

• 对象解构也叫解构赋值，可以快速的获取值

  let {name,age} = user;
  console.log(name)

使用解构从嵌套的对象中获取值

• 嵌套即一个对象中还有对象

  let Person = {
     name:"Marry",
     age:27,
     friend:{
     friend_1_Phone:110,
     address:"文景路凤城四路..."
     }
   }

• 使用传统方式获取朋友对象的值

  let p1 = Person.friend.friend_1_Phone;

• 换成解构赋值，如下：

  let Person = {
     Pname:"Marry",
     }
     let User = {
     Uname:"Jack",
     Uage:''
     }
     //在解构时可以加上其它属性值
     let {Pname,Page = 18} = Person;
     let {Uname,Uage = 18} = User;
     console.log(Pname)
   }

还可以给JavaScript解构对象创建别名

let User = {
 name:"Jack",
 age:18
 }
 
 let{age:userAge} =User;
 console.log(userAge) 

还可以使用对象解构处理动态名称属性

• 我们在开发时经常会将API的一些响应数据作为Javascript对象处理，这些对象

  可能包含一些动态数据，我们在客户端使用这些数据时可能连属性键时啥都不
  知道

• 我们可以将键当成时参数据传递，也就是说我们可以编写一个返回User对象属
  性值得函数，然后我们可以接收参数，让JS从对象中去检索

  let User = {
     name:"Jack",
     age:''
   }
     function getProperty(key) {
     let {[key]:returnValue} = User;
        return returnValue;
     }
     let address = getProperty('address');
     let name = getProperty('name');
     console.log(address,name);
   }

在函数参数和返回值中解构对象

解构赋值传参

let User = {
   name:"Jack",
   age:18
 }
   function fun({name,age}) {
   console.log(name,age)
   }
   fun(User);
}

解构函数对象返回值

如果一个函数的返回值是一个对象，我们可以直接解构对象为变量

let User = {
   name:"Jack", function fun(){
   name:"Jack",
   age:18
 }
 
   function fun() {
   return User;
   }
   
   let{age} = fun();
   console.log(age)
  function fun(){
   return{
   name:"Jack",
   age:18
   }
   }
   let{age} = fun();
   console.log(age)

在循环中使用对象解构

let User = [
   {
     'name':"张三" ,
     'age':18
   },
   {
     "name":"李四",
     "age":19
   },
   {
     "name":"王五",
     "age":20
   }
   ];
     for(let{name,age} of User){
     console.log(name,age)
   }

使用其它方式创建对象

工厂模式

• 工厂模式是程序中应用较为普遍的一种设计模式

• 在这里用于抽象对象创建的过程，按照特定的接口创建方式创建对象

  //定义一个方法，该方法用来规定创建对象的基本属性及行为
   //属性我们以方法的参数形式传递进来，让方法内部对这些属性进行处理
   function createPerson(name,age,job) {
   //创建一个Object对象
   let obj = new Object();
   let obj = new Object();
   //给obj对象开始赋值
   obj.name = name;
   obj.age = age;
   obj.job = job;
   obj.eat = function () {
   console.log(this.name+"，吃饭时DuangDuang的");
   }
    return obj;
   }
   let person_1 = createPerson("张金条",99,"修空调");
   let person_2 = createPerson("张银条",98,"挖坑");

构造函数方式

• 以函数的形式为自己的对象定义属性和方法

  <script>
   function Person(name,age,job) {
     this.name = name;
     this.age = age;
     this.job = job;
     this.eat = function () {
     console.log("干饭");
     };
   }
   //要创建对象就得new，也就是说通过new关键字调用Person方法来创建Person对象
     let person_1 = new Person("张铜条",88,"摆烂");
     let person_2 = new Person("张铁条",90,"技师");
     person_1.eat();
     person_2.eat();
   </script>

• 解析

  在内存中创建一个新对象，每new一次就会创建一个新的对象

  这个对象在方法内部只是为将要形成的对象属性指定了属性值和行为