JS的构造函数模式

news/2024/5/18 22:44:34 标签: Javscript, 构造函数

文章目录

  • 原型模式
  • 动态原型模式

原型模式

在JS中,每一个函数被定义之后,就会为这个函数创建一个prototype属性,该属性指向了这个函数的原型对象。

那原型对象能在对象的构造中发挥多大的作用呢?先看一个例子

function Person(){
    this.name = 'Tom';
    this.age = 22;
    this.sayHi = function(){
        console.log('Hello');
    }
}

let personA = new Person();
let personB = new Person();

console.log(personA.sayHi === personB.sayHi);   //false

可以看到创建的两个person对象的sayHi方法是不一样的,这就意味着每一次Person类的实例被创建都要重新创建一遍sayHi方法,这十分浪费时间跟空间。

而引入原型对象之后,就可以比较好的解决这个问题。

function Person(){
    this.name = 'Tom';
    this.age = 22;
}

Person.prototype.sayHi = function(){
    console.log('Hello');
};

let personA = new Person();
let personB = new Person();

console.log(personA.sayHi === personB.sayHi);   //true

通过原型对象可以在多个实例之间共享一些属性而不必重复创建。

然而使用原型对象也会存在问题,如下面的例子

function Person(){
    this.name = 'Tom';
    this.age = 22;
}

Person.prototype={
    constructor: Person,
    friends: []
};

let personA = new Person();
let personB = new Person();

personA.friends.push('Paul');
console.log(personB.friends);   //['Paul']

在原型中定义了一个friends数组,我用personA来访问friends数组并往里添加了一个’Paul’。然而,在访问personB的friends数组的时候,发现也有’Paul’。

这是因为原型对象解决的就是一个共享的问题,然而成也共享,败也共享。原型对象可能会让一些不需要实例间共享的属性被共享。

解决方法也很简单,只要我们不把不想被共享的属性放进原型对象里就可以了。

动态原型模式

把构造方法和原型对象分开写可能不够优雅,那么动态原型模式就是一种较为优雅的解决方案。

function Person(name, age){
    this.name = name;
    this.age = age;
    
    if(typeof this.saiHi != 'Function'){
        Person.prototype.sayHi = function(){
            console.log('Hello');
        }
    }
}

这个构造函数仅会在第一次调用的时候设置原型对象,因为第一次设置完了之后原型对象上就有了sayHi这个方法。


http://www.niftyadmin.cn/n/1700877.html

相关文章

c#生成静态库_C语言静态库的制作与使用

静态库是指在我们的应用中,有一些公共代码是需要反复使用,就把这些代码编译为“库”文件;在链接步骤中,连接器将从库文件取得所需的代码,复制到生成的可执行文件中的这种库。静态库在程序开发工作中,经常会…

怎么让图标曲线平滑_今日带你认识PS绘制美味的冰淇淋图标

在本教程中,我们将学习如何在Photoshop中绘制美味的冰淇淋图标。我们将使用Photoshop中的内置矢量形状来实现此结果。试试做做看!效果图步骤1:准备画布我们将首先制作一个大小为400 px300 px的新文件。第2步单击添加调整图层图标,…

CISCO DHCP根据MAC绑定IP

ip dhcp pool zrq1host 192.168.18.14 255.255.255.0client-identifier 01c8.bcc8.d147.36 mac在windows里是没有01的,加上01,然后每4位用一个点分隔如果要立即生效,需要清空路由器自动分配ip的缓存。命令:clear ip dhcp bin…

JS与DOM

文章目录DOM节点Node类型节点关系操作节点Document类型文档的子节点文档信息查找元素特殊集合Element类型HTML元素获取、设置、移除属性DOM节点 DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。 文档节点是每个文档的根节点,在HTML中,文档…

struts2中配置全局日期类型转换器

1.编写一个类,继承StrutsTypeConverter,实现其中的convertFromString和convertToString方法,该类如下: package me.edu.utils;import java.text.DateFormat; import java.text.ParseException; import java.text.SimpleDateFormat…

Linux-vim与gdb与make/makefile

三个模式:命令模式 文本模式 底行模式 yum :instell 安装 remove 卸载 gcc -o执行后生成文件命名 gcc 1.c -o fst.out -E预编译 -S汇编 -c生成机器码 Linux 中 静态库:.a;动态库:.so Linux默认动态库,…

smtp用户名与实际地址不一致_公司注册地址和实际的办公地址不一致会怎么样?有办法补救吗?...

不同城市对于注册地址的要求不一样,所以应该以当地的工商局要求为准,《公司法》规定注册地址和实际地址必须一致。如果注册地址和实际的办公地址不一样会有什么风险吗?地址不一样应该怎么解决才能避免处罚?公司注册地址和实际办公…

如何在思维导图软件发送错误时发送错误报告

当用户在XMind思维导图软件在使用的过程中发现问题或者漏洞是,可以将这些信息反馈到我们的XMind团队,我们将会尽快的帮助用户解决问题或修补漏洞,给您带去更好的用户体验,那么怎样去发送XMind软件的错误报告信息。 第一步 首先打开…