Blog
首页
文档
收藏
关于
  • 在线转换时间戳 (opens new window)
  • 在线压缩图片 (opens new window)
  • Float-Double转二进制 (opens new window)
  • 文件转Hex字符串 (opens new window)

HiuZing

🍑
首页
文档
收藏
关于
  • 在线转换时间戳 (opens new window)
  • 在线压缩图片 (opens new window)
  • Float-Double转二进制 (opens new window)
  • 文件转Hex字符串 (opens new window)
  • 前端面试题

  • JavaScript

  • Vue2

  • port

  • CSS

  • Node.js

  • JavaScript优化

  • uniapp

  • Mini Program

  • TypeScript

  • 面向对象编程

    • 简介

    • 理解对象

    • 创建对象

      • 工厂模式
      • 构造函数模式
      • 原型模式
      • 组合使用构造函数模式和原型模式
      • 动态原型模式
      • 寄生构造函数模式
      • 稳妥构造函数模式
  • UI组件

  • Plugin

  • Vue3

  • 性能优化

  • Axios

  • 状态管理

  • React

  • Mock

  • Icon

  • Template

  • 构建工具

  • 项目规范配置

  • Taro

  • SVG

  • React Native

  • 前端
  • 面向对象编程
  • 创建对象
HiuZing
2022-10-08

动态原型模式

# 动态原型模式

动态原型模式将所有信息都封装在构造函数中,而通过构造函数中初始化原型(仅第一个对象实例化时初始化原型),这个可以通过判断该方法是否有效而选择是否需要初始化原型。

function Person(name, age, job) {
  // 属性
  this.name = name;
  this.age = age;
  this.job = job;

  // 方法(动态插入原型方法)
  if (typeof this.sayName != 'function'){
    Person.prototype.sayName = function(){
      console.log(`I'm ${this.name}`);
    }
  }
}

const uzi = new Person('Uzi', 2, 'E-Sports Player');

uzi.sayName();
// 'I'm Uzi'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

这里只在 sayName() 方法不存在的情况下,才会将它添加到原型中。这段代码只会在初次调用构造函数时才会执行。此后,原型已经完成初始化,不需要再做什么修改了。不过要记住,这里对原型所做的修改,能够立即在所有实例中得到反映。

使用动态原型模式时,不能使用对象字面量重写原型。如果在已经创建了实例的情况下重写原型,那么就会切断现有实例与新原型之间的联系。

上次更新: 2024/08/14, 04:14:33
组合使用构造函数模式和原型模式
寄生构造函数模式

← 组合使用构造函数模式和原型模式 寄生构造函数模式→

最近更新
01
React Native 使用SVG
08-13
02
Docker基础命令
08-04
03
算数逻辑单元
07-30
更多文章>
Theme by Vdoing | Copyright © 2021-2024 WeiXiaojing | 友情链接
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式