非零基础自学前端最后一遍二 JavaScript基础 8 JavaScript的面向对象

青旅半醒 2024-03-22 17:14 51阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  二 JavaScript基础
         *  8 JavaScript的面向对象
         *   *  8.1 对象类型的基本使用
             *   *  8.1.1 认识对象类型
             *  8.2 对象类型的常见操作
             *   *  8.2.1 创建对象和使用对象
                 *  8.2.2 对象的常见操作
             *  8.3 对象的方括号和练习
             *   *  8.3.1 方括号和引用的使用
                 *  8.3.2 对象的练习
             *  8.4 对象的遍历方式(for-in)
             *   *  8.4.1 对象的遍历
             *  8.5 栈和堆内存-值和引用类型
             *   *  8.5.1 栈内存和堆内存
                 *  8.5.2 值类型和引用类型
             *  8.6 JavaScript中一些现象的内存表现
             *   *  8.6.1 思考下面的现象
             *  8.7 this在开发中的应用
             *   *  8.7.1 为什么需要this？
                 *  8.7.2 this指向什么？
             *  8.8 创建一系列的对象-工厂函数
             *   *  8.8.1 类和对象的思维方式
                 *  8.8.2 创建对象的方案 – 工厂函数
             *  8.9 创建一系列的对象-构造函数
             *   *  8.9.1 JavaScript中的类（ES5）
             *  8.10 类和对象的关系-构造函数的理解
             *   *  8.10.1 认识构造函数
                 *  8.10.2 类和对象的关系
                 *  8.10.3 比如植物大战僵尸游戏
             *  8.11 构造函数的其他小知识补充
             *   *  8.11.1 构造函数的补充
                 *  8.11.2 创建对象的方案 – 构造函数（类）
             *  8.12 对象额外补充-全局对象window
             *   *  8.12.1 全局对象window
             *  8.13 对象额外补充-函数也是一个对象
             *   *  8.13.1 函数也是对象

![在这里插入图片描述][100f934e6d614d61991786a992af066d.png_pic_center]

#### 二 JavaScript基础 ####

#### 8 JavaScript的面向对象 ####

##### 8.1 对象类型的基本使用 #####

###### 8.1.1 认识对象类型 ######

*  在数据类型中我们提到还有一种特别的类型：对象类型。
    
     *  对象类型涉及到JavaScript的各个方面，所以掌握对象类型非常重要；
     *  对象类型是一种存储键值对（key-value）的更复杂的数据类型；
 *  为什么需要对象类型呢？
    
     *  基本数据类型可以存储一些简单的值，但是现实世界的事物抽象成程序时，往往比较复杂；
     *  比如一个人，有自己的特性（比如姓名、年龄、身高），有一些行为（比如跑步、学习、工作）；
     *  比如一辆车，有自己的特性（比如颜色、重量、速度），有一些行为（比如行驶）；
 *  这个时候，我们需要一种新的类型将这些特性和行为组织在一起，这种类型就是对象类型。
    
     *  对象类型可以使用\{…\}来创建的复杂类型，里面包含的是键值对（“key: value”）；
     *  键值对可以是属性和方法（在对象中的函数称之为方法）；
     *  其中key是字符串（也叫做属性名property name ，ES6之后也可以是Symbol类型，后续学习）；
     *  其中value可以是任意类型，包括基本数据类型、函数类型、对象类型等；
    
    ![在这里插入图片描述][3429a089fe304b74bb96f501108ab0bd.png_pic_center]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    
    <body>
    
      <script>
    
        /*
          两个术语: 函数/方法
             函数(function): 如果在JavaScript代码中通过function默认定义一个结构, 称之为是函数.
             方法(method): 如果将一个函数放到对象中, 作为对象的一个属性, 那么将这个函数称之为方法.
        */
        function foo() {
         
        }
    
        // key: 字符串类型, 但是在定义对象的属性名时, 大部分情况下引号都是可以省略的
        var person = {
         
          // key: value
          name: "why",
          age: 18,
          height: 1.88,
          "my friend": {
         
            name: "kobe",
            age: 30
          },
          run: function () {
         
            console.log("running")
          },
          eat: function () {
         
            console.log("eat foods")
          },
          study: function () {
         
            console.log("studying")
          }
        }
    
      </script>
    
    </body>
    
    </html>

##### 8.2 对象类型的常见操作 #####

###### 8.2.1 创建对象和使用对象 ######

*  对象的创建方法有很多，包括三种：
    
     *  对象字面量（Object Literal）：通过\{\}
     *  new Object+动态添加属性；
     *  new 其他类；
    
        <!DOCTYPE html>
        <html lang="en">
        
        <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
        </head>
        
        <body>
        
          <script>
        
            // 1.对象字面量
            var obj1 = {
               
              name: "why"
            }
        
            // 2.new Object()
            // // Object构造函数
            // var obj2 = new Object()
            // obj2.name = "kobe"
        
            // // 3.new 其他类()
            // function Person() {}
            // var obj3 = new Person()
        
          </script>
        
        </body>
        
        </html>
 *  目前我们主要掌握对象字面量的方式，后续我们学习其他两种方式。
    
     *  属性之间是以逗号（ comma ）分割的；
 *  对象的使用过程包括如下操作：
    
     *  访问对象的属性；
     *  修改对象的属性；
     *  添加对象的属性；
     *  删除对象的属性；

###### 8.2.2 对象的常见操作 ######

*  访问对象的属性；
 *  修改对象的属性；
 *  添加对象的属性；
 *  删除对象的属性：delete操作符

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    
    <body>
    
      <script>
        // 1.定义了一个对象
        var info = {
         
          name: "why",
          age: 18,
          friend: {
         
            name: "kobe",
            age: 30
          },
          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>
    
    </body>
    
    </html>

##### 8.3 对象的方括号和练习 #####

###### 8.3.1 方括号和引用的使用 ######

*  为什么需要使用方括号呢？
    
    对于多词属性来说，JavaScript是无法理解的。
    
    ![在这里插入图片描述][19e2a3ad6b0f486abb1c447fc3d729c0.png_pic_center]
 *  这是因为点符号要求 key 是有效的变量标识符
    
     *  不包含空格，不以数字开头，也不包含特殊字符（允许使用 $ 和 \_）；
 *  这个时候我们可以使用方括号：
    
     *  方括号运行我们在定义或者操作属性时更加的灵活；
    
    ![在这里插入图片描述][2687721efb3e4971bac092c3c0ad4218.png_pic_center]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    
    <body>
    
      <script>
    
        var obj = {
         
          name: "why",
          "my friend": "kobe",
          "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>
    
    </body>
    
    </html>

运行效果

![在这里插入图片描述][fe2a75d93f1648828e5500594efd3e55.png_pic_center]

###### 8.3.2 对象的练习 ######

*  练习一：商品对象
 *  练习二：手机对象
 *  练习三：用户对象
 *  作业：思考日常生活或者开发中都会有哪些对象？

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    
    <body>
    
      <script>
        // 定义商品对象
        var product = {
         
          name: "鞋子",
          desc: "鞋子非常棒!!!",
          price: 99,
          brand: "nike"
        }
    
        // 定义手机对象
        var phone = {
         
          name: "iPhone 13 Pro Max",
          desc: "对iPhone的描述信息",
          price: 888,
          callPhone: function (phoneNum) {
         
            console.log("打电话给某人:", phoneNum)
          },
          playGame: function (gameName) {
         
            console.log("玩游戏:", gameName)
          }
        }
    
        // 定义用户对象
        var user = {
         
          id: 1111111,
          account: "coderwhy",
          nickname: "coderwhy",
          password: "xxx123",
          avatarURL: "图片地址",
          role: {
         
            id: 110,
            name: "管理员",
            createTime: "2033-03-03"
          }
        }
    
      </script>
    
    </body>
    
    </html>

##### 8.4 对象的遍历方式(for-in) #####

###### 8.4.1 对象的遍历 ######

*  对象的遍历（迭代）：表示获取对象中所有的属性和方法。
 *  Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组；
    
     *  遍历方式一：普通for循环
        
        ![在这里插入图片描述][46380ee582de45d9bb1b86d18acd4869.png_pic_center]
     *  遍历方式二：for in 遍历方法
        
        ![在这里插入图片描述][526fb4e5cacd4fbf8def42ce2cc8e62a.png_pic_center]

渲染结果

![在这里插入图片描述][f3b8b80063ec45828583d25d902b6d67.png_pic_center]

##### 8.5 栈和堆内存-值和引用类型 #####

###### 8.5.1 栈内存和堆内存 ######

*  我们知道程序是需要加载到内存中来执行的，我们可以将内存划分为两个区域：栈内存和堆内存。
    
     *  原始类型占据的空间是在栈内存中分配的； 【原始 → 栈】
     *  对象类型占据的空间是在堆内存中分配的；【对象 → 堆】

![在这里插入图片描述][9f86c457f36741e4a51d27cd50e73456.png_pic_center]

*  后续我们会学习图中的其他知识
 *  目前我们先掌握堆和栈的概念即可

###### 8.5.2 值类型和引用类型 ######

*  原始类型的保存方式：在变量中保存的是值本身
    
     *  所以原始类型也被称之为值类型；
    
    ![在这里插入图片描述][3dcd8e59d58b4295a0d5254755d376d4.png_pic_center]
 *  对象类型的保存方式：在变量中保存的是对象的“引用”
    
     *  所以对象类型也被称之为引用类型；
    
    ![在这里插入图片描述][80bfc9ef14514fd29997df49b8b1fc70.png_pic_center]

##### 8.6 JavaScript中一些现象的内存表现 #####

###### 8.6.1 思考下面的现象 ######

*  现象一：两个对象的比较
    
    ![在这里插入图片描述][5ad515fb87a54e09a92f9a3d156350ed.png_pic_center]
 *  现象二：引用传递和值传递的内存区别
    
    ![在这里插入图片描述][e8b76b68221b494baef7220a4bf52bb6.png_pic_center]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    
    <body>
    
      <script>
    
        // var num1 = 123
        // var num2 = 123
        // console.log(num1 === num2)
    
        // 1.现象一: 两个对象的比较
        // var obj1 = {}
        // var obj2 = {}
        // console.log(obj1 === obj2)
    
    
        // // 2.现象二: 引用的赋值
        // var info = {
         
        //   name: "why",
        //   friend: {
         
        //     name: "kobe"
        //   }
        // }
    
        // var friend = info.friend
        // friend.name = "james"
        // console.log(info.friend.name) // james
    
    
        // 3.现象三: 值传递
        // function foo(a) {
         
        //   a = 200
        // }
        // var num = 100
        // foo(num)
        // console.log(num) // 100
    
    
        // 4.现象四: 引用传递, 但是在函数中创建了一个新对象, 没有对传入对象进行修改
        // function foo(a) {
         
        //   a = {
         
        //     name: "why"
        //   }
    
        // }
        var obj = {
         
          name: "obj"
        }
        foo(obj)
        console.log(obj)
    
        // 5.现象五: 引用传递, 但是对传入的对象进行修改
        function foo(a) {
         
          a.name = "why"
        }
    
        var obj = {
         
          name: "obj"
        }
        foo(obj)
        console.log(obj)
    
      </script>
    
    </body>
    
    </html>

JavaScript内存分配

![在这里插入图片描述][be550f83554145bfa19ec328de912db8.png_pic_center]

对象的引用赋值内存图

![在这里插入图片描述][cd5deadb5c6744a28afc4c2a9b8cac30.png_pic_center]

函数传递-引用传递-创建新对象

![在这里插入图片描述][0cb4bc7820884beca2e16593158b234e.png_pic_center]

函数传递-引用传递-修改引用属性

![在这里插入图片描述][29396cee18924d18b45846ebbaf1b195.png_pic_center]

函数传递-值传递

![在这里插入图片描述][37446caecfe547e59062327a5a81ff49.png_pic_center]

两个对象比较的内存图

![在这里插入图片描述][5c9fcc5412ae4fa881259753ce49e17d.png_pic_center]

##### 8.7 this在开发中的应用 #####

###### 8.7.1 为什么需要this？ ######

*  在常见的编程语言中，几乎都有this这个关键字（Objective-C中使用的是self），但是JavaScript中的this和常见的面向对象 语言中的this不太一样：
    
     *  常见面向对象的编程语言中，比如Java、C++、Swift、Dart等等一系列语言中，this通常只会出现在类的方法中。
     *  也就是你需要有一个类，类中的方法（特别是实例方法）中，this代表的是当前调用对象；
 *  但是JavaScript中的this更加灵活，无论是它出现的位置还是它代表的含义；
 *  我们来看一下编写一个obj的对象，有this和没有this的区别：
    
    ![在这里插入图片描述][6cc7062d94bc4e2b8e6bc05eef81a3d1.png_pic_center]

###### 8.7.2 this指向什么？ ######

*  目前掌握两个this的判断方法：
    
     *  在全局环境下面，this指向window；
        
        ![在这里插入图片描述][0965755665804c059f9f8d2ad868f8fa.png_pic_center]
     *  通过对象调用，this指向调用的对象；
        
        ![在这里插入图片描述][bbe74ae218564eeebc13ca15c48d164d.png_pic_center]
 *  后续我们还会学习其他，也会给大家总结this的规律；

##### 8.8 创建一系列的对象-工厂函数 #####

###### 8.8.1 类和对象的思维方式 ######

*  我们来思考一个问题：如果需要在开发中创建一系列的相似的对象，我们应该如何操作呢？
 *  比如下面的例子：
    
     *  游戏中创建一系列的英雄（英雄具备的特性是相似的，比如都有名字、技能、价格，但是具体的值又不相同）
     *  学生系统中创建一系列的学生（学生都有学号、姓名、年龄等，但是具体的值又不相同）
 *  当然，一种办法是我们创建一系列的对象：
    
    ![在这里插入图片描述][ce69b7cdae4e44938c2198c58b6a8795.png_pic_center]
    
        <!DOCTYPE html>
        <html lang="en">
        
        <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
        </head>
        
        <body>
        
          <script>
        
            // 一系列的学生对象
            // 重复代码的复用: for/函数
            var stu1 = {
               
              name: "why",
              age: 18,
              height: 1.88,
              running: function () {
               
                console.log("running~")
              }
            }
            var stu2 = {
               
              name: "kobe",
              age: 30,
              height: 1.98,
              running: function () {
               
                console.log("running~")
              }
            }
            var stu3 = {
               
              name: "james",
              age: 25,
              height: 2.05,
              running: function () {
               
                console.log("running~")
              }
            }
        
          </script>
        
        </body>
        
        </html>
 *  这种方式有一个很大的弊端：创建同样的对象时，需要编写重复的代码；
    
     *  我们是否有可以批量创建对象，但是又让它们的属性不一样呢？

###### 8.8.2 创建对象的方案 – 工厂函数 ######

*  我们可以想到的一种创建对象的方式：工厂函数
    
     *  我们可以封装一个函数，这个函数用于帮助我们创建一个对象，我们只需要重复调用这个函数即可；
     *  工厂模式其实是一种常见的设计模式；

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    
    <body>
    
      <script>
    
        // for循环
        // for (var i = 0; i < 3; i++) {
         
        //   var stu = {
         
        //     name: "why",
        //     age: 18,
        //     height: 1.88,
        //     running: function() {
         
    
        //     }
        //   }
        // }
    
    
        var obj1 = {
         }
        var obj2 = {
         }
    
        // 工厂函数(工厂生产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("why", 18, 1.88)
        var stu2 = createStudent("kobe", 30, 1.98)
        var stu3 = createStudent("james", 25, 2.05)
        console.log(stu1)
        console.log(stu2)
        console.log(stu3)
    
      </script>
    
    </body>
    
    </html>

运行结果

![在这里插入图片描述][bfa1f2f6797e48ceaa6d6b4fd10a820b.png_pic_center]

##### 8.9 创建一系列的对象-构造函数 #####

###### 8.9.1 JavaScript中的类（ES5） ######

*  我们前面说过，**在JavaScript中类的表示形式就是构造函数。**
 *  JavaScript中的构造函数是怎么样的？
    
     *  构造函数也是一个普通的函数，从表现形式来说，和千千万万个普通的函数没有任何区别；
     *  那么**如果这么一个普通的函数被使用new操作符来调用了，那么这个函数就称之为是一个构造函数；**
 *  如果一个函数被使用new操作符调用了，那么它会执行如下操作：
    
    1.  在内存中创建一个新的对象（空对象）；
    2.  这个对象内部的\[\[prototype\]\]属性会被赋值为该构造函数的prototype属性；（后面详细讲）；
    3.  构造函数内部的this，会指向创建出来的新对象；
    4.  执行函数的内部代码（函数体代码）；
    5.  如果构造函数没有返回非空对象，则返回创建出来的新对象；
 *  接下来，我们可以用构造函数的方式来实现一下批量创建学生。

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      
      <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("why", 18, 1.88)
        var stu2 = new coder("kobe", 30, 1.98)
        console.log(stu1, stu2)
    
        // alert("Hello")
    
      </script>
    
    </body>
    </html>

运行结果

![在这里插入图片描述][89987c59ee174815a6e13af5dd0a666f.png_pic_center]

##### 8.10 类和对象的关系-构造函数的理解 #####

###### 8.10.1 认识构造函数 ######

*  工厂方法创建对象有一个比较大的问题：我们在打印对象时，对象的类型都是Object类型
    
    ![在这里插入图片描述][353820092d9e45d3ac98a4a5dc124e30.png_pic_center]
    
     *  但是从某些角度来说，这些对象应该有一个他们共同的类型；
     *  下面我们来看一下另外一种模式：构造函数的方式；
 *  我们先理解什么是构造函数？
    
     *  构造函数也称之为构造器（constructor），通常是我们在创建对象时会调用的函数；
     *  在其他面向的编程语言里面，构造函数是存在于类中的一个方法，称之为构造方法；
     *  但是JavaScript中的构造函数有点不太一样，构造函数扮演了其他语言中类的角色；
 *  也就是在JavaScript中，构造函数其实就是类的扮演者：
    
     *  比如系统默认给我们提供的Date就是一个构造函数，也可以看成是一个类；
     *  在ES5之前，我们都是通过function来声明一个构造函数（类）的，之后通过new关键字来对其进行调用；
     *  在ES6之后，JavaScript可以像别的语言一样，通过class来声明一个类；
 *  那么类和对象到底是什么关系呢？

###### 8.10.2 类和对象的关系 ######

*  那么什么是类（构造函数）呢？
    
     *  现实生活中往往是根据一份描述/一个模板来创建一个实体对象的.
     *  编程语言也是一样, 也必须先有一份描述, 在这份描述中说明将来创建出来的对象有哪些属性(成员变量)和行为(成员方法)
 *  比如现实生活中，我们会如此来描述一些事物：
    
     *  比如水果fruits是一类事物的统称，苹果、橘子、葡萄等是具体的对象；
     *  比如人person是一类事物的统称，而Jim、Lucy、Lily、李雷、韩梅梅是具体的对象；

![在这里插入图片描述][017e257ec0d447ab9ba9551e4b1156e8.png_pic_center]

###### 8.10.3 比如植物大战僵尸游戏 ######

![在这里插入图片描述][9c075c35537e4034a284b296dfe40924.png_pic_center]

##### 8.11 构造函数的其他小知识补充 #####

###### 8.11.1 构造函数的补充 ######

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    
    <body>
    
      <script>
    
        // 创建一系列的对象
        // 构造函数的名称: 使用大驼峰
        function Person() {
         
    
        }
    
        var p1 = new Person()
        console.log(p1)
    
        // 平时创建普通的对象
        // new Object()
        var obj1 = {
         }
        var obj2 = new Object()
        var obj3 = new Person()
    
        // 普通函数: 使用小驼峰
        function sayHello() {
         
    
        }
    
      </script>
    
    </body>
    
    </html>

###### 8.11.2 创建对象的方案 – 构造函数（类） ######

*  我们来通过构造函数实现一下：
    
    ![在这里插入图片描述][485b0eb4b9c543baa1c378827afae0f7.png_pic_center]
 *  这个构造函数可以确保我们的对象是有Person的类型的（实际是constructor的属性，这个我们后续再探讨）；
 *  事实上构造函数还有很多其他的特性：
    
     *  比如原型、原型链、实现继承的方案
     *  比如ES6中类、继承的实现；

##### 8.12 对象额外补充-全局对象window #####

###### 8.12.1 全局对象window ######

// 浏览器中存在一个全局对象object -> window

*  作用一: 查找变量时, 最终会找到window头上
 *  作用二: 将一些浏览器全局提供给我们的变量/函数/对象, 放在window对象上面
 *  作用三(了解): 使用var定义的变量会被默认添加到window上面

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      
      <script>
    
        // 浏览器中存在一个全局对象object -> window
        // 作用一: 查找变量时, 最终会找到window头上
        // 作用二: 将一些浏览器全局提供给我们的变量/函数/对象, 放在window对象上面
        // 作用三(了解): 使用var定义的变量会被默认添加到window上面
        console.log(window)
    
        // 使用var定义变量
        var message = "Hello World"
    
        function foo() {
         
          // 自己的作用域
          // abc()
          // alert("Hello World")
          console.log(window.console === console)
    
          // 创建一个对象
          // var obj = new Object()
          console.log(window.Object === Object)
    
          // DOM
          console.log(document)
    
          // window.message
          console.log(window.message)
        }
        foo()
    
      </script>
    
    </body>
    </html>

运行结果

![在这里插入图片描述][81469fd27e614af98dc88c8bd1517e44.png_pic_center]

##### 8.13 对象额外补充-函数也是一个对象 #####

###### 8.13.1 函数也是对象 ######

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    
    <body>
    
      <script>
    
        // 定义原始类型的变量
        var name = "why"
        var age = 18
    
        // 定义对象类型的变量
        // 地址 - 指针 - 引用
        var obj = {
         } // 堆内存
        var foo = function () {
          } // 堆内存
        function bar() {
          } // 堆内存
    
        console.log(typeof obj) // object
        console.log(typeof foo) // function -> object
    
        // var stu = new Student() // stu是一个Student -> Person
    
        // 引申一些别的知识(了解)
        var info = {
         }
        info.name = "abc"
    
        function sayHello() {
         
        }
        sayHello.age = 18
        console.log(sayHello.age)
    
        function Dog() {
         
    
        }
        // 构造函数上(类上面)添加的函数, 称之为类方法
        Dog.running = function () {
          }
        Dog.running()
    
      </script>
    
    </body>
    
    </html>

[100f934e6d614d61991786a992af066d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/817cf32954d34e0a9b8b71d908a92057.png
[3429a089fe304b74bb96f501108ab0bd.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/3fff9928323e4e5ea2a9b9033fb2d64e.png
[19e2a3ad6b0f486abb1c447fc3d729c0.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/2283a53f34df48578ce6046fee3a143c.png
[2687721efb3e4971bac092c3c0ad4218.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/adae1e5f352743d5bb7e139ae18e8da1.png
[fe2a75d93f1648828e5500594efd3e55.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/53eb09bddd174fcca5c24d935ff88573.png
[46380ee582de45d9bb1b86d18acd4869.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/d90e0c9dba8e4ecda80a75bbe7a99eb7.png
[526fb4e5cacd4fbf8def42ce2cc8e62a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/7ab697bd438e47a4a0a241162728189b.png
[f3b8b80063ec45828583d25d902b6d67.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/78605f4c85724c9b85d8d54d9486da55.png
[9f86c457f36741e4a51d27cd50e73456.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/2b1f40b0566b43e584afc38ac12b8aaf.png
[3dcd8e59d58b4295a0d5254755d376d4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/d696a613c39e43199b12aa05950e1c81.png
[80bfc9ef14514fd29997df49b8b1fc70.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/072805f9d5aa446c9513ac668a52e2cf.png
[5ad515fb87a54e09a92f9a3d156350ed.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/c530cf32ad074e06868915a1ce48cbf0.png
[e8b76b68221b494baef7220a4bf52bb6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/fe91387641bc464cb29046557628bf19.png
[be550f83554145bfa19ec328de912db8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/9d6ad7166c344e2cb7889a08fb04746f.png
[cd5deadb5c6744a28afc4c2a9b8cac30.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/72fb7d3df68946058877719cb8768702.png
[0cb4bc7820884beca2e16593158b234e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/e23ae46b57984b3a80819b6e97df5c88.png
[29396cee18924d18b45846ebbaf1b195.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/7644235f145d4817a6eb6a87e5b49e3c.png
[37446caecfe547e59062327a5a81ff49.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/92d4cac34aac43a690d34aa346836b9e.png
[5c9fcc5412ae4fa881259753ce49e17d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/b0db176d317b4c91af2138931eed7cb4.png
[6cc7062d94bc4e2b8e6bc05eef81a3d1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/44b399c22d4245d3ac430da0532a44eb.png
[0965755665804c059f9f8d2ad868f8fa.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/410e7f5d9ff7461c9f1c03231efb3572.png
[bbe74ae218564eeebc13ca15c48d164d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/4b1e573a303a49328d519d75e5fdd72d.png
[ce69b7cdae4e44938c2198c58b6a8795.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/d9cc6bbf93ff4abf8b7ad75d5d67259a.png
[bfa1f2f6797e48ceaa6d6b4fd10a820b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/4965bb290f1b403c841c2f77fe1ee17e.png
[89987c59ee174815a6e13af5dd0a666f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/7171234242a84be7be272a1c0d555159.png
[353820092d9e45d3ac98a4a5dc124e30.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/861a88c3fd8e4b259d4215f2a880f5b7.png
[017e257ec0d447ab9ba9551e4b1156e8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/ab1270dbc9f94af2b40fbca9226007fd.png
[9c075c35537e4034a284b296dfe40924.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/241451f5e12a44b0ad4ecf79980dc1a1.png
[485b0eb4b9c543baa1c378827afae0f7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/81c350ae2f9943f09a78ff22bc250eba.png
[81469fd27e614af98dc88c8bd1517e44.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/a9359d1061044c2582f050cd722f4e0f.png