设计模式(3)[JS版]-JavaScript中的构造函数模式是什么？AlbertYang的博客- | ImapBox

设计模式(3)[JS版]-JavaScript中的构造函数模式是什么？AlbertYang的博客-

21 七月
星期二, 21 七月 2020 04:00 Last Updated on 星期二, 21 七月 2020 04:00 0 Comments

目录

1 什么是构造函数模式

2 构造函数模式的作用和注意事项

2.1 模式作用

2.2 注意事项

3 代码实现

4  构造函数模式与单例模式结合

上篇文章单例模式：https://blog.csdn.net/qq_23853743/article/details/107451561

1 什么是构造函数模式

构造函数用于创建特定类型的对象一不仅声明了使用的对象，构造函数还可以接受参数以便第一次创建对象的时候设置对象的成员值。你可以自定义自己的构造函数，然后在里面声明自定义类型对象的属性或方法。在JavaScript里，构造函数通常是认为用来实现实例的，JavaScript没有类的概，但是有特殊的构造函数。通过new关键字来调用自定义的构造函数，在构造函数内部，this关键字引用的是新创建的对象。

2 构造函数模式的作用和注意事项

2.1 模式作用

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

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

3．自己声明构造函数，赋予属性和方法。

2.2 注意事项

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

2．区分和单例的却别，配合单例实现初始化。

3．建议构造函数以大写字母开头。

4.   注意new的成本。（继承）

3 代码实现

 <!DOCTYPE html> <html>     <head>         <meta charset="utf-8">         <title>构造函数模式</title>     </head>     <body>     </body>     <script>         //Person本身是一个普通函数，但当通过new来创建对象时，         //Person就是构造函数,同时又充当了Java等语言中类的概念         function Person(name,age){             //防止调用函数时，没有用关键字new的时候报错             if(!(this instanceof Person)){                 return new Person(name,age);             }             this.name = name;             this.age = age;             this.sayName = function(){                 //建议js中一般用单引号                return '我是:'+this.name+'年龄：'+this.age;             }         }         //创建对象小明         var xiaoMing = new Person('小明',20);         alert(xiaoMing.sayName());         //创建对象小张         var xiaoZhang= new Person('小张',30,);         alert(xiaoZhang.sayName());     </script> </html>

要创建Person的实例，必须使用new操作符，new 关键字会进行如下的操作：

1 创建一个空的简单JavaScript对象（即{}）；//var o = new Object();

2 将这个构造函数的作用域赋给新对象（因此this就指向了这个新对象)；//o.__proto__ = Person.prototype; 

3 将步骤1新创建的对象作为this的上下文 ；//Person.call(o);

3 执行构造函数中的代码(为这个新对象添加属性)；

4 如果该函数没有返回对象，则返回this(新对象)；

在前面例子中，xiaoMing和xiaoZhang分别保存着Person的不同实例。这两个对象都有一个constructor(构造函数)属性，该属性指向Person(构造函数):

 console.log(xiaoMing.constructor === Person);//true  console.log(xiaoZhang.constructor === Person);//true

并且这两个实例可以链接到构造函数的原型：

 console.log(xiaoMing.__proto__ === Person.prototype);//true  console.log(xiaoMing.__proto__ === Person.prototype);//true

可以通过instanceof检查对象的类型 (所有的对象均继承于Object):

 console.log(xiaoZhang instanceof Person);//true  console.log(xiaoZhang instanceof Object);//true  console.log(xiaoMing instanceof Person);//true  console.log(xiaoMing instanceof Object);//true

4  构造函数模式与单例模式结合

 <!DOCTYPE html> <html>     <head>         <meta charset="utf-8">         <title></title>     </head>     <body>     </body>     <script>         var Student = {             Person: function(name, age) {                 if (!(this instanceof Student.Person)) {                     return new Student.Person(name, age);                 }                 this.name = name;                 this.age = age;                 this.sayName = function() {                     return '我是:' + this.name + '，年龄：' + this.age;                 }             }         }          var Employee = {             Person: function(name, age) {                 if (!(this instanceof Employee.Person)) {                     return new Employee.Person(name, age);                 }                 this.name = name;                 this.age = age;                 this.sayName = function() {                     return '我是:' + this.name + '，年龄：' + this.age;                 }             }         }          var xiaoMing = new Student.Person('小明', 20);         alert(xiaoMing.sayName());         var xiaoZhang = new Employee.Person('小张', 30, );         alert(xiaoZhang.sayName());     </script> </html>



 
 
 
 


本页所有内容来自官方网站 http://www.imapbox.com 新闻来源：互联网搜索引擎和新闻站

本网页所有图片由 ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片，下载并得到。

ImageBox 图片批量下载器 工具地址: 网页图片批量下载工具-最新版本下载

非凡下载站地址：http://www.crsky.com/soft/35838.html

本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。

ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载

本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.




文章目录

  • 全球报导 (16311)
  • 全球云计算 (29506)
  • 程序员专区 (1974)
  • Imap 全球通用标准协议 (7)
  • 全球邮局列表 (17)
  • Imapbox 系列软件 (3)
  • 产品一览 (6)
  • 事业方向 (7)
  • 联系我们 (2)

官方链接

imapbox邮箱网盘 imapbox 海外官网 iMapBox百度百科

登录