03-创建对象和继承

创建对象的几种方式

通过Object

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>01_Object构造函数模式</title>
  6. </head>
  7. <body>
  8. <!--
  9. 方式一: Object构造函数模式
  10.   * 套路: 先创建空Object对象, 再动态添加属性/方法
  11.   * 适用场景: 起始时不确定对象内部数据
  12.   * 问题: 语句太多
  13. -->
  14. <script type="text/javascript">
  15.     /*
  16.     一个人: name:"Tom", age: 12
  17.      */
  18.     // 先创建空Object对象
  19.     var p = new Object()
  20.     p = {} //此时内部数据是不确定的
  21.     // 再动态添加属性/方法
  22.     p.name = 'Tom'
  23.     p.age = 12
  24.     p.setName = function (name) {
  25.         this.name = name
  26.     }
  28.     //测试
  29.     console.log(p.name, p.age)
  30.     p.setName('Bob')
  31.     console.log(p.name, p.age)
  34. </script>
  35. </body>
  36. </html>

方式二：对象字面量

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>02_对象字面量</title>
  6. </head>
  7. <body>
  8. <!--
  9. 方式二: 对象字面量模式
  10.   * 套路: 使用{}创建对象, 同时指定属性/方法
  11.   * 适用场景: 起始时对象内部数据是确定的
  12.   * 问题: 如果创建多个对象, 有重复代码
  13. -->
  14. <script type="text/javascript">
  15.     var p = {
  16.         name: 'Tom',
  17.         age: 12,
  18.         setName: function (name) {
  19.             this.name = name
  20.         }
  21.     }
  23.     //测试
  24.     console.log(p.name, p.age)
  25.     p.setName('JACK')
  26.     console.log(p.name, p.age)
  28.     var p2 = {  //如果创建多个对象代码很重复
  29.         name: 'Bob',
  30.         age: 13,
  31.         setName: function (name) {
  32.             this.name = name
  33.         }
  34.     }
  36. </script>
  37. </body>
  38. </html>

方式三：工厂模式

  • 方式：通过工厂函数动态创建对象并返回。

返回一个对象的函数，就是工厂函数。

  • 适用场景: 需要创建多个对象。

  • 问题: 对象没有一个具体的类型，都是Object类型。

由于这个问题的存在，工厂模式用得不多。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>03_工厂模式</title>
  6. </head>
  7. <body>
  8. <!--
  9. 方式三: 工厂模式
  10.   * 套路: 通过工厂函数动态创建对象并返回
  11.   * 适用场景: 需要创建多个对象
  12.   * 问题: 对象没有一个具体的类型, 都是Object类型
  13. -->
  14. <script type="text/javascript">
  15.     function createPerson(name, age) { //返回一个对象的函数===>工厂函数
  16.         var obj = {
  17.             name: name,
  18.             age: age,
  19.             setName: function (name) {
  20.                 this.name = name
  21.             }
  22.         }
  24.         return obj
  25.     }
  27.     // 创建2个人
  28.     var p1 = createPerson('Tom', 12)
  29.     var p2 = createPerson('Bob', 13)
  31.     // p1/p2是Object类型
  33.     function createStudent(name, price) {
  34.         var obj = {
  35.             name: name,
  36.             price: price
  37.         }
  38.         return obj
  39.     }
  41.     var s = createStudent('张三', 12000)
  42.     // s也是Object
  45. </script>
  46. </body>
  47. </html>

方式四：自定义构造函数

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>04_自定义构造函数模式</title>
  6. </head>
  8. <body>
  9. <!--
  10. 方式四: 自定义构造函数模式
  11.   * 套路: 自定义构造函数, 通过new创建对象
  12.   * 适用场景: 需要创建多个类型确定的对象
  13.   * 问题: 每个对象都有相同的数据, 浪费内存
  14. -->
  15. <script type="text/javascript">
  16.     //定义类型
  17.     function Person(name, age) {
  18.         this.name = name
  19.         this.age = age
  20.         this.setName = function (name) {
  21.             this.name = name
  22.         }
  23.     }
  25.     var p1 = new Person('Tom', 12)
  26.     p1.setName('Jack')
  27.     console.log(p1.name, p1.age)
  28.     console.log(p1 instanceof Person)
  30.     function Student(name, price) {
  31.         this.name = name
  32.         this.price = price
  33.     }
  35.     var s = new Student('Bob', 13000)
  36.     console.log(s instanceof Student)
  38.     var p2 = new Person('JACK', 23)
  39.     console.log(p1, p2)
  42. </script>
  43. </body>
  44. </html>

方式四引入了继承。

继承的几种方式

通过构造函数继承

在子类型构造函数中通用call()调用父类型构造函数

原型链继承

子类型的原型为父类型的一个实例对象

组合继承