JS面向对象之从工厂方式到构造函数

简介: 工厂方式工厂方式其实就是函数封装,将多个对象相同部分封装成一个函数(功能)将上面的代码封装成如下:

JS面向对象之从工厂方式到构造函数



一个简单的例子:


创建两个对象,每个对象都有各自的属性和方法:


20180525111648539.png


上面用面向对象的写法,表示两个对象--小明、小强,可以发现代码重复度很高,就一个名字不一样,别的代码都是一样的。


工厂方式


工厂方式其实就是函数封装,将多个对象相同部分封装成一个函数(功能)

将上面的代码封装成如下:


20180525111748456.png


这个封装的过程,就好比是流水线组装产品的过程。所以称为工厂方式。


构造函数


进一步的。我们来比较我们写的函数和系统对象区别:


看下JS的内置对象的使用方法


var arr = new array();


var date = new Date();


对比我们写的:


var p1 = createPerson("小强");


有两点不同:


1. 函数的首字母大写


2. 函数调用前面有个new


既然是面向对象,我们就要向自带的系统对象学习,来改写我们的createPerson方法


第一个问题好解决,首字母改成大写的就行了:


20180525111809388.png


第二个问题:系统函数前面有个new


分析一下 现在CreatePerson函数中 this 指向的是window


而在 CreatePerson前面加一个new 即 new CreatePerson() 这个时候CreatePerson函数中的this指向的是谁呢? 这里有个语法规定:


 当new去调用一个函数时:这个时候函数中的this就是创建出来的对象,而且函数的返回值直接就是this(隐式返回)。


 什么是隐式返回 ? 函数如果不写返回值,默认返回的是undifined,而这里不用写返回值,函数默认返回this,这就是隐式返回。


再来改下createPerson,如下;


20180525111824404.png


这里就引出了一个概念:

new后面调用的函数--即称为构造函数 这里的CreatePerson就是一个构造函数。

目录
相关文章
|
3月前
|
设计模式 JavaScript 前端开发
在JavaScript中,继承是一个重要的概念,它允许我们基于现有的类(或构造函数)创建新的类
【6月更文挑战第15天】JavaScript继承促进代码复用与扩展,创建类层次结构,但过深的继承链导致复杂性增加,紧密耦合增加维护成本,单继承限制灵活性,方法覆盖可能隐藏父类功能,且可能影响性能。设计时需谨慎权衡并考虑使用组合等替代方案。
40 7
|
28天前
|
存储 JavaScript 前端开发
JavaScript引用数据类型和构造函数的秘密
JavaScript引用数据类型和构造函数的秘密
|
1天前
|
设计模式 JavaScript 前端开发
从工厂到单例再到策略:Vue.js高效应用JavaScript设计模式
【8月更文挑战第30天】在现代Web开发中,结合使用JavaScript设计模式与框架如Vue.js能显著提升代码质量和项目的可维护性。本文探讨了常见JavaScript设计模式及其在Vue.js中的应用。通过具体示例介绍了工厂模式、单例模式和策略模式的应用场景及其实现方法。例如,工厂模式通过`NavFactory`根据用户角色动态创建不同的导航栏组件;单例模式则通过全局事件总线`eventBus`实现跨组件通信;策略模式用于处理不同的表单验证规则。这些设计模式的应用不仅提高了代码的复用性和灵活性,还增强了Vue应用的整体质量。
|
3月前
|
设计模式 JavaScript 前端开发
【JavaScript】深入浅出JavaScript继承机制:解密原型、原型链与面向对象实战攻略
JavaScript的继承机制基于原型链,它定义了对象属性和方法的查找规则。每个对象都有一个原型,通过原型链,对象能访问到构造函数原型上的方法。例如`Animal.prototype`上的`speak`方法可被`Animal`实例访问。原型链的尽头是`Object.prototype`,其`[[Prototype]]`为`null`。继承方式包括原型链继承(通过`Object.create`)、构造函数继承(使用`call`或`apply`)和组合继承(结合两者)。ES6的`class`语法是语法糖,但底层仍基于原型。继承选择应根据需求,理解原型链原理对JavaScript面向对象编程至关重要
56 7
【JavaScript】深入浅出JavaScript继承机制:解密原型、原型链与面向对象实战攻略
|
2月前
|
设计模式 JavaScript 前端开发
js设计模式【详解】—— 构造函数模式
js设计模式【详解】—— 构造函数模式
30 6
|
4月前
|
前端开发 JavaScript
前端 JS 经典:Class 面向对象
前端 JS 经典:Class 面向对象
22 1
|
4月前
|
JavaScript
js中如何使用工厂方式和构造函数创建对象,web开发项目实例
js中如何使用工厂方式和构造函数创建对象,web开发项目实例
|
3月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的工厂生产设备维护管理系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的工厂生产设备维护管理系统附带文章和源代码部署视频讲解等
20 0
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js的工厂车间管理系统附带文章和源代码设计说明文档ppt
基于springboot+vue.js的工厂车间管理系统附带文章和源代码设计说明文档ppt
52 0
|
4月前
|
JavaScript 前端开发
JavaScript 原型链继承:掌握面向对象的基础
JavaScript 原型链继承:掌握面向对象的基础