您的当前位置:首页JavaScript设计模式中构造函数模式的介绍
广告

JavaScript设计模式中构造函数模式的介绍

2023-11-29 来源:热乐宠物网
这篇文章主要介绍了JavaScript设计模式之构造函数模式,结合实例形式分析了构造函数模式的概念、功能、定义及使用方法,需要的朋友可以参考下

本文实例讲述了JavaScript设计模式之构造函数模式。分享给大家供大家参考,具体如下:

一、构造函数模式概念

构造函数用于创建特定类型的对象——不仅声明了使用过的对象,构造函数还可以接受参数以便第一次创建对象的时候设置对象的成员值。你可以自定义自己的构造函数,然后在里面声明自定义类型对象的属性或方法。

在JavaScript里,构造函数通常是认为用来实现实例的,JavaScript没有类的概念,但是有特殊的构造函数。通过new关键字来调用自定义的构造函数,在构造函数内部,this关键字引用的是新创建的对象。

二、构造函数模式的作用和注意事项模式作用:

1.用于创建特定类型的对象

2.第一次声明的时候给对象赋值

3.自己声明构造函数,赋予属性和方法

注意事项:

1.声明函数的时候处理业务逻辑

2.区分和单例的区别,配合单例实现初始化

3.构造函数大写字母开头

三、构造函数模式代码和实战总结
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>构造函数模式</title></head><body><!--<script> function Car(model,year,miles){ if(!(this instanceof Car)){ return new Car(model,year,miles); } this.model = model; this.year = year; this.miles = miles; this.output = function(){ return this.model + "走了" + this.miles + "公里"; } } var tom = new Car("大叔",2009,20000); var dudu = Car("Dudu",2010,5000); console.log(typeof tom); console.log(tom.output()); console.log(typeof dudu); console.log(dudu.output());</script>--><script> //1.用于创建特定类型的对象 //2.这样的函数名会被人笑话 //3.js开发的时候写单引号 //4.js里构造函数比较特殊的地方 new //5.其他的语言里 比如PHP 里人家实现 有一个关键字 A class //6.zaomen就是构造函数 他又充当了类的概念 var AA = { zaomen:function(huawen) { if (!(this instanceof AA.zaomen)) { console.log(123); return new AA.zaomen(huawen); }; var _huawen = "普通"; if (huawen) { _huawen = huawen; } this.suo = "普通"; this.huawen = _huawen; this.create = function () { return "【锁头】" + this.suo + "【花纹】" + this.huawen; } } }; var BB = { zaomen:function(huawen,suo) { if (!(this instanceof BB.zaomen)) { return new BB.zaomen(huawen,suo); }; var _huawen = "普通"; if (huawen) { _huawen = huawen; } this._suo = "普通"; if (suo) { _suo = suo; } this.suo = _suo; this.huawen = _huawen; this.create = function () { return "【锁头】" + this.suo + "【花纹】" + this.huawen; } } }; /*function zaomen(huawen){ if(!(this instanceof zaomen)){ return new zaomen(); } var _huawen = "普通"; if(huawen){ _huawen = huawen; } this.suo = "普通"; this.huawen = _huawen; this.create = function(){ return "【锁头】" + this.suo + "【花纹】" + this.huawen; } }*/ var xiaozhang = AA.zaomen(); alert("xiaozhang" + xiaozhang.create()); var xiaoli = BB.zaomen("绚丽",'123'); alert("xiaoli" + xiaoli.create());</script></body></html>

运行效果如下:

小编还为您整理了以下内容,可能对您也有帮助:

JavaScript中构造函数如何使用

本文章将分享有关JavaScript中构造函数的知识,有一定的参考价值。希望对大家学习有所帮助。

构造函数其实也就是常规函数,但是在命名时首字母要大写,并且调用构造函数时注意要用new关键字实例化,这样的使用意味着this在开始时创建空,并在结束时返回填充的空,接下来将在文章中为大家详细介绍。

构造函数生成

this在开始时创建空,并在结束时返回填充的空

function Student(name age){

this.name=name;

this.age=age;

}

var student=new Student("张三","18");

var student1=new Student("李四","19");

在执行函数的过程时Student()时会执行以下步骤:

(1)创建并分配新的空对象this。

(2)函数体执行。通常它会修改this,为其添加新属性。

(3)this返回值。

同样,如果我们想要创建更多的student,我们可以调用new Student(),每次方法简单而且也易于阅读。

这是构造函数的主要目的:实现可重用的对象创建代码。

构造函数返回

一般情况下,构造函数没有return声明,他们的任务是将所需要的东西写入this,并自动生成结果。

但是如果有return的话,就会变得很简单了,比如return使用object调用,则返回的不是this,也就是return对象返回该对象,this则返回所有其他情况

例如,这里通过返回一个对象来return覆盖this

function Student() {

this.name = "张三";

return { name: "李四" }; //return 一个对象

}

console.log( new Student().name );因为return 一个对象,所以返回的是return里面的值而不是this中的值

但是如果我们return的是一个空值,那么返回的就是this值

<script>

function Student() {

this.name = "张三";

return; //return 一个空对象

}

console.log(new Student().name );

</script>

构造函数中的方法

构造函数不仅可以添加属性还可以添加方法,使构造函数来创建对象更加灵活

<script>

function Student(name) {

this.name = name;

this.friend=function(){

console.log("this my friend:"+this.name);

};

}

var student=new Student("张三");

student.friend();

</script>

总结:

js中的构造函数是什么意思啊

构造函数 ,是一种特殊的方法。主要用来在创建对象时初始化对象, 即为对象成员变量赋初始值,总与new运算符一起使用在创建对象的语句中。特别的一个类可以有多个构造函数 ,可根据其参数个数的不同或参数类型的不同来区分它们 即构造函数的重载。

特点:

1.构造函数的命名必须和类名完全相同。在java中普通函数可以和构造函数同名,但是必须带有返回值;

2.构造函数的功能主要用于在类的对象创建时定义初始化的状态。它没有返回值,也不能用void来修饰。这就保证了它不仅什么也不用自动返回,而且根本不能有任何选择。而其他方法都有返回值,即使是void返回值。尽管方法体本身不会自动返回什么,但仍然可以让它返回一些东西,而这些东西可能是不安全的;

3.构造函数不能被直接调用,必须通过new运算符在创建对象时才会自动调用;而一般的方法是在程序执行到它的时候被调用的;

4.当定义一个类的时候,通常情况下都会显示该类的构造函数,并在函数中指定初始化的工作也可省略,不过Java编译器会提供一个默认的构造函数.此默认构造函数是不带参数的。而一般的方法不存在这一特点;

5.当一个类只定义了私有的构造函数,将无法通过new关键字来创建其对象,当一个类没有定义任何构造函数,C#编译器会为其自动生成一个默认的无参的构造函数。

6.构造函数有回滚的效果,构造函数抛出异常时,构造的是一个不完整对象,会回滚,将此不完整对象的成员释放(c++)。

请用通俗易懂的语言帮我讲解一下js的构造函数的概念?

在JavaScript的世界里没有类的概念,JavaScript是一种基于对象的语言,它包含5中原生数据类型:

number

boolean

string

null

undefined

除此之外,其他所有的都是对象,函数也是一个对象// 这是一个函数声明,函数是一个特殊的对象

function method() {

}

构造函数,就是一个普通的函数,与其他函数没有任何区别,可以理解为 函数==构造函数,它只是概念上的一个定义,使用它用来实例化对象。

对于JavaScript的内置对象,Object、Array、Date等等这些都是构造函数。

function Obj() {

}

var o = new Obj(); // 实例化

使用new运算符返回的对象并不一定是实例本身,也可以在构造函数用使用return改变返回值

function Obj() {

  this.a = 1;

  return { a: 2 };

}

var o = new Obj(); // o并不是Obj的实例

console.log(o.a); // 输出2

前面说到了函数也是一个对象,在JavaScript的内置对象中,所有的函数对象都是Function构造函数的实例,比如:Object、Array等等,这是一个很有意思的事情。

使用 instanceof 这个运算符就可以校验

instanceof运算符返回一个指定的对象是否一个类的实例,格式如:A instanceof B。其中,左操作数必须是一个对象,右操作数必须是一个类(构造函数)。

判断过程:如果函数B在对象A的原型链中被发现,那么instanceof操作符将返回true,否则返回false。

alert(Function instanceof Function); // Function函数对象 本身就是自己的一个实例

alert(Object instanceof Function); // Object函数对象 是 Function构造函数的一个实例

 

上面说道 instanceof 的现象是一件很有意思的事情,如果想了解更多,需要阅读 JavaScript原型链继承 相关的文章加深理解。

JS创建对象几种不同方法详解_javascript技巧

本文介绍了几种js创建对象的方法,分享给大家供大家参考,具体内容如下

1、工厂模式

弊端:没有解决对象的识别问题,即怎么知道一个对象的类型。

2、构造函数模式

与工厂模式相比:

1、没有显式的创建对象

2、直接将属性和方法赋给了this对象

3、没有return语句

要创建person的实例,必须使用new操作符,以这种方式调用构造函数实际上会经历4个步骤:

1、创建一个新对象

2、将构造函数的作用域赋给新对象

3、执行构造函数中的代码

4、返回新对象

创建自定义的构造函数可以将它的实例标识为一种特定的类型。

构造函数的缺点:

每个方法都有在每个实例上重新创建一遍。person1和person2都有一个sayName()的方法,但两个方法不是同一个Function实例。不同实例上的同名函数是不相等的。

创建两个完成同样任务的Function实例没有必要,而且还有this对象在,不需要在执行代码前就把函数绑定在特定对象上,可以像下面这样。

把sayName属性设置成全局的sayName函数,这样,由于sayName包含的是一个指向函数的指针,因此person1和person2对象就共享了同一个函数。

但是,如果对象需要定义很多方法,那么就要定义很多全局函数,自定义的引用类型也没有封装可言了。为了解决上述问题,引入原型模式。

3、原型模式

理解原型对象

我们创建的每个函数都有一个prototype属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。prototype是通过调用构造函数而创建的那个对象实例的对象原型,使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法。

首先,解析器会问实例person1是否有name属性,如果有,就返回。

如果没有,就继续去person1的原型中搜索name属性,如果有就返回。

如果没有,再继续向person1的原型的原型中搜索。

isPrototypeOf()确定实例和原型对象之间的关联

console.log(Person.prototype.isPrototypeOf(person1)); //true

Object.getPrototypeOf()返回的是[[prototype]]的值

console.log(Object.getPrototypeOf(person1));

//Person {name: “Yvette”, age: 26, job: “engineer”} 返回的是Person的原型对象。

console.log(Object.getPrototypeOf(person1) === Person.prototype)//true

console.log(Object.getPrototypeOf(person1).name);//”Yvette”

hasOwnProperty()方法可以检测一个属性是存在于实例中,还是存在于原型中,只有给定属性存在于实例中,才会返回true。

console.log(person1.hasOwnProperty(“name”));//false

原型与in操作符

有两种方式使用in操作符:单独使用和在for-in循环中使用。单独使用时,in操作符会在通过对象能够访问给定属性时返回true,无论该属性在于实例中还是原型中。

使用for in循环,返回的是所有能够通过对象访问的、可枚举的属性,其中既包括实例中的属性,也包括存在于原型中的属性。如果实例中的属性屏蔽了原型中不可枚举的属性,那么也会返回。IE9之前的版本实现上有一个Bug,屏蔽不可枚举属性的实例属性不会在for-in中返回。

在IE9之前的吧按本中没有log信息。尽管person实例中的toString()方法屏蔽了原型中的不可 枚举的toString();

原型简写

这导致了person1.constructor不再指向Person,而是指向了Object。如果constructor很重要,则需要特意将其设为适当的值,如:

但是这种方式会导致constructor属性变成可枚举。

如果想设置为不可枚举的(默认不可枚举),可以使用Object.defineProperty(Person.prototype, “constructor”, {

enumerable: false,

value: Person

});

原型的动态性

由于在原型中查找值的过程是一次搜索,因此我们对原型对象所做的任何修改都能够立即从实例上反映出来。

如果重写整个原型对象,情况就不一样了。调用构造函数时会为实例添加一个指向最初原型的[[prototype]]指针,而把原型修改为另外一个对象就等于切断了构造函数与最初原型之间的联系。实例中的指针仅指向原型,而不指向构造函数。

person.prototype指向的是原本的原型对象,而不会指向新的原型对象。

原型对象的问题

原型模式最大问题是由其共享的本性所导致的。

对于包含引用类型值的属性来说,问题较为突出

本意只想修改person1的friends,但是却导致person2的friends属性值也改变了。因此我们很少单独使用原型模式。

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

创建自定义类型的最常用的方式,就是组合使用构造函数模式与原型模式。构造函数模式用于定义实例属性,原型模式用于定义方法和共享的属性,这样每个实例都有自己的一份实例属性的副本,又同时共享着对方法的引用,最大限度的节省了内存。

热乐宠物网还为您提供以下相关内容希望对您有帮助:

JavaScript中构造函数如何使用

构造函数生成this在开始时创建空,并在结束时返回填充的空function Student(name age){this.name=name;this.age=age;}var student=new Student("张三","18");var student1=new Student("李四","19");在执行函数的过...

javascript创建对象的几种模式介绍_基础知识

构造函数模式:创建构造函数,使用this来赋值,每当创建一个实例时,方法都被创建一次,而每个方法都执行相同的命令,这就多余了。这个缺点可以通过将方法放到全局环境中,但是,这样就没有封装性了。不过可以通过原型模式解决。...

JS创建对象几种不同方法详解_javascript技巧

2、构造函数模式 与工厂模式相比: 1、没有显式的创建对象 2、直接将属性和方法赋给了this对象 3、没有return语句 要创建person的实例,必须使用new操作符,以这种方式调用构造函数实际上会经历4个步骤: 1、创建一个新对...

javascript创建对象的几种常用模式介绍

本文介绍了javascript中创建对象常用的几种模式,包括:工厂模式,构造函数模式,原型模式,组合构造函数与原型的模式,动态原型模式。一.工厂模式看如下代码:function getMySon(name,sex){ var o={}; o.name=name; o.sex...

请用通俗易懂的语言帮我讲解一下js的构造函数的概念?

构造函数,就是一个普通的函数,与其他函数没有任何区别,可以理解为 函数==构造函数,它只是概念上的一个定义,使用它用来实例化对象。对于JavaScript的内置对象,Object、Array、Date等等这些都是构造函数。function Obj() {...

javascript对象和构造函数的区别

"构造函数"本身就是一种方法, JavaScript会根据调用形式的不同进行不同的处理:1) 如果只是作为简单的函数调用, 则不带new关键字来调用该函数:Game();2) 如果要创建一个Game类的实例, 则要使用new Game的形式来调用.var...

如何理解jquery中的构造函数

可以简单理解为JS的对象是一组无序的值,其中的属性或方法都有一个名字,根据这个名字可以访问相映射的值,这个值可以是基本值,对象或者是方法例:JavaScript中的构造函数案例function Student(name, age) { this.name = ...

javascript怎么定义函数

1:调用关键字function来构造 function distance(x1,x2,y1,y2){ var dx=x2-x1;var dy=y2-y1;return Math.sqrt(dx*dx+dy*dy);} 2:使用Function()构造函数(请注意与上面的大小写)1 var f=new Function*"x"...

javascript中的工厂模式和构造函数有什么区别?

工厂模式:就是把参数传进去后。进过一系列的处理。然后得到想要的结果。然而。他这样会很消耗资源。每一次的创建都会创建空间。也就是user.speak=function这边。这样会降低性能。构造函数也叫混合模式。是通过prototype方法把...

javascript中什么是 对象 什么是 对象 什么是构造函数 什么是方法呀...

1、什么是对象 对象就是东西,js中最基本的东西是内置的object 对象可以有方法,可以有属性 2、构造函数 是创建对象时初始化对象 的函数,就好比对象工厂,用于规定对象的基本属性和方法。3、属性和方法 属性就是对象的特点,...

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

Top