【面向对象】2. 原型与原型链的举例理解_面象对象中的原型和原型链-CSDN博客

文章目录

1. 前言
2. 封装性
3. 原型
- 3.1 原型对象
- 3.2 构造函数和原型中的this如何指向
4. 原型对象中的 constructor 属性
5. 对象原型
6. 对象原型中的 constructor 属性
7. 上述总结
8. 原型继承
9. 原型链

1. 前言

JavaScript 中大多数情况下都是面向过程编程的，但是也有面向对象编程的情况。那么我们知道面向过程和面向对象这两种编程思想的区别吗？

(1)面向过程编程

面向过程编程（Procedural Programming）是一种编程范式，它强调程序的执行流程，通过一系列函数或过程的调用来完成任务。面向过程编程以“如何做”为核心，将问题分解成一系列步骤，每个步骤由一个函数或过程来实现。

‌特点‌：

关注解决问题的步骤和过程。
程序由一系列顺序执行的函数或过程组成。
数据和函数相对独立，函数主要对操作的数据进行处理。

(2)面向对象编程

面向对象编程（Object-Oriented Programming，OOP）是一种编程范式，它以“对象”为核心，通过封装、继承、多态等特性来组织代码。OOP将数据和操作数据的方法封装在一起，形成一个独立的实体——对象。

‌特点‌：

强调对象的概念，对象具有属性和方法。
通过封装、继承、多态等特性提高代码的可维护性、可复用性和可扩展性。
程序由多个对象之间的交互来完成任务。

2. 封装性

封装是面向对象思想中比较重要的一部分，js中面向对象可以通过构造函数实现封装，通过构造函数创建的对象是彼此独立，互不影响的。

// 构造函数 公共的属性和方法封装到 Star 构造函数中，每个实例都可以访问这些属性和方法。
function Star(name, age) {
      this.name = name
      this.age = age
      this.sing = function (song) {
           console.log(song)
      }
}
 
const a = new Star('张三', 18)
const b = new Star('李四', 20)

console.log(a.sing === b.sing) // false

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

浪费内存问题的说明

比如上述的 Star 构造函数中有一个方法 sing，通过 a 和 b 分别来调用这个方法，按道理它们调用的都是同一个对象中的方法，应是一样的，a.sing === b.sing 结果却是 false。

原因是 sing 这个属性是复杂数据类型，第一次 new 时，会在栈中存的是地址，第二次 new 时，存的也是地址，两次的地址是不同的。

在这里插入图片描述

所以由上述可知，两个实例的对象，调用的 sing 方法的代码是一模一样的，却反复开内存，所以会存在内存浪费的现象，那么我们如何解决这个问题呢？下面将介绍原型对象来解决这个问题…

3. 原型

3.1 原型对象

每一个构造函数都有一个 prototype 属性，指向另一个对象，所以我们也称为原型对象。

这个原型对象可以挂载函数，所以我们对象实例化就不会多次创建原型上的函数了，节约内存。我们可以把那些不变的方法，直接定义再 prototype 对象上，这样所有的实例就可以共享这些方法了。

Star.prototype.dance = function () {
    console.log('跳舞')
}
console.log(a.dance === b.dance) // true

总结：公共的属性写到构造函数中，公共的方法写到原型对象上。

3.2 构造函数和原型中的this如何指向

let that1, that2
function Star(name, age) {
     that1 = this
     this.name = name
     this.age = age
     this.sing = function (song) {
         console.log(song)
     }
}

Star.prototype.dance = function () {
     that2 = this
     console.log('跳舞')
}
 
const a = new Star('张三', 18)
a.dance()

console.log(that1 === a)  // true  所以构造函数中的this指向实例对象
console.log(that2 === a)  // true  所以原型对象中的this指向实例对象

构造函数中的this指向实例对象，原型对象中的this也指向实例对象。

4. 原型对象中的 constructor 属性

每个原型对象都有 constructor 属性，该属性指向原型对象的构造函数。

function Star() {
 
 }
 
const a = new Star()
console.log(Star.prototype.constructor === Star)  // true;

(1)当我们遇到这种情况是，需要在原型上挂载很多方法时，每次都要重复写。

function Star() {}

Star.prototype.sing = function () {}
Star.prototype.dance = function () {}

(2)为了解决上述的麻烦，我们可以这样写。但是按道理原型对象中有constructor属性，但是按照上述这样的写法是，却没有了constructor属性。

function Star() {}
console.log(Star.prototype) // {constructor: f}

Star.prototype = {
    sing: function () {},
    dance: function () {}
}
console.log(Star.prototype) // {sing: f, dance: f}

(3)主要的原因是因为你给原型对象赋值了，找不到它属于哪个构造函数了，我们可以这样解决。

function Star() {}

Star.prototype = {
    constructor: Star,
    sing: function () {},
    dance: function () {}
}

5. 对象原型

在上述的介绍中，可以将一些共享的方法和属性绑定在原型对象身上，那么我们实例化的对象为什么就可以直接用这些属性和方法呢？那就是因为每一个实例化的对象中都有一个属性 __proto__, 指向构造函数的原型对象，我们称为对象原型。

function Star() {}
const a = new Star()
console.log(a.__proto__)  // {constructor: f}
console.log(a.__proto__ === Star.prototype)  // true

6. 对象原型中的 constructor 属性

对象原型中也有constructor属性，也是指向创建实例对象的构造函数。

function Star() {
 
}
const a = new Star()
console.log(a.__proto__)
console.log(a.__proto__.constructor === Star)  // true;

7. 上述总结

在这里插入图片描述

8. 原型继承

js中大多数是利用原型对象来实现面向对象的继承性

(1)比如我们创建两个构造函数 Man() 和 Woman()

function Man() {
      this.eyes = 2,
      this.head = 1
}
 
const m = new Man()
console.log(m)
 
function Woman() {
    this.eyes = 2,
    this.head = 1
}
const wm = new Woman()
console.log(wm)

(2)但是我们能发现不管 man 还是 woman，还是其它…, 这些属性都是一样的，所以我们可以将这些属性抽取出来封装成一个对象 Person，给构造函数添加上Person中全局且共享的属性。

// 原型继承
function Person() {
    this.eyes = 2
    this.head = 1
}
 
// man
function Man() {}
Man.prototype = new Person()
Man.prototype.constructor = Man
Man.prototype.run = function () {}

const m = new Man()
console.log(m)
 
// woman
function Woman() {}
Woman.prototype = new Person()
Woman.prototype.constructor = Woman

const wm = new Woman()
console.log(wm)