javascript从入门到跑路—–小文的js学习笔记(27)—–对象模式—-工厂模式、构造函数模式、原型模式、组合使用构造器和原型模式以及 动态原型模式

时间:2020-9-6 作者:admin


**
javascript从入门到跑路—–小文的js学习笔记(1)———script、alert、document。write() 和 console.log 标签

javascript从入门到跑路—–小文的js学习笔记(2)——— 语法构成、关键字和保留字、变量

javascript从入门到跑路—–小文的js学习笔记(3)———javascript中的几种数据类型


javascript从入门到跑路—–小文的js学习笔记目录
**

       关注我,我们一起学习进步。

1、工厂模式

工厂模式 可以简单理解为在函数内部创建了一个新的空对象,并为其添加属性和方法。

举个栗子:这便是我们 对象创建于函数内部并为其添加属性和方法
javascript从入门到跑路-----小文的js学习笔记(27)-----对象模式----工厂模式、构造函数模式、原型模式、组合使用构造器和原型模式以及 动态原型模式
然后当然我们可以进行调用。
javascript从入门到跑路-----小文的js学习笔记(27)-----对象模式----工厂模式、构造函数模式、原型模式、组合使用构造器和原型模式以及 动态原型模式
执行结果:显然调用的的对象 dx 的name 属性和上面的一样 。
javascript从入门到跑路-----小文的js学习笔记(27)-----对象模式----工厂模式、构造函数模式、原型模式、组合使用构造器和原型模式以及 动态原型模式
下面你可以一直调用,虽然他们的 属性和方法是一样,但是他们的方法不相等 ,即每一个都是一个独立的个体对象属性共享 方法不共享 。这也是工厂模式的缺点

缺点: 虽然new的是共同的一个函数,但是其中的方法做对比,返回false,也就意思说,new的函数,中的方法,不是共享(不是同一个地址).

举个栗子:
javascript从入门到跑路-----小文的js学习笔记(27)-----对象模式----工厂模式、构造函数模式、原型模式、组合使用构造器和原型模式以及 动态原型模式
执行结果:你可以看到这里是false
javascript从入门到跑路-----小文的js学习笔记(27)-----对象模式----工厂模式、构造函数模式、原型模式、组合使用构造器和原型模式以及 动态原型模式

2、构造函数模式

       构造函数模式和工厂模式具有共同的 缺点,都是 虽然new的是共同的一个函数,但是其中的方法做对比,返回false,也就意思说,new的函数,中的方法,不是共享(不是同一个地址). ,但是他们还是有些不同的地方。

(1):构造函数模式不需要在内部创建对象。
(2):构造函数模式 函数的首字母要大写。
(3):构造函数模式 内写的方法和属性前用 this

举个栗子:
javascript从入门到跑路-----小文的js学习笔记(27)-----对象模式----工厂模式、构造函数模式、原型模式、组合使用构造器和原型模式以及 动态原型模式
执行结果:你可以看到依旧还是我们100斤重的大鸭子
javascript从入门到跑路-----小文的js学习笔记(27)-----对象模式----工厂模式、构造函数模式、原型模式、组合使用构造器和原型模式以及 动态原型模式

3、原型模式

     (1)每当我们创建一个函数,都有一个prototype 属性

举个栗子:

javascript从入门到跑路-----小文的js学习笔记(27)-----对象模式----工厂模式、构造函数模式、原型模式、组合使用构造器和原型模式以及 动态原型模式
这是随便一个函数,然后它都会有 这样一个 prototype 属性
javascript从入门到跑路-----小文的js学习笔记(27)-----对象模式----工厂模式、构造函数模式、原型模式、组合使用构造器和原型模式以及 动态原型模式
(2)而我们(prototype)原型这个属性的指针指向一个对象,而这个对象的 属性和方法就可以为其他的对象而共享。
javascript从入门到跑路-----小文的js学习笔记(27)-----对象模式----工厂模式、构造函数模式、原型模式、组合使用构造器和原型模式以及 动态原型模式
执行结果:同样弹出来了 大鸭子
javascript从入门到跑路-----小文的js学习笔记(27)-----对象模式----工厂模式、构造函数模式、原型模式、组合使用构造器和原型模式以及 动态原型模式
然后我们来比较方法,你可以发现
javascript从入门到跑路-----小文的js学习笔记(27)-----对象模式----工厂模式、构造函数模式、原型模式、组合使用构造器和原型模式以及 动态原型模式
执行结果:你可以发现是true了
javascript从入门到跑路-----小文的js学习笔记(27)-----对象模式----工厂模式、构造函数模式、原型模式、组合使用构造器和原型模式以及 动态原型模式

因为 原型(prototype) 是共享所有的属性和方法,他们的 方法是共享的,共同使用的一个地址,所以做对比的话 是true ,这样有利于节省内存。

缺点: 但是它也有它的缺点,因为是共用的一个地址,那么只要其中有一个的属性改变,那么其他的所有相同的属性也将随之改变。

4、组合使用构造器和原型模式

       上面第三点我们学到的 原型模式 。因为所有的 属性和方法都是共享的,所以一旦有一个示例 进行更改,那么所有示例的属性和方法都将改变。

这就不方便我们展开工作,所以我们就需要做出区分,用构造函数的形式+原型的形式 来 实现某些是共享的 ,而某些为非共享的 ,改变单个示例并不会改变所有实例。

举个栗子:
javascript从入门到跑路-----小文的js学习笔记(27)-----对象模式----工厂模式、构造函数模式、原型模式、组合使用构造器和原型模式以及 动态原型模式
执行结果:可以看出我们方法是共享的
javascript从入门到跑路-----小文的js学习笔记(27)-----对象模式----工厂模式、构造函数模式、原型模式、组合使用构造器和原型模式以及 动态原型模式
然后我们修改dx 的属性
javascript从入门到跑路-----小文的js学习笔记(27)-----对象模式----工厂模式、构造函数模式、原型模式、组合使用构造器和原型模式以及 动态原型模式
执行结果:这个时候你可以看到只有第一只鸭子长胖了,到了100kg 而第二只鸭子仍保持不变,这就是上面用构造的形式写的不共享的 属性
javascript从入门到跑路-----小文的js学习笔记(27)-----对象模式----工厂模式、构造函数模式、原型模式、组合使用构造器和原型模式以及 动态原型模式

优点,每一个 new 出来的 示例都会有他自己的一份属性,但是又同时共享着方法。

5、动态原型模式

动态原型模式是将所有的属性和方法封装在构造函数种,然后通过构造函数来初始化原型。
这样是为了在第一个对象实例化的时候就初始化原型,后面就不需要。
javascript从入门到跑路-----小文的js学习笔记(27)-----对象模式----工厂模式、构造函数模式、原型模式、组合使用构造器和原型模式以及 动态原型模式
就在方法前面添加一个 if 判断即可 ,第一次创建时,它的ff 不等于 这个 所以初始化一次 ,和它相等之后,后面的都和他相等了,那么后面就都不再需要初始化了。

**
关注 校园君有话说 公众号 ,回复 web前端 免费领取50G 前端学习资料 一份 ,我们一起学习进步吧。
javascript从入门到跑路-----小文的js学习笔记(27)-----对象模式----工厂模式、构造函数模式、原型模式、组合使用构造器和原型模式以及 动态原型模式

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。