2025-01-13 日报 Day65

2025-01-13 日报 Day65

Yuyang 前端小白🥬
  2025-01-13 2025-01-13 创建   2025-04-02 06:21:20 2025-04-02 06:21:20 更新      

今日的鸡汤

在选择面前要有舍弃的勇气，有“众行”的智慧，更有超越小我、始终如一的方向。

今日学习内容

1、JS 红皮书 P220-223 第八章：对象、类与面向对象编程

今日笔记

1、虽然使用 Object 构造函数或对象字面量可以方便地创建对象，但这些方式也有明显不足：创建具有同样接口的多个对象需要重复编写很多代码。工厂模式是一种众所周知的设计模式，广泛应用于软件工程领域，用于抽象创建特定对象的过程。下面的例子展示了一种按照特定接口创建对象的方式：

1
2
3
4
5
6
7
8
9
10
11
12
function createPerson(name, age, job) { 
 let o = new Object(); 
 o.name = name; 
 o.age = age; 
 o.job = job; 
 o.sayName = function() { 
    console.log(this.name); 
 }; 
 return o; 
} 
let person1 = createPerson("Nicholas", 29, "Software Engineer"); 
let person2 = createPerson("Greg", 27, "Doctor");

这里，函数 createPerson()接收 3 个参数，根据这几个参数构建了一个包含 Person 信息的对象。可以用不同的参数多次调用这个函数，每次都会返回包含 3 个属性和 1 个方法的对象。这种工厂模式虽然可以解决创建多个类似对象的问题，但没有解决对象标识问题（即新创建的对象是什么类型）。
2、构造函数模式: ECMAScript 中的构造函数是用于创建特定类型对象的。像 Object 和 Array 这样的原生构造函数，运行时可以直接在执行环境中使用。当然也可以自定义构造函数，以函数的形式为自己的对象类型定义属性和方法。

1
2
3
4
5
6
7
8
9
10
11
12
function Person(name, age, job){ 
 this.name = name; 
 this.age = age; 
 this.job = job; 
 this.sayName = function() { 
    console.log(this.name); 
 }; 
} 
let person1 = new Person("Nicholas", 29, "Software Engineer"); 
let person2 = new Person("Greg", 27, "Doctor"); 
person1.sayName(); // Nicholas 
person2.sayName(); // Greg

在这个例子中，Person()构造函数代替了 createPerson()工厂函数。实际上，Person()内部的代码跟 createPerson()基本是一样的，只是有如下区别。
 没有显式地创建对象。
 属性和方法直接赋值给了 this。
 没有 return。
另外，要注意函数名 Person 的首字母大写了。按照惯例，构造函数名称的首字母都是要大写的，非构造函数则以小写字母开头。这是从面向对象编程语言那里借鉴的，有助于在 ECMAScript 中区分构造函数和普通函数。毕竟 ECMAScript 的构造函数就是能创建对象的函数。
要创建 Person 的实例，应使用 new 操作符。以这种方式调用构造函数会执行如下操作。

  1. 在内存中创建一个新对象。
  2. 这个新对象内部的[[Prototype]]特性被赋值为构造函数的 prototype 属性。
  3. 构造函数内部的 this 被赋值为这个新对象（即 this 指向新对象）。
  4. 执行构造函数内部的代码（给新对象添加属性）。
  5. 如果构造函数返回非空对象，则返回该对象；否则，返回刚创建的新对象。
    上一个例子的最后，person1 和 person2 分别保存着 Person 的不同实例。这两个对象都有一个constructor 属性指向 Person，如下所示：
    1
    2
    console.log(person1.constructor == Person); // true 
    console.log(person2.constructor == Person); // true
    constructor 本来是用于标识对象类型的。不过，一般认为 instanceof 操作符是确定对象类型更可靠的方式。前面例子中的每个对象都是 Object 的实例，同时也是 Person 的实例，如下面调用instanceof 操作符的结果所示：
    1
    2
    3
    4
    console.log(person1 instanceof Object); // true 
    console.log(person1 instanceof Person); // true 
    console.log(person2 instanceof Object); // true 
    console.log(person2 instanceof Person); // true
    构造函数不一定要写成函数声明的形式。赋值给变量的函数表达式也可以表示构造函数：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    let Person = function(name, age, job){ 
     this.name = name; 
     this.age = age; 
     this.job = job; 
     this.sayName = function() { 
        console.log(this.name); 
     }; 
    };

    let person1 = new Person("Nicholas", 29, "Software Engineer"); 
    let person2 = new Person("Greg", 27, "Doctor"); 
    person1.sayName(); // Nicholas 
    person2.sayName(); // Greg 
    console.log(person1 instanceof Object); // true 
    console.log(person1 instanceof Person); // true 
    console.log(person2 instanceof Object); // true 
    console.log(person2 instanceof Person); // true
    在实例化时，如果不想传参数，那么构造函数后面的括号可加可不加。只要有 new 操作符，就可以调用相应的构造函数：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    function Person() { 
     this.name = "Jake"; 
     this.sayName = function() { 
        console.log(this.name); 
     }; 
    } 
    let person1 = new Person(); 
    let person2 = new Person;
    person1.sayName(); // Jake 
    person2.sayName(); // Jake 
    console.log(person1 instanceof Object); // true 
    console.log(person1 instanceof Person); // true 
    console.log(person2 instanceof Object); // true 
    console.log(person2 instanceof Person); // true
    3、构造函数也是函数: 构造函数与普通函数唯一的区别就是调用方式不同。除此之外，构造函数也是函数。并没有把某个函数定义为构造函数的特殊语法。任何函数只要使用 new 操作符调用就是构造函数，而不使用 new 操作符调用的函数就是普通函数。比如，前面的例子中定义的 Person()可以像下面这样调用：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // 作为构造函数 
    let person = new Person("Nicholas", 29, "Software Engineer"); 
    person.sayName(); // "Nicholas" 
    // 作为函数调用
    Person("Greg", 27, "Doctor"); // 添加到 window 对象
    window.sayName(); // "Greg" 
    // 在另一个对象的作用域中调用
    let o = new Object(); 
    Person.call(o, "Kristen", 25, "Nurse"); 
    o.sayName(); // "Kristen"
    4、构造函数的问题: 构造函数的主要问题在于，其定义的方法会在每个实例上都创建一遍。因此对前面的例子而言，person1 和 person2 都有名为 sayName()的方法，但这两个方法不是同一个 Function 实例。我们知道，ECMAScript 中的函数是对象，因此每次定义函数时，都会初始化一个对象。逻辑上讲，这个构造函数实际上是这样的：
    1
    2
    3
    4
    5
    6
    7
    8
    function Person(name, age, job){ 
     this.name = name; 
     this.age = age; 
     this.job = job; 
     this.sayName = new Function("console.log(this.name)"); // 逻辑等价
    }
    // 不同实例上的函数虽然同名却不相等
    console.log(person1.sayName == person2.sayName); // false
    因为都是做一样的事，所以没必要定义两个不同的 Function 实例。况且，this 对象可以把函数与对象的绑定推迟到运行时。要解决这个问题，可以把函数定义转移到构造函数外部：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    function Person(name, age, job){ 
     this.name = name; 
     this.age = age; 
     this.job = job; 
     this.sayName = sayName; 
    } 
    function sayName() { 
     console.log(this.name); 
    } 
    let person1 = new Person("Nicholas", 29, "Software Engineer"); 
    let person2 = new Person("Greg", 27, "Doctor"); 
    person1.sayName(); // Nicholas 
    person2.sayName(); // Greg
    在这里，sayName()被定义在了构造函数外部。在构造函数内部，sayName 属性等于全局 sayName()函数。因为这一次 sayName 属性中包含的只是一个指向外部函数的指针，所以 person1 和 person2共享了定义在全局作用域上的 sayName()函数。这样虽然解决了相同逻辑的函数重复定义的问题，但全局作用域也因此被搞乱了，因为那个函数实际上只能在一个对象上调用。如果这个对象需要多个方法，那么就要在全局作用域中定义多个函数。这会导致自定义类型引用的代码不能很好地聚集一起。这个新问题可以通过原型模式来解决。
此页目录
2025-01-13 日报 Day65
  1. 今日学习内容
  2. 今日笔记