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就是一个构造函数。

目录
相关文章
|
25天前
|
设计模式 前端开发 JavaScript
JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式
本文深入探讨了JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式,结合电商网站案例,展示了设计模式如何提升代码的可维护性、扩展性和可读性,强调了其在前端开发中的重要性。
29 2
|
28天前
|
JavaScript 前端开发
JS中的构造函数的含义和用法
构造函数是JavaScript中用于创建新对象的特殊函数,通常首字母大写。通过`new`关键字调用构造函数,可以初始化具有相同属性和方法的对象实例,从而实现代码复用。例如,定义一个`Person`构造函数,可以通过传入不同的参数创建多个`Person`对象,每个对象都有自己的属性值。此外,构造函数还可以包含方法,使每个实例都能执行特定的操作。构造函数的静态属性仅能通过构造函数本身访问。ES6引入了`class`语法糖,简化了类的定义和实例化过程。
24 1
|
28天前
|
存储 前端开发 JavaScript
JavaScript常用的内置构造函数
JavaScript提供的内置构造函数在数据处理、对象创建、异常处理和异步操作等方面发挥了重要作用。掌握这些构造函数及其用法,对于开发高效、可靠的JavaScript应用至关重要。通过合理使用这些内置构造函数,开发者可以更好地管理和操作各种类型的数据,提升开发效率和代码质量。
23 1
|
6月前
|
设计模式 JavaScript 前端开发
在JavaScript中,继承是一个重要的概念,它允许我们基于现有的类(或构造函数)创建新的类
【6月更文挑战第15天】JavaScript继承促进代码复用与扩展,创建类层次结构,但过深的继承链导致复杂性增加,紧密耦合增加维护成本,单继承限制灵活性,方法覆盖可能隐藏父类功能,且可能影响性能。设计时需谨慎权衡并考虑使用组合等替代方案。
47 7
|
3月前
|
JavaScript 前端开发
JavaScript基础知识-构造函数(也称为"类")定义
本文介绍了JavaScript中构造函数(也称为“类”)的定义和使用方法。
39 1
JavaScript基础知识-构造函数(也称为"类")定义
|
4月前
|
设计模式 JavaScript 前端开发
从工厂到单例再到策略:Vue.js高效应用JavaScript设计模式
【8月更文挑战第30天】在现代Web开发中,结合使用JavaScript设计模式与框架如Vue.js能显著提升代码质量和项目的可维护性。本文探讨了常见JavaScript设计模式及其在Vue.js中的应用。通过具体示例介绍了工厂模式、单例模式和策略模式的应用场景及其实现方法。例如,工厂模式通过`NavFactory`根据用户角色动态创建不同的导航栏组件;单例模式则通过全局事件总线`eventBus`实现跨组件通信;策略模式用于处理不同的表单验证规则。这些设计模式的应用不仅提高了代码的复用性和灵活性,还增强了Vue应用的整体质量。
65 1
|
4月前
|
存储 JavaScript 前端开发
JavaScript引用数据类型和构造函数的秘密
JavaScript引用数据类型和构造函数的秘密
|
6月前
|
设计模式 JavaScript 前端开发
【JavaScript】深入浅出JavaScript继承机制:解密原型、原型链与面向对象实战攻略
JavaScript的继承机制基于原型链,它定义了对象属性和方法的查找规则。每个对象都有一个原型,通过原型链,对象能访问到构造函数原型上的方法。例如`Animal.prototype`上的`speak`方法可被`Animal`实例访问。原型链的尽头是`Object.prototype`,其`[[Prototype]]`为`null`。继承方式包括原型链继承(通过`Object.create`)、构造函数继承(使用`call`或`apply`)和组合继承(结合两者)。ES6的`class`语法是语法糖,但底层仍基于原型。继承选择应根据需求,理解原型链原理对JavaScript面向对象编程至关重要
153 7
【JavaScript】深入浅出JavaScript继承机制:解密原型、原型链与面向对象实战攻略
|
5月前
|
设计模式 JavaScript 前端开发
js设计模式【详解】—— 构造函数模式
js设计模式【详解】—— 构造函数模式
47 6
|
7月前
|
前端开发 JavaScript
前端 JS 经典:Class 面向对象
前端 JS 经典:Class 面向对象
39 1