JS-8 JS对象类型object的创建和使用；方括号和引用的使用；对象的遍历；值类型和引用类型；函数的this；类和对象的思维方式；构造函数；工厂函数；

1_对象类型object

1.1_认识

1）对象类型是一种存储键值对（key-value）的更复杂的数据类型；

2） 键值对可以是属性和方法（在对象中的函数称之为方法）；

3） key是字符串（ES6之后也可以是Symbol类型，后续学习）；

4） 补充：key一般是个英文单词，如果是多个英文单词，以空格间隔，必须在首尾加双引号。比如 “fist price”：199;

5） 其中value可以是任意类型，包括基本数据类型、函数类型、对象类型等；

1.2_对象的创建和使用

创建对象的三种方法：

1 ）对象字面量（Object Literal）：通过{} 创建，属性一般之间以逗号,分隔，也可以省略逗号。

2）new Object+动态添加属性；

3）new 其他类；

<script>

    // 方法1.对象字面量 。  创建对象首先掌握第一种方法
    var obj1 = {
      name: "xixi"
      age: 18
    }

    // 方法2. new Object()
    // // Object构造函数
    // var obj2 = new Object()
    // obj2.name = "haha"

    //方法3. new 其他类()
    // function Person() {}
    // var obj3 = new Person()

  </script>

对象的使用操作

• 访问对象的属性：对象名.属性名。若访问方法，还要加()

• 更改对象的属性：对象名.属性名 = 新属性值

• 添加对象的属性：对象名.新属性名 = 新属性值

• 删除对象的属性：delete 对象名.属性名

<script>
    // 1.定义一个对象
    var info = {
      name: "xixi",
      age: 18,
      friend: {
        name: "haha",
        age: 20
      },
      running: function() {
        console.log("running~")
      }
    }

    // 2.访问对象中的属性
     console.log(info.name)
     console.log(info.friend.name)
     info.running()

    // 3.修改对象中的属性
     info.age = 25
     info.running = function() {
       alert("I am running~")
     }
     console.log(info.age)
     info.running()

    // 4.添加对象中的属性
    info.height = 1.88
    info.studying = function() {
      console.log("I am studying~")
    }
    console.log(info)

    // 5.删除对象中的属性
    // delete关键字(操作符)
    delete info.age
    delete info.height
    console.log(info)

  </script>

1.3_方括号和引用的使用

使用方括号的原因， 对于多次属性来说，JavaScript引擎是无法理解的。

这是因为点符号.要求 key 是有效的变量标识符： 不包含空格，不以数字开头，也不包含特殊字符（允许使用 $ 和 _）；

方括号，运行在定义或者操作属性时，更加的灵活；

<script>

    var obj = {
      name: "xixi",
      "my friend": "haha",
      "eating something": function() {
        console.log("eating~")
      }
    }

    console.log(obj["my friend"])
    console.log(obj.name)
    console.log(obj["name"])

    // obj["eating something"]()
    var eatKey = "eating something"
    obj[eatKey]()
    

  </script>

1.4_对象的遍历

对象的遍历（迭代）：表示获取对象中所有的属性和方法。

Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组；

• 遍历方式一：普通for循环

• 遍历方式二：for in 遍历方法 (更推荐)

<script>

    var info = {
      name: "xixi",
      age: 18,
      height: 1.88
    }

    // console.log(Object.keys(info))

    // 对对象进行遍历
    // 1.普通for循环
    var infoKeys = Object.keys(info)
    for (var i = 0; i < infoKeys.length; i++) {
      var key = infoKeys[i]
      var value = info[key]
      console.log(`key: ${key}, value: ${value}`)
    }

    // 2.for..in..: 遍历对象
    for (var key in info) {
      var value = info[key]
      console.log(`key: ${key}, value: ${value}`)
    }

    // 对象不支持:  for..of..: 默认是不能遍历对象
    // for (var foo of info) {
    // }

  </script>

2_值类型和引用类型

程序是加载到内存中来执行的，将内存划分为两个区域：栈内存和堆内存

• 原始类型占据的空间是在栈内存中分配的，在变量中保存的是值本身，也被称之为值类型；

• 对象类型占据的空间是在堆内存中分配的，在变量中保存的是对象的“引用”（堆内存的地址）， 也被称之为引用类型；

3_函数的this

常见的编程语言中，有this这个关键字（除Objective-C中使用的是self），但JavaScript中的this和常见的面向对象语言中的this不一样：

• 常见面向对象的编程语言中，比如Java、C++、Swift、Dart等等一系列语言中，this通常只会出现在类的方法中（特别是实例方法）中，this代表的是当前调用对象；
• JS中的this更加灵活，尤其是出现的位置还有它代表的含义

掌握两个this的判断方法：

• 在全局环境下面，this指向window；
• 通过对象类型调用，this指向调用的对象；

<script>
    // 函数中是有一个this的变量, this变量在大多数情况下会指向一个对象
    // arguments保存的是传入的所有参数

    // 情况一: 如果普通的函数被默认调用, 那么this指向的就是window
    // function foo(name, age) {
    //   console.log(arguments)   
    //   console.log(this)   //指向windows
    // }
    // foo("abc", 123)

    // function sayHello(name) {
    //   console.log(this)   //指向windows
    // }
    // sayHello()  


    // 情况二: 如果函数它是被某一个对象来引用并且调用它, 那么this会指向这个对象
    // var obj = {
    //   name: "hihi",
    //   running: function() {
    //     console.log(this)
    //     // console.log(obj)
    //     // console.log(this === obj)
    //   }
    // }
    // obj.running()   //指向obj对象


    // 1.题目一:
    // var fn = obj.running
    // fn()         // 指向window ，不是由对象主动调用

    // 2.题目二:
    function bar() {
      console.log(this) 
    }
    var obj = {
      name: "hihi",
      bar: bar
    }
    obj.bar()    //指向obj对象

  </script>

4_构造函数

4.1_类和对象的思维方式

  在开发中创建一系列的相似的对象，比如游戏中创建一系列的英雄（英雄具备的特性是相似的，都有名字、技能、价格，但是具体的值又不相同）；学生系统中创建一系列的学生（学生都有学号、姓名、年龄等，但是具体的值又不相同）。

  现实生活中往往是根据一份描述/一个模板来创建一个实体对象的；编程语言也是一样, 也必须先有一份描述, 在这份描述中说明将来创建出来的对象有哪些属性(成员变量)和行为(成员方法)。

  创建同类的对象时，需要编写重复的代码。为了解决批量创建对象，同时让各自的属性不一样，解决方案——工厂函数。

创建对象的方案—— 工厂函数：封装一个函数，用于帮助创建一个对象，只需要重复调用这个函数即可。工厂模式也是一种常见的设计模式；

 <script>
    // 工厂函数(工厂生产student对象) -> 一种设计模式
    // 通过工厂设计模式, 自己来定义了一个这样的函数
    function createStudent(name, age, height) {
      var stu = {}
      stu.name = name
      stu.age = age
      stu.height = height
      stu.running = function() {
        console.log("running~")
      }
      return stu
    }

    var stu1 = createStudent("xixi", 18, 1.88)
    var stu2 = createStudent("haha", 30, 1.98)
    var stu3 = createStudent("james", 25, 2.05)
    console.log(stu1)
    console.log(stu2)
    console.log(stu3)

  </script>

4.2_认识构造函数

工厂方法创建对象有一个比较大的问题：打印对象时，对象的类型都是Object类型，但是从某些角度来说，这些对象应该有一个共同的类型。

创建对象另一种模式：构造函数

• 常在创建对象时会调用的函数；

• 在其他面向对象的编程语言中，构造函数是存在于类中的一个方法，称之为构造方法；

• 但是JavaScript中的构造函数不太一样，构造函数扮演了其他语言中类的角色；

在JavaScript中，构造函数就是类的扮演者：

• 比如系统默认提供的Date就是一个构造函数，也可以看成是一个类；

• 在ES5之前，都是通过function来声明一个构造函数（类）的，之后通过new关键字来对其进行调用；

• 在ES6之后，JavaScript可以像别的语言一样，通过class来声明一个类；

事实上构造函数还有其他的特性：

• 比如原型、原型链、实现继承的方案

• 比如ES6中类、继承的实现

4.3_JavaScript中的类（ES5）

在JavaScript中类的表示形式就是构造函数。

• 构造函数是一个普通的函数，从表现形式来说，和千千万万个普通的函数没有任何区别；

• 如果一个普通的函数被使用new操作符来调用了，那么这个函数就是一个构造函数；

一个函数被使用new操作符调用了，会执行以下操作：

1. 在内存中创建一个新的对象（空对象）；

2. 这个对象内部的属性会被赋值为该构造函数的属性(new的实参传给构造函数的形参，形参传给对象内部属性）；

3. 构造函数内部的this，会指向创建出来的新对象；

4. 执行函数的内部代码（函数体代码）；

5. 如果构造函数没有返回非空对象，则返回创建出来的新对象；

<script>

    // JavaScript已经默认提供更加符合JavaScript思维方式(面向对象的思维方式)的一种创建对象的规则
    // 在函数中的this一般指向某一个对象
    /*
      如果一个函数被new操作符调用
        1.创建出来一个新的空对象
        2.让this指向这个空对象
        3.执行函数体的代码块
        4.如果没有明确的返回一个非空对象, 那么this指向的对象会自动返回
    */
    function coder(name, age, height) {
      this.name = name
      this.age = age
      this.height = height
      this.running = function() {
        console.log("running~")
      }
    }
    
    // 在函数调用的前面加 new 关键字(操作符)
    var stu1 = new coder("xixi", 18, 1.88)
    var stu2 = new coder("kobe", 30, 1.98)
    console.log(stu1, stu2)

  </script>