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方法来创建对象实例。

js构造函数

js构造函数javascript构造函数是每个javascript程序员必须掌握的重要概念，在javascript中它被广泛使用，用于创建可重复使用的对象。

本文将为读者解释这一概念，并讨论javascript构造函数的用法。

首先，让我们来看看什么是javascript构造函数。

构造函数是用来创建javascript对象的函数，它可以包含属性和方法。

它可以被用来创建可重用的对象实例，只需要调用一次，就可以创建很多不同的对象。

构造函数的定义非常简单，用一个函数来定义它，可以在函数内部添加属性和方法，同时有一个参数来配置对象的初始属性。

比如，我们可以使用构造函数来创建一个Person对象，它可以接受一个名字参数：function Person(name) { = name;this.sayHello = function() {console.log(Hi, my name is + );};}这段代码定义了一个Person构造函数，它接受一个name参数，用来初始化Person对象的name属性，同时，它还有一个sayHello()方法。

接下来，我们可以使用这个构造函数来创建对象实例，只需要调用这个构造函数，并传入一个参数：var person1 = new Person(John这段代码会创建一个叫John的Person对象，然后我们可以使用它的属性和方法：console.log(); // Johnperson1.sayHello(); // Hi, my name is John另外，我们也可以使用相同的构造函数创建多个不同的对象实例： var person2 = new Person(Sarahconsole.log(); // Sarahperson2.sayHello(); // Hi, my name is Sarah上面的例子中，我们使用相同的构造函数Person()创建了两个不同的对象实例：person1 person2。

js的构造函数

js的构造函数JavaScript一种面向对象的多范式脚本编程语言，它的面向对象特征体现在支持类和构造函数。

构造函数是在 JavaScript 中创建对象的最常用的方法。

构造函数的定义方式很简单：带有一个 function键字，它的主体内容可以是任何 JavaScript 代码。

它返回一个新的对象，在对象中包含指定的属性和行为。

构造函数的使用方法也很简单：首先声明一个新的构造函数，然后使用 new键字创建该构造函数的一个实例，其中可以设置属性值和行为。

例如，定义一个构造函数名为 Person，它可以创建出一个Person象，这个对象具有给定的属性和行为：function Person(name, age){ = name;this.age = age;}Person.prototype.sayName = function(){console.log();};Person.prototype.sayAge = function(){console.log(this.age);};// new键字创建 Person象的实例let person1 = new Person(John 20);let person2 = new Person(Mike 30);person1.sayName(); //出John”person2.sayAge(); //出30”在上面的代码中，我们创建了一个构造函数 Person，它接受两个参数，name age，输出 Person象，这个对象具有对应的属性name age。

然后，Person.prototype 上定义了两个方法，分别是sayName sayAge，可以从这两个方法调用 Person象的属性值。

使用 new键字创建了两个 Person象的实例，分别是 person1 person2，此时可以分别通过 person1.sayName()person2.sayAge()调用 Person象的属性值。

js构造函数写法

js构造函数写法JS构造函数写法是JS的一种基础语法，它是一种用来创建对象的函数。

本文将介绍JS构造函数的定义、使用方式及其优缺点。

一、JS构造函数的定义在JS中，构造函数是一种用来创建对象的函数，它定义了一个类并且封装了一些属性和方法。

构造函数的名称一般以大写字母开头，用于与普通函数作区分。

JS构造函数可以使用new关键字创建对象。

二、JS构造函数的使用方式JS构造函数的使用方式如下：1. 定义构造函数通过function关键字在JS中定义一个构造函数，例如：function myObj(name, age) { = name;this.age = age;}2. 创建对象通过new关键字创建对象，例如：var obj = new myObj('张三', 22);通过以上步骤，obj即可成功创建一个名字为‘张三’，年龄为22岁的对象。

三、JS构造函数的优缺点1. 优点通过JS构造函数，可以封装业务逻辑代码，让代码更加可维护和灵活。

2. 缺点JS构造函数存在许多缺点，如：(1) 每次创建对象时，都需要重新生成同样的方法，浪费内存空间。

(2) 对象无法继承其他对象的方法和属性。

(3) 对象之间无法共享方法和属性。

(4) 没有真正的私有属性和方法，只能使用this来模拟。

四、JS构造函数的应用场景JS构造函数通常在以下场景中得到使用：1. 创建动态数据模型在JS中，由于其灵活性，可以通过构造函数来实现动态数据模型。

我们可以根据需要创建对象，并为之前已创建的对象动态添加属性和方法。

2. 创建面向对象程序通过创建构造函数，我们可以创建复杂的对象，并通过其封装的方法来完成业务逻辑。

这种方式有利于代码的重用性和可维护性。

3. 创建代表实体的对象JS中的一些框架，如AngularJS，利用构造函数来创建代表实体的对象。

这样做的好处是代码的可读性更高，同时极大地减少了代码量。

总结：在JavaScript中，构造函数是一种用来创建对象的函数。

js函数常见的三种实例化方式

博客园用户登录代码改变世界密码登录短信登录忘记登录用户名忘记密码记住我登录第三方登录/注册没有账户, 立即注册
js函数常见的三种实例化方式
1
//工厂模式
2
function oj(){
3
var lio=new Object(); //创建对象，对象属性赋值
4
='lio';
29
person2.hobby();
30
alert();
31
32on oj3(){
34
//='lio';
35
}
36
='lio';
37
oj3.prototype.love= function (name) {
38
alert("爱"+name);
39
};
40
var person3=new oj3();
41
//检测是在实例中还是在原型中
42
alert(person3.hasOwnProperty("name"));
43
alert(person3.hasOwnProperty("rename"));
44
person3.love('三妹');
45
46
//混合模式
47
function oj4(age) {
48
this.age=age;
49
this.rename='aaaa';
50
};
51
oj4.prototype={

构造函数模式

构造函数模式构造函数模式是一种面向对象编程范式，它是一种根据特定的构造函数创建的新的对象的模式，可以将它们看作是特定类型的工厂，它们可以用来定义并创建新的对象。

通常情况下，一个构造函数由一个或多个参数组成，通过这些参数初始化新创建的对象。

构造函数模式是JavaScript程序设计语言中常见的一种方式，它被用来创建新的对象实例，而不必使用已存在的对象实例。

构造函数模式以不同的方式实现了以下特性：复用性，可扩展性和灵活性。

它是一种替代现有对象创建模式的有效方式，它可以用于代替33设计模式中的“工厂模式”，“抽象工厂模式”和“单例模式”，这些模式都是用来实现特定功能的模式。

在JavaScript编程中，使用构造函数模式创建新的对象实例的过程很简单：首先，在需要新对象的地方定义一个构造函数，然后为该函数声明一些属性和方法，接着，使用这个构造函数制定并创建新的对象实例。

重要的是要注意，构造函数模式利用了“原型链”，它是一种原型继承模式，它允许新的对象使用旧对象的属性和方法，这使得对象可以不改变新对象的原型，而从旧对象继承属性和方法。

构造函数模式可以用来构建复杂的对象，它可以被看作是一种创建对象的模版，它可以用来快速而安全地创建对象实例。

它可以被视为一种高级的面向对象编程方法，可以有效地实现代码的封装，提高可读性和可维护性。

构造函数模式比其他对象创建模式有很多优势，最明显的优势之一是可复用性。

由于构造函数模式利用了原型继承，新的对象实例可以从原型链中获得旧对象的属性和方法，从而大大简化复制对象的过程。

此外，构造函数模式允许开发人员在不改变原型的情况下对对象进行自定义，从而增加可扩展性和灵活性。

构造函数模式可以在JavaScript语言中得到广泛的应用，几乎所有的JavaScript库都有用到构造函数模式，并且它可以提供一种有效的方式来实现面向对象编程，有助于将复杂的程序设计变得更加简单、更加有效。

但是，需要注意的是，最好将构造函数模式与其他模式结合起来使用，以最大限度地发挥其作用。

JavaScript构造函数详解_javascript技巧.docx

JavaScript构造函数详解构造函数就是初始化一个实例对象，对象的prototype属性是继承一个实例对象。

构造函数注意事项：1・默认函数首字母大写2.构造函数并没有显示返回任何东西。

new操作符会口动创建给定的类型并返回他们，当调用构造函数时，new会口动创建this对象，且类型就是构造函数类型。

3.也可以在构造函数中显示调用return.如果返回的值是一个对象，它会代替新创建的对象实例返回。

如杲返回的值是一个原始类型，它会被忽略，新创建的实例会被返回。

function Person( name){thi 二name;} var pl=new PersonC John");等同于：function person(name ) {Object obj 二new Object(); =name;return obj;} var pl二person(〃John");4•因为构造函数也是函数，所以可以直接被调用，但是它的返回值为undcfinc, 此时构造函数里而的this对象等于全局this对象。

this. name Jt实就是创建一个全局的变量name。

在严格模式下，当你补通过new调用Person构造函数会出现错误。

<• Person {name: "John"}>pl.n<• undefined>var p2=Person(*Lily*);<■ undefined>P2<• undefined><• "Lily">O ► Uncaught TypeError: Cannot read property 'name f of undefined(-) 、I5.也可以在构造函数中用Object, def ineProperty ()方法来帮助我们初始化：function Pcrson( name){Object.defineProperty(this, 〃name〃{get :function() {return name;},set:function (ncwNamc){name =newName;},enumerable : true, //可枚举，默认为falseconfigurable: true //可配置});}var pl二new Person (5 John');6.在构造函数屮使用原型对象//比直接在构造函数小写的效率要高的多Person.prototype. sayName= function(){console. log(this. name);};但是如果方法比较多的话，大多人会采用一种更简洁的方法：直接使用一个对象字面形式替换原型对象，如下：Person, prototype ={sayName :function() { console・ log(this・ name);},toString :function() {return 〃［Person 〃+ +〃］〃 ;}}；这种方式非常流行，因为你不用多次键入Person, prototype,但有一个副作用你一定要注意：J5Q5U 「I liuta LlkJI I l\CI IUCI II 1^0 Y <top frame> ▼ U Preserve log> pl instanceof Person使用字面量形式改写了原型对彖改变了构造函数的属性，因此他指向Object而不是Person。

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 操作符可以得到验
证。