javascript设计模式介绍(二) 构造函数模式

合集下载

详解Javascript中的class、构造函数、工厂函数

详解Javascript中的class、构造函数、⼯⼚函数到了ES6时代，我们创建对象的⼿段⼜增加了，在不同的场景下我们可以选择不同的⽅法来建⽴。

现在就主要有三种⽅法来构建对象，class关键字，构造函数，⼯⼚函数。

他们都是创建对象的⼿段，但是却⼜有不同的地⽅，平时开发时，也需要针对这不同来选择。

⾸先我们来看⼀下，这三种⽅法是怎样的// class 关键字，ES6新特性class ClassCar {drive () {console.log('Vroom!');}}const car1 = new ClassCar();console.log(car1.drive());// 构造函数function ConstructorCar () {}ConstructorCar.prototype.drive = function () {console.log('Vroom!');};const car2 = new ConstructorCar();console.log(car2.drive());// ⼯⼚函数const proto = {drive () {console.log('Vroom!');}};function factoryCar () {return Object.create(proto);}const car3 = factoryCar();console.log(car3.drive());这些⽅法都是基于原型的创建，⽽且都⽀持在构造时函数中私有变量的实现。

换句话来说，这些函数拥有着⼤部分相同的特性，甚⾄在很多场景下，他们是等价的。

在 Javascript 中，每⼀个函数都能返回⼀个新的对象。

当它不是构造函数或者类的时候，它就被称作⼯⼚函数。

ES6的类其实是构造函数的语法糖（⾄少现阶段是这样实⾏的），所以接下来讨论的所有内容都适⽤于构造函数的也适⽤于ES6类：class Foo {}console.log(typeof Foo); // function构造函数和ES6类的好处⼤部分的书会教你去⽤类和构造函数‘ this ' 是指向新的这个对象的。

js核心基础之构造函数constructor用法实例分析

js核⼼基础之构造函数constructor⽤法实例分析本⽂实例讲述了js核⼼基础之构造函数constructor⽤法。

分享给⼤家供⼤家参考，具体如下：在js中，可以利⽤构造函数来创建特定类型的对象，其中，有⼀些原⽣的构造函数，Object、Array、等等，所以，当type of Object时，返回的是function。

此外，我们还可以创建⾃定义的构造函数，从⽽⾃定义对象的属性以及⽅法。

例如：function Person(name,age,job) {=name;this.age=age;this.job=job;this.sayName=function () {alert();}}var person1=new Person('zhy',18,'SoftWare Engineer');var person2=new Person('zhy2',19,'Doctor');注意：要创建Person的新实例，必须使⽤new操作符。

如果不使⽤new，则属性和⽅法都被添加给了window对象了。

这种⽅式调⽤构造函数实际上会经历⼀下4个步骤：①创建⼀个新对象；②将构造函数的作⽤域赋给新对象，因此，this就指向了这个新对象；③执⾏构造函数中的代码，即为这个新对象添加属性、⽅法；④返回新对象。

缺点：在上述例⼦中，我们可以知道，每个实例都有⼀个sayName的⽅法，但是console.log(person1.sayName==person2.sayName);//false因为，每创建⼀个实例的时候，实际上所做的是下⾯这种：function Person(name,age,job) {=name;this.age=age;this.job=job;this.sayName=new Function () {alert();}}所以，person1的sayName跟person2的sayName不是同⼀个实例。

JavaScript中自定义构造函数详解

JavaScript中⾃定义构造函数详解
Javascript并不像Java、C#等语⾔那样⽀持真正的类。

但是在js中可以定义伪类。

做到这⼀点的⼯具就是构造函数和原型对象。

⾸先介绍js 中的构造函数。

Javascript中创建对象的语法是在new运算符的后⾯跟着⼀个函数的调⽤。

如
1var obj = new Object();
2var date = new Date();
运算符new⾸先创建⼀个新的没有任何属性的对象，然后调⽤该函数，把新的对象作为this关键字的值传递。

var date = new Date()的伪代码的实现就是
var obj = {};
var date = Date.call(obj);
构造函数的作⽤就是初始化⼀个新创建的对象，并在使⽤对象前设置对象的属性。

如果定义⾃⼰的构造函数，只需要编写⼀个为this添加属性的函数就可以了。

下⾯的代码定义了⼀个构造函数：
1function Rectangle(w, h)
2 {
3this.width = w;
4this.height = h;
5 }
然后，可以使⽤new运算符调⽤这个函数来创建对象的实例
var rect = new Rectange(4,8);
构造函数的返回值
Javascript中的构造函数通常没有返回值。

但是，函数是允许有返回值的。

如果⼀个构造函数有⼀个返回值，则返回的对象成为new表达式的值。

在此情况下，作为this的对象将会被抛弃。

JavaScript中创建对象的几种模式

JavaScript中创建对象的几种模式**JavaScript创建对象模式：∙对象字面量∙工厂模式∙构造函数模式∙原型模式∙结合构造函数和原型模式∙原型动态模式**面向对象的语言大都有一个类的概念，通过类可以创建多个具有相同方法和属性的对象。

虽然从技术上讲，javascript是一门面向对象的语言，但是javascript没有类的概念，一切都是对象。

任意一个对象都是某种引用类型的实例，都是通过已有的引用类型创建；引用类型可以是原生的，也可以是自定义的。

1、对象字面量var person = {name :'Nicholas';age :'22';job :"software Engineer"sayName: function() {alter();}}1例子中创建一个名为person的对象，并为它添加了三个属性（name,age,job）和一个方法（sayName()），其中，sayName()方法用于显示(被解析为)的值。

对象字面量可以用来创建单个对象，但这个方法有个明显的缺点：使用同一个接口创建很多对象，会产生大量重复的代码。

2、工厂模式工厂模式是软件工程领域中一种广为人知的设计模式，工厂模式抽象了创建具体对象的过程，用函数来封装以特定的接口创建对象的细节。

JavaScript精炼之构造函数Constructor及Constructor属性详解

JavaScript精炼之构造函数Constructor及Constructor属性详解除了创建对象，构造函数(constructor) 还做了另⼀件有⽤的事情—⾃动为创建的新对象设置了原型对象(prototype object) 。

原型对象存放于 ConstructorFunction.prototype 属性中。

例如，我们重写之前例⼦，使⽤构造函数创建对象“b”和“c”，那么对象”a”则扮演了“Foo.prototype”这个⾓⾊：// 构造函数function Foo(y) {// 构造函数将会以特定模式创建对象：被创建的对象都会有"y"属性this.y = y;}// "Foo.prototype"存放了新建对象的原型引⽤// 所以我们可以将之⽤于定义继承和共享属性或⽅法// 所以，和上例⼀样，我们有了如下代码：// 继承属性"x"Foo.prototype.x = ;// 继承⽅法"calculate"Foo.prototype.calculate = function (z) {return this.x + this.y + z;};// 使⽤foo模式创建 "b" and "c"var b = new Foo();var c = new Foo();// 调⽤继承的⽅法b.calculate(); //c.calculate(); //// 让我们看看是否使⽤了预期的属性console.log(b.__proto__ === Foo.prototype, // truec.__proto__ === Foo.prototype, // true// "Foo.prototype"⾃动创建了⼀个特殊的属性"constructor"// 指向a的构造函数本⾝// 实例"b"和"c"可以通过授权找到它并⽤以检测⾃⼰的构造函数b.constructor === Foo, // truec.constructor === Foo, // trueFoo.prototype.constructor === Foo // trueb.calculate === b.__proto__.calculate, // trueb.__proto__.calculate === Foo.prototype.calculate // true);上述代码可表⽰为如下的关系：构造函数与对象之间的关系上述图⽰可以看出，每⼀个object都有⼀个prototype. 构造函数Foo也拥有⾃⼰的__proto__, 也就是Function.prototype, ⽽Function.prototype的__proto__指向了Object.prototype. 重申⼀遍，Foo.prototype只是⼀个显式的属性，也就是b和c的__proto__属性。

js构造函数详解

js构造函数详解js构造函数详解⼀、总结⼀句话总结：> 构造函数是⽤new关键字创建，并且⾸字母⼤写，本质上也是个函数，例如var obj = new Person('⽼铁'，18);function Foo(name,age,sex){ = name;this.age = age;this.sex = sex;}Foo.prototype.belief = function(){console.log('量变是质变的必要准备，质变是量变积累到⼀定程度的必然结果！');};let f = new Foo ('zh',18,'男');1、js三种创建函数⽅式（声明式函数定义、函数表达式、new Function 形式）的关系？> 第⼀种和第⼆种函数的定义的⽅式其实是第三种new Function 的语法糖，当我们定义函数时候都会通过 new Function 来创建⼀个函数，只是前两种为我们进⾏了封装，我们看不见了⽽已，js 中任意函数都是Function 的实例2、构造函数和普通函数的区别？> 构造函数是⽤new关键字创建，并且⾸字母⼤写，本质上也是个函数，例如var obj = new Person('⽼铁'，18);function Foo(name,age,sex){ = name;this.age = age;this.sex = sex;}Foo.prototype.belief = function(){console.log('量变是质变的必要准备，质变是量变积累到⼀定程度的必然结果！');};let f = new Foo ('zh',18,'男');3、js中new关键字的作⽤？> new关键字会申请内存，当调⽤new关键字创建对象时，会去堆空间⾥⾯申请内存，后台会隐式执⾏new Object()创建对象。

javascript function构造函数

一、概述在JavaScript中，函数构造函数是一种特殊的函数类型，能够创建新的函数对象。

通过使用函数构造函数，我们可以动态地创建函数，并且在运行时动态地构建其行为。

本文将着重介绍JavaScript中函数构造函数的使用方法和相关注意事项。

二、函数构造函数的定义1. 函数构造函数是内置的Function对象的构造函数，可以用来创建新的函数对象。

它的语法形式如下：```javascriptvar functionName = new Function(arg1, arg2, ..., argN, functionBody);```其中，arg1, arg2, ..., argN是函数的参数，functionBody是函数体。

2. 通过函数构造函数创建的函数对象可以像普通函数一样被调用。

三、函数构造函数的使用方法1. 创建新的函数对象使用函数构造函数，我们可以在运行时创建新的函数对象，而不需要在代码中预先定义函数。

```javascriptvar add = new Function('a', 'b', 'return a + b;');```通过上面的代码，我们创建了一个名为add的函数，它接受两个参数a和b，返回它们的和。

2. 动态构建函数行为函数构造函数允许我们动态构建函数的行为，可以根据实际需求在运行时动态定义函数。

```javascriptfunction createGreeter(greeting) {return new Function('name', 'return "' + greeting + ', " + name + "!"');}var helloGreeter = createGreeter('Hello');var hiGreeter = createGreeter('Hi');console.log(helloGreeter('Alice')); // 输出：Hello, Alice! console.log(hiGreeter('Bob')); // 输出：Hi, Bob!```上面的代码中，我们定义了一个createGreeter函数，它接受一个参数greeting，并返回一个根据greeting动态构建的新的函数。

JS定义类的六种方式详解以及几种常用的JS类定义方法

JS定义类的六种方式详解以及几种常用的JS类定义方法JavaScript中定义类的六种方式包括构造函数、原型链、工厂模式、Object.create(方法、ES6的class关键字和单例模式。

1.构造函数方式：构造函数是一种特殊的函数，通过使用new关键字创建对象实例。

构造函数内部使用this关键字来指向新创建的对象。

```javascriptfunction Person(name, age) = name;this.age = age;var person1 = new Person("John", 25);console.log(); // 输出: John```2.原型链方式：使用原型链可以将方法和属性共享给所有实例对象，将方法和属性添加到构造函数的原型上。

```javascriptfunction Person( {} = "John";Person.prototype.age = 25;var person1 = new Person(;console.log(); // 输出: John```3.工厂模式方式：工厂模式是根据不同需求返回不同的对象实例，避免使用new关键字。

```javascriptfunction createPerson(name, age)var person = {}; = name;person.age = age;return person;var person1 = createPerson("John", 25);console.log(); // 输出: John```4. Object.create(方法：使用Object.create(方法可以创建新对象，并将其原型设置为指定的对象。

```javascriptvar personProto =name: "John",age: 25};var person1 = Object.create(personProto);console.log(); // 输出: John```5. ES6的class关键字：ES6引入了class关键字来定义类，使用constructor方法来创建对象实例。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

本文由我司收集整编，推荐下载，如有疑问，请与我司联系
javascript 设计模式介绍（二）构造函数模式
2016/04/22 0 我们可以通过创建自定义的构造函数，从而定义自定义对象类型
的属性和方法。

例如：
function Person(name.age,sex){ = name;this.age = age;this.sex
=
sex;this.sayName = function(){ alert(); }}然后我们实例一个Personvar person1 = new Person（john ,18, 男var person1 = new Person（Rose ,17, 女
我们注意到，Person()中的代码：
没有显式地创建对象；
直接将属性和方法赋给了this 对象；
没有return 语句。

此外，还应该注意到函数名Person 使用的是大写字母P。

按照惯例，构造函数始
终都应该以一个大写字母开头，而非构造函数则应该以一个小写字母开头。

这个做
法借鉴自其他OO 语言，主要是为了区别于ECMAScript 中的其他函数；因为构造
函数本身也是函数，只不过可以用来创建对象而已。

要创建Person 的新实例，必须使用new 操作符。

以这种方式调用构造函数实际
上会经历以下4 个步骤：(1) 创建一个新对象；(2) 将构造函数的作用域赋给新对象
（因此this 就指向了这个新对象）；(3) 执行构造函数中的代码（为这个新对象添加
属性）；(4) 返回新对象。

person1 和person2 分别保存着Person 的一个不同的实例。

这两个对象都有一个constructor（构造函数）属性，该属性指向Person，如下所示。

alert(person1.constructor == Person); //true alert(person2.constructor == Person); //true 对象的constructor 属性最初是用来标识对象类型的。

但是，提到检测对象类型，
还是instanceof 操作符要更可靠一些。

我们在这个例子中创建的所有对象既是Object 的实例，同时也是Person 的实例，这一点通过instanceof 操作符可以得到验
证。