JavaScript进阶核心知识（3）

深入理解JavaScript编程思想及其相关概念

JavaScript是一门多范式的编程语言，支持面向过程、面向对象和函数式编程思想。本文将详细探讨这些编程思想，并深入讲解JavaScript中的构造函数和原型对象。

1. 编程思想

1.1 面向过程

面向过程是一种以过程（即函数）为中心的编程思想，强调算法和步骤。代码按照从上到下的顺序执行，注重过程和逻辑的顺序。

优点

• 简单直观，容易理解。
• 适合小型项目和任务。

缺点

• 不适合大型项目，代码可读性和维护性差。
• 代码复用性低，难以扩展。

例子

在生活中，面向过程可以类比为烹饪食谱：按顺序一步步执行步骤。

// 计算两个数的和
function add(a, b) {
    return a + b;
}

const result = add(5, 3);
console.log(result); // 输出: 8

1.2 面向对象

面向对象是一种以对象为中心的编程思想，强调将数据和操作封装在对象内部。对象通过方法相互作用，具备封装、继承和多态等特性。

优点

• 更好的代码组织和结构，适合大型项目。
• 高度可扩展和可维护性。
• 代码复用性高。

缺点

• 理解和实现复杂度高。
• 初始设计需要较多时间和精力。

例子

在生活中，面向对象可以类比为一个汽车：汽车（对象）有属性（如颜色、品牌）和方法（如启动、刹车）。

// 定义一个Car类
function Car(brand, color) {
    this.brand = brand;
    this.color = color;
    this.drive = function() {
        console.log(`${this.brand} is driving.`);
    };
}

const myCar = new Car('Toyota', 'Red');
myCar.drive(); // 输出: Toyota is driving.

JavaScript的编程思想

JavaScript是一门多范式编程语言，支持面向过程、面向对象和函数式编程。开发者可以根据具体需求选择合适的编程范式。

2. 构造函数

构造函数是一种特殊的函数，用于创建和初始化对象。构造函数体现了面向对象的封装特性。

2.1 构造函数体现了面向对象的封装特性

构造函数将对象的属性和方法封装在一起，创建对象实例时自动初始化这些属性和方法。

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.greet = function() {
        console.log(`Hello, my name is ${this.name}.`);
    };
}

const john = new Person('John', 30);
john.greet(); // 输出: Hello, my name is John.

2.2 构造函数实例创建的对象彼此独立、互不影响

每次调用构造函数创建的对象实例都是独立的，互不影响。

const alice = new Person('Alice', 25);
const bob = new Person('Bob', 28);

alice.greet(); // 输出: Hello, my name is Alice.
bob.greet(); // 输出: Hello, my name is Bob.

2.3 构造函数方法很好用，但存在浪费内存的问题

构造函数中的方法每次实例化对象时都会创建一份新的副本，浪费内存。

console.log(alice.greet === bob.greet); // 输出: false，每个实例都有自己独立的greet方法

3. 原型对象

JavaScript中的每个函数都有一个prototype属性，它指向一个对象，这个对象包含可以由该构造函数的所有实例共享的属性和方法。构造函数和原型对象中的this 都指向 实例化的对象。

3.1 constructor属性

prototype对象包含一个constructor属性，指向构造函数本身。

function Animal(name) {
    this.name = name;
}

console.log(Animal.prototype.constructor === Animal); // 输出: true

如果有原型对象有多个方法，我们可以给原型对象采取对象形式赋值。
但是这样就会覆盖构造函数原型对象原来的内容，这样修改后的原型对象 constructor 就不再指向当前构造函数了。
此时，我们可以在修改后的原型对象中，添加一个 constructor 指向原来的构造函数。

思考
构造函数可以创建实例对象，构造函数还有一个原型对象，一些公共的属性或者方法放到这个原型对象身上。
但是 为啥实例对象可以访问原型对象里面的属性和方法呢？

3.2 对象原型

对象通过__proto__属性指向其构造函数的原型对象。

const cat = new Animal('Cat');
console.log(cat.__proto__ === Animal.prototype); // 输出: true

注意

• __proto__ 是JS非标准属性
• [[prototype]]和__proto__意义相同
• 用来表明当前实例对象指向哪个原型对象prototype
• __proto__对象原型里面也有一个 constructor属性，指向创建该实例对象的构造函数
  

3.3 原型继承

继承是面向对象编程的另一个特征，通过继承进一步提升代码封装的程度，JavaScript 中大多是借助原型对象实现继承的特性。

龙生龙、凤生凤、老鼠的儿子会打洞描述的正是继承的含义。

<script>
    function Person() {
      this.eyes = 2
      this.head = 1
    }
    // 女人  构造函数   继承  想要 继承 Person
    function Woman() {

    }
    // Woman 通过原型来继承 Person
    // 父构造函数（父类）   子构造函数（子类）
    Woman.prototype =  Person()   // {eyes: 2, head: 1} 
    // 指回原来的构造函数
    Woman.prototype.constructor = Woman

    // 给女人添加一个方法  生孩子
    Woman.prototype.baby = function () {
      console.log('宝贝')
    }
    const red = Woman()
    console.log(red)
    // console.log(Woman.prototype)
    // 男人 构造函数  继承  想要 继承 Person
    function Man() {

    }
    // 通过 原型继承 Person
    Man.prototype = Person()
    Man.prototype.constructor = Man
    const pink = Man()
    console.log(pink)
  </script>

但是随之我们也发现一个问题，给其中一个实例对象增加新的方法，另外一个实例对象也自动添加上了此方法（如果我们给男人添加了一个吸烟的方法，发现女人自动也添加这个方法），为什么呢？

解决：
需求：男人和女人不要使用同一个对象，但是不同对象里面包含相同的属性和方法
答案：构造函数
new 每次都会创建一个新的对象

<script>
    // 构造函数  new 出来的对象 结构一样，但是对象不一样
    function Person() {
      this.eyes = 2
      this.head = 1
    }
    // console.log(new Person)
    // 女人  构造函数   继承  想要 继承 Person
    function Woman() {

    }
    // Woman 通过原型来继承 Person
    // 父构造函数（父类）   子构造函数（子类）
    // 子类的原型 =  new 父类  
    Woman.prototype = new Person()   // {eyes: 2, head: 1} 
    // 指回原来的构造函数
    Woman.prototype.constructor = Woman

    // 给女人添加一个方法  生孩子
    Woman.prototype.baby = function () {
      console.log('宝贝')
    }
    const red = new Woman()
    console.log(red)
    // console.log(Woman.prototype)
    // 男人 构造函数  继承  想要 继承 Person
    function Man() {

    }
    // 通过 原型继承 Person
    Man.prototype = new Person()
    Man.prototype.constructor = Man
    const pink = new Man()
    console.log(pink)
  </script>

3.4 原型链

JavaScript中的对象通过原型链实现继承。如果对象在自身属性中找不到某个属性或方法，会沿着原型链向上查找。

原型链-查找规则
① 当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性。
② 如果没有就查找它的原型（也就是 __proto__指向的 prototype 原型对象）
③ 如果还没有就查找原型对象的原型（Object的原型对象）
④ 依此类推一直找到 Object 为止（null）
⑤ __proto__对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线
⑥ 可以使用 instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上

 <script>
    // function Objetc() {}
    console.log(Object.prototype) //Object
    console.log(Object.prototype.__proto__)//null

    function Person() {

    }
    const ldh = new Person()
    console.log(ldh.__proto__ === Person.prototype)//true
    console.log(Person.prototype.__proto__ === Object.prototype)//true
    console.log(ldh instanceof Person)//true
    console.log(ldh instanceof Object)//true
    console.log(ldh instanceof Array)//false
    console.log([1, 2, 3] instanceof Array)//true
    console.log(Array instanceof Object)//true
  </script>

总结

本文详细介绍了JavaScript的编程思想，包括面向过程和面向对象的优缺点。通过构造函数和原型对象的讲解，展示了JavaScript如何实现面向对象的封装、继承和多态。理解这些概念和机制，有助于编写更高效、可维护和可扩展的JavaScript代码。