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;
  this.friends = ['Amy', 'Ben'];
}

// 原型模式
Person.prototype = {
  constructor: Person,
  sayName: function(){
    console.log(this.name);
  }
}

const uzi = new Person('Uzi', 22, 'Software Engineer');
const tom = new Person('Tom', 25, 'Doctor');

uzi.friends.push('Peter');
console.log(uzi.friends);
// 'Amy,Ben,Peter'
console.log(tom.friends);
// 'Amy,Ben'

console.log(uzi.friends == tom.friends);
// false
console.log(uzi.sayName == tom.sayName);
// true
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

在这个例子中,实例属性都是在构造函数中定义的,而由所有实例共享的属性 constructor 和方法 sayName() 则是在原型中定义的。而修改了 uzi.friends(向其中添加一个新字符串),并不会影响到 tom.friends,因为它们分别引用了不同的数组。

上次更新: 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 | 友情链接
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式