当前位置:主页 > javascript教程 > javascript设计模式之对象工厂函数与构造函数详解

javascript设计模式之对象工厂函数与构造函数实例详解

发布:2020-01-28 19:27:21 144


给大家整理一篇javascript相关的编程文章,网友乌水彤根据主题投稿了本篇教程内容,涉及到javascript、设计模式、工厂函数、构造函数、javascript设计模式之对象工厂函数与构造函数详解相关内容,已被662网友关注,如果对知识点想更进一步了解可以在下方电子资料中获取。

javascript设计模式之对象工厂函数与构造函数详解

下面通过文字详解加代码分析的方式给大家分享下javascript设计模式之对象工厂函数与构造函数的相关知识。

概述使用对象字面量,或者向空对象中动态地添加新成员,是最简单易用的对象创建方法。然而,除了这两种常用的对象创建方式,JavaScript还提供了其他方法创建对象。1).使用工厂函数创建对象我们可以编写一个函数,此函数的功能就是创建对象,可将其.

概述

使用对象字面量,或者向空对象中动态地添加新成员,是最简单易用的对象创建方法。
然而,除了这两种常用的对象创建方式,JavaScript还提供了其他方法创建对象。
1).使用工厂函数创建对象

我们可以编写一个函数,此函数的功能就是创建对象,可将其称为“对象工厂方法”。

 

复制代码 代码如下:

//工厂函数    
 function createPerson(name, age, job) {        
 var o = new Object();        
 o.name = name;        
 o.age = age;        
 o.job = job;        
 o.sayName = function () {            
 console.info(this.name);        
 };        
 return o;      } //使用工厂函数创建对象    
 var person1 = createPerson('张三', 29, '软件工程师');    
 var person2 = createPerson('李四', 40, '医生');
 

 

2).定义对象构造函数

  a).对象构造函数首字母大写
  b).内部使用this关键字给对象添加成员
  c).使用new关键字调用对象构造函数

 

复制代码 代码如下:

//定义对象“构造”函数     
function Person(name, age, job) {
this.name = name;        
 this.age = age;         
this.job = job;         
this.sayName = function () {            

 

  console.info(this.name);         
};     
} //使用new调用对象构造函数创建对象    
 var p1 = new Person('张三', 29, '软件工程师');     

var p2 = new Person('李四', 40, '医生');

 

以普通方式调用的“构造函数”

构造函数其实也是一个函数,不同之处在于调用它时必须要加一个“new”关键字,如果不加这个关键字,则对它的调用被认为是普通函数调用。

 

复制代码 代码如下:

 //作为普通函数调用的构造函数,通过this添加的属性,
//成为了window对象的属性与方法。
console.info(window.name);//张三
console.info(window.age); //29
console.info(window.job); //软件工程师

 

 

 

对象构造函数长得这个样:

 

复制代码 代码如下:

function Person (name) {
this.name = name;
 this.say = function () {
 return "I am " + this.name;
  };
}

 

实际上是这样(示意):

 

复制代码 代码如下:

function Person (name) {
// var this = {};
 this.name = name;
 this.say = function () {
return "I am " + this.name;
 };
    // return this;
}

 

构造函数完成的工作

1. 创建一个新的对象
2. 让构造函数的this引用这一新创建的对象
3. 执行构造函数中的代码,这些代码通常完成向新对象添加属性的工作
4. 向外界返回新创建的对象引用。

对象构造函数与对象工厂方法的区别

1. 对象构造函数中没有显式的对象创建代码
2. 新对象应具备的属性与方法是通过this引用添加的.
3. 对象构造函数中没有return语句

 通常会把对象构造函数的首字母设置为大写的,以区别于普通函数。
对象的constructor属性

a).使用对象工厂函数创建对象,每个对象的constructor属性引用Object()

 

复制代码 代码如下:

var person = createPerson('张三', 29, '软件工程师');
 //使用工厂方法创建对象,

 

其constructor属性引用Object()函数
console.info(person1.constructor === Object); 

//true

 

b).使用对象构造函数创建对象,每个对象的constructor属性引用这个构造函数

 

复制代码 代码如下:

var p = new Person('张三', 29, '软件工程师');
//使用对象构造函数创建对象,
//每个对象的constructor属性,引用这个构造函数
console.info(p.constructor === Person);
 //true如何避免“忘记”new?可以使用arguments.callee解决这个问题     
//了解arguments.callee的作用    
function TestArgumentsCallee()
 {         
console.info(this);         
console.info(this instanceof TestArgumentsCallee);        
 console.info(this instanceof arguments.callee);    
 };     
TestArgumentsCallee(); //window                                         

 

//false                                         
//false     
new TestArgumentsCallee(); 
//TestArgumentsCallee             
//true                                             

  //true

 

于是,可以直接用arguments.callee

 

复制代码 代码如下:

 //避免忘记new    
 function MyObject(value)
{        
 if (!(this instanceof arguments.callee))

 

{            
 //如果调用者忘记加上new了,就加上new再调用一次             

return new MyObject(value);        
 }        
 this.prop = value;    
 }     
//测试     
var obj1 = new MyObject(100);    
 console.info(obj1.prop);//100    
 var obj2 = MyObject(200);       
console.info(obj2.prop); //200

 

以上内容就是javascript设计模式之对象工厂函数与构造函数详解,希望大家喜欢。


参考资料

相关文章

  • 掌握JavaScript中面向对象编程之概论

    发布:2020-03-11

    这篇文章主要介绍了深入理解JavaScript系列(17):面向对象编程之概论详细介绍,本文讲解了概论、范式与思想、基于类特性和基于原型、基于静态类、层次继承等内容,需要的朋友可以参考下


  • Javascript中import和require用法分析

    发布:2021-05-12

    本篇文章主要介绍了Javascript(es2016) import和require用法和区别详解,具有一定的参考价值,有兴趣的可以了解下


  • JavaScript中Date类型详解

    发布:2020-01-15

    下面小编就为大家带来一篇JavaScript:Date类型全面解析。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,祝大家游戏愉快哦


  • 详解使用canvas实现围绕旋转动画

    发布:2020-02-29

    这篇文章主要为大家详细介绍了JavaScript canvas实现围绕旋转动画,具有一定的参考价值,感兴趣的小伙伴们可以参考一下


  • JavaScript输出所选择起始与结束日期的实例代码

    发布:2019-08-02

    这篇文章主要介绍了JavaScript输出所选择起始与结束日期的方法,涉及javascript结合HTML5元素操作日期运算的相关实现技巧,需要的朋友可以参考下


  • 《Python编程:从入门到实践》课后习题及答案

    发布:2018-12-01

    这篇文章主要介绍了JavaScript简介,都是非常基础的内容,有需要的小伙伴参考下吧。


  • 如何用Javascript将图片的绝对路径转换为base64编码

    发布:2020-02-21

    这篇文章主要介绍了Javascript将图片的绝对路径转换为base64编码的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • java设计模式中代理模式的知识点

    发布:2020-06-18

    下面小编就为大家带来一篇java设计模式-代理模式(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧


网友讨论