原型+原型链+原型继承

你想要那颗糖

于 2023-04-15 13:31:31 发布

阅读量143

点赞数 3

分类专栏： JavaScript 文章标签：原型模式

本文链接：https://blog.csdn.net/qq_50260510/article/details/130168667

版权

JavaScript 专栏收录该内容

63 篇文章 2 订阅

订阅专栏

本文详细介绍了JavaScript中的原型概念，包括构造函数的prototype属性、原型对象的作用、this的指向以及原型链的工作原理。通过实例展示了如何使用原型对象优化内存使用，以及如何利用原型实现继承。同时，文章提到了constructor属性的用途，以及instanceof运算符在检测原型链中的应用。最后，讨论了原型继承的实现方式和注意事项。

摘要由CSDN通过智能技术生成

一、原型对象

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

使用场景：可以解决：构造函数封装时函数（方法）会多次创建，占用内存的问题原型对象可以挂载函数，对象实例化不会多次创建原型对象里面的函数，节约内存

实例对象可直接访问原型对象中函数

执行过程：先找实例对象属性或函数，找不到会再找原型对象中属性或函数

1.2 原型对象的作用是什么？

可以把那些公共的属性和方法，直接定义在 prototype 对象上

实例对象可直接访问原型对象中属性和方法这些属性和方法不会多次内存中创建，从而节约内存

1.3 原型对象- this指向

构造函数和原型对象中的this 都指向实例化的对象

箭头函数不能做构造函数，因为箭头函数里面没有 this

原型对象里面的函数如果需要用到this，也不要用箭头函数

原型总结：

原型是我们创建函数的时候，系统帮我们自动生成的一个对象。主要作用是解决构造函数内部方法内存资源浪费问题。在开发中我们一般把实例对象一些通用的方法放入原型中，在 vue 里面有时候也会给 vue 的原型添加一些公共类方法来实现所有的组件中可以共享成员。像一些常见的$router和$store 都是挂载到 vue 的原型上的。

下面举个例子：

函数可以有属性。每个函数都有一个特殊的属性叫作原型prototype

控制台输出：

上面这个对象，就是大家常说的原型对象

可以看到，原型对象有一个自有属性constructor，这个属性指向该函数，如下图关系展示

代码分享：

<!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>原型对象</title>
</head>
<body>
  <script>
    function Person(name, age) {
      this.name = name
      this.age = age
      // this.sayHi = function() {
      //   console.log('你好哇')
      // }
    }

    // 原型对象:
    // 所有的构造函数都有一个属性: prototype
    // 它是一个对象, 所以我们称它为原型对象
    // console.log(Person.prototype)
    // 特点:
    // 1. 所有通过构造函数创建出来的实例对象, 都可以访问原型对象中的成员
    // 2. 实例对象创建时, 不会重复创建原型对象, 每个构造函数的原型对象是唯一的, 因为它是跟随构造函数走的
    // 3. 对象会优先找自己身上的属性和方法, 找不到才去原型上查找属性和方法, 就近原则
    Person.prototype.sayHi = function() {
      console.log('你好哇, 我是原型的 sayHi')
    }

    Person.prototype.name = '我是原型的名字'

    const zs = new Person('张三', 18)
    // zs.name = '张三'
    console.log(zs)
    zs.sayHi()
    
    const ls = new Person('李四', 19)
    // ls.name = '李四'
    console.log(ls)
    ls.sayHi()

    // 测试 zs.sayHi 和 ls.sayHi 是否为同一个 sayHi
    console.log(zs.sayHi === ls.sayHi)

    const arr = ['古力娜扎', '哈妮克孜']
    arr.push('迪丽热巴')
    console.log(arr)
    console.log(Array.prototype)

  </script>
</body>
</html>

效果展示：

案例分享：

1. 创建一个构造函数 Student

2. 学生需要具备姓名 / 年龄 / 性别属性

3. 所有的学生都是 90 期这个班级的

4. 所有的学生都具备学习的方法

<!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>原型对象</title>
</head>
<body>
  <script>
    // 1. 创建一个构造函数 Student
    // 2. 学生需要具备 姓名 / 年龄 / 性别 属性
    // 3. 所有的学生都是 90 期这个班级的
    // 4. 所有的学生都具备学习的方法

    function Student(name, age, gender) {
      this.name = name
      this.age = age
      this.gender = gender
      // 公共属性不要放在实例身上
      // this.class = 90
    }

    // 公共的属性和方法放在原型上!!!
    Student.prototype.class = 90

    Student.prototype.study = function() {
      console.log('我爱学习')
    }
    
    const s1 = new Student('大张伟', 18, '男')
    const s2 = new Student('周杰伦', 18, '男')

    Student.prototype.class = 89

    console.log(s1.class)
    s1.study()
    console.log(s2.class)
    s2.study()

    console.log(s1.study === s2.study)
  </script>
</body>
</html>

效果展示：

代码分享3：

<!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>原型对象中的this指向</title>
</head>
<body>
  <script>
    function Person(name, age) {
      this.name = name
      this.age = age
    }

    // 原型对象中方法的 this 指向: 调用者, 实例对象
    Person.prototype.sayHi = function() {
      console.log('你好哇, 我是' + this.name)
      console.log(this)
    }

    // console.log(this)
    // Person.prototype.sayHi = () => {
    //   // 此时 this 指向 window
    //   console.log('你好哇, 我是' + this.name)
    //   console.log(this)
    // }

    // 注意事项:
    // 1. 构造函数不能是箭头函数, 因为箭头函数的 this 指向和当前环境有关
    // 2. 原型的函数要根据情况判断, 如果用了箭头函数意味着 this 不再指向实例对象

    const zs = new Person('张三', 18)
    zs.sayHi()
    
    const ls = new Person('李四', 19)
    ls.sayHi()
  </script>
</body>
</html>

效果展示：

案例分享4：给数组扩展求最大值方法和求和方法

<!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>数组扩展</title>
</head>
<body>
  <script>
    const arr = [1, 2, 3]
    const arr2 = [10, 20, 30]
    // 求最大值方法应该加在原型对象上, 让所有的数组都具备求最大值的能力
    Array.prototype.max = function() {
      // 怎么求最大值?
      // ... 展开运算符
      return Math.max(...this)
    }

    // 此处给原型加方法, 可以用箭头函数吗?
    // 不可以
    Array.prototype.sum = function() {
      return this.reduce((prev, item) => prev + item, 0)
    }

    console.log(arr.max())
    console.log(arr2.max())
    console.log(arr.sum())
    console.log(arr2.sum())

  </script>
</body>
</html>

效果展示：

二、constructor 属性

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

三、原型链

__proto__属性链状结构称为原型链

作用：原型链为对象成员查找机制提供一个方向，或者说一条路线

3.2 原型链的查找规则：

当访问一个对象成员(属性/方法)时，首先查找这个对象自身有没有该成员(属性/方法)

如果没有就查找它的原型对象（也就是 __proto__指向的 prototype 原型对象）

如果还没有就查找原型对象的原型对象（Object的原型对象）

依此类推一直找到 Object 为止（null）

原型链就在于为对象成员查找机制提供一个方向，或者说一条路线

注意：

__proto__ 原先是 JS非标准属性，但是 es6 规范中开始标准化， [[prototype]]和__proto__意义相同

尽量不要修改这个属性，对性能影响非常严重的

约定： prototype 原型对象而 __proto__ 原型

原型链总结：

原型链是 js 对象一种查找机制，遵循就近原则。当我们访问一个对象中的成员的时候，会优先访问自己的，如果自己没有就访问原型的，如果原型也没有就会访问原型的原型，直到原型链的终点 null. 如果还没有，此时属性就会获取 undefined，方法就会报错 xxx is not a function。一般原型链主要是用来实现面向对象继承的。

原型对象也可能拥有原型，并从中继承方法和属性，一层一层、以此类推。这种关系常被称为原型链 (prototype chain)，它解释了为何一个对象会拥有定义在其他对象中的属性和方法。在对象实例和它的构造器之间建立一个链接（它是__proto__属性，是从构造函数的prototype属性派生的），之后通过上溯原型链，在构造器中找到这些属性和方法

3.3 原型链- instanceof 运算符

实例对象 instanceof 构造函数

作用：用来检测构造函数.prototype 是否存在于实例对象的原型链上

代码分享：

<!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>instanceof 运算符</title>
</head>
<body>
  <script>
    function Person(name, age) {
      this.name = name
      this.age = age
    }
    const zs = new Person('张三', 18)

    // 简单版本:
    // instanceof 运算符返回结果是布尔值
    // instance 实例  a of b   b 的 a
    // a instanceof b   a 是 b 的实例对象吗?
    // 对象 instanceof 构造函数, 是指当前对象是不是构造函数的实例对象 (只可简单理解, 不可外传, 自己知道就行)
    console.log(zs instanceof Person) // true

    const arr = []
    console.log(arr.__proto__)

    // 精确的判断引用数据类型
    console.log(arr instanceof Array) // true
    console.log(zs instanceof Array) // false

    // 理解原理:
    // 对象 instanceof 构造函数, 判断构造函数的原型对象是否在实例对象的原型链上
    // true 万物皆对象
    console.log(arr instanceof Object) // true
    console.log(zs instanceof Object) // true

    // 总结:
    // instanceof 一般可用于判断具体的引用数据类型, 比 typeof 更准确, typeof 一般只用于判断基本数据类型
    // 对象 instanceof 构造函数, 判断构造函数的原型对象是否在实例对象的原型链上
    // 也可以通俗的理解为, 当前的对象, 是否是构造函数原型底下的孩子

    // // 通常会对变量的值进行判断
    // // 判断是否为 string 类型
    // console.log(typeof arr === 'string')
    // // 同理判断 布尔 / 数值 等基本数据类型, 均可这样判断
    
    // // 但是判断数组呢?
    // console.log(typeof [])
    // // 判断日期对象呢?
    // // Date()
    // const d = new Date()
    // console.log(typeof d)
    // // typeof 判断引用数据类型都是 object
    // // 所以无法精确的判断是否为数组 / 日期对象

  </script>
</body>
</html>

效果展示：

四、原型继承

继承是面向对象编程的另一个特征。龙生龙、凤生凤、老鼠的儿子会打洞描述的正是继承的含义有些公共的属性和方法可以写到父级身上，子级通过继承也可以使用这些属性和方法 JavaScript 中大多是借助原型对象实现继承的特性

代码分享：

<!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>原型继承</title>
</head>
<body>
  <script>
    function Man() {
      // this.eyes = 2
      // this.eat = function() {
      //   console.log('我会吃饭')
      // }
    }
    // Man.prototype.eyes = 2
    // Man.prototype.eat = function() {
    //   console.log('我会吃饭')
    // }

    function Woman() {
      // this.eyes = 2
      // this.eat = function() {
      //   console.log('我会吃饭')
      // }
    }
    // Woman.prototype.eyes = 2
    // Woman.prototype.eat = function() {
    //   console.log('我会吃饭')
    // }

    // 不要用字面量创建对象后赋值给原型, 因为多个构造函数的原型对象指向同一个对象, 会导致修改时都修改, 应该每个构造函数的原型对象各自独立
    // const person = {
    //   eyes: 2,
    //   eat() {
    //     console.log('我会吃饭')
    //   }
    // }

    // 原型继承
    // Man.prototype = person
    // Woman.prototype = person
    
    // 创建一个 Person 构造函数, 将公共的方法放在 Person 构造函数的原型对象中
    // 将公共的属性放在 Person 的实例对象中
    function Person() {
      this.eyes = 2
    }
    Person.prototype.eat = function() {
      console.log('我会吃饭')
    }

    Man.prototype = new Person()
    Man.prototype.constructor = Man
    Woman.prototype = new Person()
    Woman.prototype.constructor = Woman
    // console.log(Man.prototype)

    Woman.prototype.baby = function() {
      console.log('我能生娃!')
    }

    const m1 = new Man()
    m1.eat()
    // m1.baby()
    console.log(m1.eyes)
    const w1 = new Woman()
    w1.eat()
    w1.baby()
    console.log(w1.eyes)

    // 原型继承总结:
    // 1. 创建父级构造函数
    // 2. 将所有公共的方法放到父级的原型对象上
    // 3. 将子级构造函数的原型对象 指向 父级构造函数 创建的 实例对象
    // Man.prototype = new Person()
    </script>
</body>
</html>

综合案例：面试题分享

<!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>面试题</title>
</head>

<body>
  <script>
    function Foo() {
      getName = function () {
        alert(1)
      }
      return this
    }

    Foo.getName = function () {
      alert(2)
    }

    Foo.prototype.getName = function () {
      alert(3)
    }

    var getName = function () {
      alert(4)
    }

    function getName() {
      alert(5)
    }

    Foo.getName() // 2
    getName() // 4
    Foo().getName() // 1
    getName() // 1
    new Foo().getName() // 3
  </script>
</body>

</html>