2019独角兽企业重金招聘Python工程师标准>>>

1. 对象字面量方式
对象字面量方式是创建自定义对象的首选模式,简单方便。

var per = {  name:'zhangsan',  age:25,  job:'html',  sayName:function(){  alert(this.name);  }
}

**缺点:**使用同一个接口创建很多对象,会产生大量的重复代码。比如我想再创建一个per1对象,我就得把上面的代码再重新写一遍,改变不同的属性值。

**2、工厂模式**
工厂模式抽象了创建具体对象的过程。由于在ECMAScript中无法创建类,开发人员就发明了一种函数,用函数来封装以特定接口创建对象的细节,如下面的例子:

function createPerson(name,age,job){  var o = new Object();  o.name = name;  o.age = age;  o.job = job;  o.sayName = function(){  alert(this.name);  }  return o;
}
var person1 = createPerson('zhang',30,'java');
var person2 = createPerson('zhao',25,'php');
//前端全栈学习交流圈:866109386
//面向1-3经验年前端开发人员
//帮助突破技术瓶颈,提升思维能力

函数createPerson()能够根据接受到的参数来构建一个包含所有必要信息的Person对象。可以无数次的调用这个函数,而每次它都会返回一个包含三个属性和一个方法的对象。

缺点:工厂模式虽然解决了创建多个相似对象的问题,但却没有解决对象识别的问题(即怎样知道一个对象的类型)。

**3、构造函数模式**
可以使用构造函数模式将前面的例子重写如下:

function Person(name,age,job){  this.name= name;  this.age = age;  this.job = job;  this.sayName = function(){  alert(this.name);  }
}
var person1 = new Person('zhang',30,'java');
var person2 = new Person('zhao',25,'php');
//前端全栈学习交流圈:866109386
//面向1-3经验年前端开发人员
//帮助突破技术瓶颈,提升思维能力

创建自定义的构造函数意味着将来可以将它的实例标识为一种特定的类型。而这正是构造函数模式胜过工厂模式的地方。

然而,使用构造函数的主要问题,就是每个方法都要在每个实例上重新创建一遍。在上面的例子中,person1和person2都有一个名为sayName()的方法,但那两个方法不是同一个Function的实例,创建两个完成同样任务的Function实例的确没有必要;况且有this对象在,根本不用在执行代码前就把函数绑定到特定对象上面。因此可以像下面这样,通过把函数定义转移到构造函数外部来解决这个问题。

function Person(name,age,job){  this.name= name;  this.age = age;  this.job = job;  this.sayName = sayName();
}
function sayName(){  alert(this.name);
}
var person1 = createPerson('zhang',30,'java');
var person2 = createPerson('zhao',25,'php');

在这个例子中,我们把sayName()函数的定义转移到构造函数外部。而在构造函数内部,我们将sayName属性设置成等于全局的sayName函数,这样person1和person2对象就共享了在全局作用域中定义的同一个sayName()函数。这样确实解决了两个函数在做同一件事的问题,可是新问题又来了:在全局作用域中定义的函数实际上只能被某个对象调用,这让全局作用域有点名不副实。更让人无法接受的是:如果对象需要定义很多方法,那么就要定义很多全局函数。好在,这些问题可以通过使用原型模式来解决。

**4、原型模式**
我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。使用原型对象的好处是可以让所有的对象实例共享他所包含的属性和方法。

function Person(){}
Person.prototype.name = 'zhang';
Person.prototype.age = '22';
Person.prototype.job = 'html5';
Person.prototype.sayName = function(){  alert(this.name);
};
var person1 = new Person();
var person2 = new Person();

原型模式也不是没有缺点。首先,它省略了为构造函数传递初始化参数这一环节,结果所有实例在默认情况下都将取得相同的属性值。虽然这会在某种程度上带来一些不方便,但还不是原型的最大问题。原型模式的最大问题是由共享的本性所导致的。

原型中所有属性是被很多实例共享的,这种共享对于函数非常合适。对于那些包含基本值的属性倒也说的过去,通过在实例上添加一个同名属性,可以隐藏原型中的对应属性。然后,对于包含引用类型的属性来说,问题就比较突出了。

function Person(){}
Person.prototype = {  constructor:Person,  name:'zhang',  age :'22',  job :'html5',  friends:\['wang','li'\],  sayName : function(){  alert(this.name);  }
};
var person1 = new Person();
var person2 = new Person();
person1.friends.push('zhao');
alert(person1.friends); //'wang,li,zhao'
alert(person2.friends); //'wang,li,zhao'
alert(person1.friends === person2.friends); //true

从上面的打印的结果我们就可以知道为什么很少人单独使用原型模式了,实例一般都是要有属于自己的全部属性的。

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

function Person(name,age,job){  this.name= name;  this.age = age;  this.job = job;  this.friends = \['wang','li'\];
}
Person.prototype = {  constructor:Person,  sayName : function(){  alert(this.name);  }
}
var person1 = new Person('zhang',26,'java',);
var person2 = new Person('sun',25,'php');
person1.friends.push('zhao');
alert(person1.friends); //'wang,li,zhao'
alert(person2.friends); //'wang,li'
alert(person1.friends === person2.friends); //false

在上面的例子中,实例属性都是在构造函数中定义的,而由所有实例共享的属性constructor和方法satName()则是在原型中定义的。而修改了person1.friends(向其中添加一个新字符串),并不会影响到person2.friends,因为他们分别引用了不同的数组。

转载于:https://my.oschina.net/u/3970421/blog/2939981

JavaScript实现创建自定义对象的常用方式总结相关推荐

  1. [置顶] 深入浅出Javascript(三)创建自定义对象以及属性、方法

    怎么样创建一个对象? 利用Object创建自定义对象 JavaScript能够自定义对象来扩展程序的功能,不仅如此,它还能扩展JavaScript提供的内置对象,新增内置对象的属性或方法 例如下面代码 ...

  2. JavaScript学习笔记:创建自定义对象

    文章目录 一.利用构造函数模式创建自定义对象 二.采用原型模式创建自定义对象 三.采用混合模式创建自定义对象 四.采用动态原型模式创建自定义对象 一.利用构造函数模式创建自定义对象 使用构造函数可以创 ...

  3. Js中自定义对象四种方式

    Js中自定义对象四种方式 1 类似JAVA有参构造方式: 1.定义对象: function 对象(属性[age]){追加属性:如(this.age = age)[this代表当前对象的地址值的引用]追 ...

  4. QT通过JavaScript动态创建QML对象

    QT通过JavaScript动态创建QML对象 通过JavaScript动态创建QML对象 动态创建对象 动态创建组件 从QML字符串创建对象 维护动态创建的对象 动态删除对象 通过JavaScrip ...

  5. 在 JavaScript 中创建 JSON 对象

    <html> <body> <h2>在 JavaScript 中创建 JSON 对象</h2><p> Name: <span id=& ...

  6. 【Spring 工厂】反转控制与依赖注入、Spring工厂创建复杂对象3种方式

    反转控制与依赖注入 反转控制 与 依赖注入 反转控制(IOC Inverse of Control) 依赖注入 (Dependency Injection - DI) Spring工厂创建复杂对象(3 ...

  7. 纷享销客CRM自定义函数:创建自定义对象数据

    // 构造主对象 Map data = ["name": "第一条测试数据","field_3f5kI__c": "12143&q ...

  8. javaScript中创建数组的3种方式

    JS数组定义及详解 javascript如何定义数组? 直接上代码和截图 //javaScript中创建数组的3种方式 //方式1 var names = ["令狐冲", &quo ...

  9. 小汤学编程之JavaScript学习day04——自定义对象、原型与原型链、BOM

    一.自定义对象 1.对象的定义     2.对象的使用 二.原型与原型链 1.JS的继承结构图     2.关键点 三.BOM 1.window对象     2.document对象     3.lo ...

最新文章

  1. PAT(甲级)2019年秋季考试 7-3 Postfix Expression
  2. RxJava2 源码解析(一)
  3. opencv计算物体姿态旋转_OpenCV轮廓检测,计算物体旋转角度
  4. 20165234 《Java程序设计》第六周学习总结
  5. 19个AI热门应用领域,你确定不了解一下?
  6. 关于某题左列定宽右列宽度自适应布局的学习
  7. 遇见格灵深瞳那一刻,我一见倾心
  8. 电商常用字体_字体商用有风险,侵权罚款上千万!告诉你怎么正确使用
  9. Python识别表格图_还在为员工的考勤记录保存在一行发愁吗,python帮你5秒搞定...
  10. 全志f1c100s 开发环境搭建
  11. SIM868硬件设计学习(一)
  12. 单个索引和组合索引(联合索引)谁效率高
  13. 4000元台式电脑组装配置单2022 4000元组装电脑配置清单
  14. 微信公众号开发 入手
  15. 把html页面保存为图片格式
  16. 中国驾照的类型和可驾驶汽车类型
  17. 微信小程序商城源码学习
  18. Windows 11和Windows 2022 TLS/SSL(Schannel SSP)的加密套件
  19. 【Go】Go Ubuntu 安装 gvm:Go 版本管理工具
  20. C++简单程序典型案例

热门文章

  1. boost::iterator_archetypes用法的测试程序
  2. boost::mcgregor_common_subgraphs用法的测试程序
  3. boost::geometry::strategy::distance::haversine用法的测试程序
  4. VTK:Rendering之AmbientSpheres
  5. VTK:InfoVis之DelimitedTextWriter
  6. VTK:图表之DepthFirstSearchAnimation
  7. OpenCV通过维纳滤镜恢复散焦图像的实例(附完整代码)
  8. OpenGL延迟着色之二
  9. C++coin change 硬币找零(附完整源码)
  10. QT的QPainterPath类的使用