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

  • 面向对象编程

    • 简介

    • 理解对象

    • 创建对象

      • 工厂模式
      • 构造函数模式
        • 构造函数模式
          • 将构造函数当作函数
          • 构造函数的问题
          • ES6 模块实现
      • 原型模式
      • 组合使用构造函数模式和原型模式
      • 动态原型模式
      • 寄生构造函数模式
      • 稳妥构造函数模式
  • UI组件

  • Plugin

  • Vue3

  • 性能优化

  • Axios

  • 状态管理

  • React

  • Mock

  • Icon

  • Template

  • 构建工具

  • 项目规范配置

  • Taro

  • SVG

  • React Native

  • 前端
  • 面向对象编程
  • 创建对象
HiuZing
2022-10-07
目录

构造函数模式

# 构造函数模式

ECMAScript 中的构造函数可用来创建特定类型的对象。像 Object 和 Array 这样的原生构造函数,在运行时会自动出现在执行环境中。此外,也可以创建自定义的构造函数,从而定义自定义对象类型的属性和方法。

function Person(name, age, job){
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayName = function(){
    console.log(this.name);
  }
}

const person1 = new Person('Ben', 21, 'student');
const person2 = new Person('Gray', 25, 'Doctor');
1
2
3
4
5
6
7
8
9
10
11

构造函数模式与工厂模式实现过程的区别:

  • 没有显式地创建对象
  • 直接将属性和方法赋给了 this 对象
  • 没有 return 语句

按照惯例,构造函数始终都应该以一个大写字母开头,而非构造函数则应该以一个小写字母开头。这个做法借鉴自其他 OO 语言,主要是为了区别于 ECMAScript 中的其他函数。因为构造函数本身也是函数,只不过可以用来创建对象而已。

# 将构造函数当作函数

构造函数与其他函数的唯一区别,就在于调用它们的方式不同。任何函数,只要同 new 操作符来调用,那它就可以作为构造函数;而任何函数,如果不同过 new 操作符来调用,那它跟普通函数也不会有什么两样。

# 构造函数的问题

使用构造函数,每个方法都要在每个实例上重新创建一遍。不要忘了,ECMAScript 中的函数就是对象,因此每定义一个函数,也就是实例化一个对象。

虽然两个实例中都拥有同名的方法函数,但是两个函数不是同一个 Function 的实例。

function Person(name, age, job){
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayName = new Function('console.log(this.name)');
  // 与声明函数在逻辑上是等价的
}
1
2
3
4
5
6
7

创建两个完全同样任务的 Function 实例的确没有必要,况且有 this 对象在,根本不用再执行代码前就把函数绑定到特定对象上面。把函数定义转移到构造函数外部来解决重复创建函数实例的问题。

function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayName = sayName;
}

function sayName(){
  console.log(this.name);
}

const person1 = new Person('Ben', 21, 'student');
const person2 = new Person('Gray', 25, 'Doctor');
1
2
3
4
5
6
7
8
9
10
11
12
13

在全局作用域中定义的函数实际上只能被某个对象调用,这让全局作用域有点名不副实。而更让人无法接受的是:如果对象需要定义很多方法,那么就要定义很多个全局函数,于是我们这个自定义的引用类型就丝毫没有封装性可言了。而这些问题可以通过 原型模式 (opens new window) 来解决。

# ES6 模块实现

class Person {
  constructor(name, age, job) {
    this.name = name;
    this.age = name;
    this.job = job;
  }

  sayName() {
    console.log(this.name);
  }
}
1
2
3
4
5
6
7
8
9
10
11
上次更新: 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 | 友情链接
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式