JS 创建对象的模式实例小结


Posted in Javascript onApril 28, 2020

本文实例总结了JS 创建对象的模式。分享给大家供大家参考,具体如下:

1.工厂模式

抽象了创建具体对象的过程,创建了一种函数,封装特定的接口创建对象的细节。

  • 新建一个对象
  • 定义属性和方法
  • return刚新建的对象
function createPerson(name, age, job) {
 var obj = new Object();
 obj.name = name;
 obj.age = age;
 obj.job = job;
 obj.sayHi = function() {
 congsole.log(this.name);
 };
 return obj;
}

var person1 = createPerson("name1", "age1", "job1");
var person2 = createPerson("name2", "age2", "job2");

存在问题:

没有解决对象识别的问题(怎么识别对象的类型)

2.构造函数模式

  • 不显式创建对象
  • 直接将属性和方法定义在this
  • 没有return
  • 通过 new操作符调用
function Person(name, age, job) {
 this.name = name;
 this.age = age;
 this.job = job;
 this.sayHi = function() {
 console.log(this.name);
 };
}

var person1 = new Person("name1", "age1", "job1");
var person2 = new Person("name2", "age2", "job2");

存在问题:

  • 每个方法都要在实例上创建一次

3.原型模式

创建的每一个函数都有prototype原型属性,这个属性是一个指针,指向一个对象,这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。

所有原生引用类型都在其构造函数的原型上定义了方法

function Person{

}

Person.prototype.name="name"
Person.prototype.age="age"
Person.prototype.job="job"
Person.prototype.sayHi=function(){
 console.log(this.name)
}

var person1=new Person()
var person2=new Person()

存在问题:

  • 所有属性是被很多实例共享的

4.组合构造和原型模式

构造函数用来定义实例属性,原型模式用来定义方法和共享的属性

function Person(name, age, job) {
 this.name = name;
 this.age = age;
 this.job = job;
}
Person.prototype={
 constructor:Person;
 sayHi:function(){
 console.log(this.name)
 }
}

var person1 = new Person("name1", "age1", "job1");

5.动态原型模式

这里对原型的修改,能够对所有实例生效,只在初次调用构造函数会执行

function Person(name,age,job){
 this.name=name;
 this.age=age;
 this.job=job;
 if(typeof this.sayHi !="function" ){
 Person.prototype.sayHi=functong(){
  console.log(this.name)
 }
 }
}

var person1 = new Person("name1", "age1", "job1");

6.寄生构造函数模式

工厂模式+构造函数

  • 返回的对象与构造函数、构造函数的原型属性之间没有关系
  • 不能依赖instanceof来去定对象原型
  • 不建议使用
function Person(name, age, job) {
 var obj = new Object();
 obj.name = name;
 obj.age = age;
 obj.job = job;
 obj.sayHi = function() {
 congsole.log(this.name);
 };
 return obj;
}

var person1 = new Person("name1", "age1", "job1");

7.稳妥构造模式

  • 没有公共属性
  • 不使用this
  • 不使用new
function Person(name, age, job) {
 var obj = new Object();
 // 定义室友变量和函数
 obj.sayHi = function() {
 congsole.log(name);
 };
 return obj;
}

var person1 = Person("name1", "age1", "job1");
// name1

摘抄自《JavaScript 高级程序设计》第六章

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 创建对象和构造类实现代码
Jul 30 Javascript
通用javascript脚本函数库 方便开发
Oct 13 Javascript
window.opener用法和用途实例介绍
Aug 19 Javascript
JavaScript数组的定义及数字操作技巧
Jun 06 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
Aug 29 Javascript
微信小程序  modal弹框组件详解
Oct 27 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
Mar 02 Javascript
JS实现移动端实时监听输入框变化的实例代码
Apr 12 Javascript
利用Javascript获取选择文本所在的句子详解
Dec 03 Javascript
angularJs中ng-model-options设置数据同步的方法
Sep 30 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
Nov 05 Javascript
JS实现继承的几种常用方式示例
Jun 22 Javascript
JavaScript console的使用方法实例分析
Apr 28 #Javascript
Node.js设置定时任务之node-schedule模块的使用详解
Apr 28 #Javascript
JavaScript Date对象功能与用法学习记录
Apr 28 #Javascript
JavaScript 链表定义与使用方法示例
Apr 28 #Javascript
Vue 3.0 全家桶抢先体验
Apr 28 #Javascript
React生命周期原理与用法踩坑笔记
Apr 28 #Javascript
js最全的数组的降维5种办法(小结)
Apr 28 #Javascript
You might like
PHP4实际应用经验篇(3)
2006/10/09 PHP
php自定义session示例分享
2014/04/22 PHP
在html页面上拖放移动标签
2010/01/08 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
php结合imgareaselect实现图片裁剪
2015/07/05 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
详解vue2.0脚手架的webpack 配置文件分析
2017/05/27 Javascript
angular中实现li或者某个元素点击变色的两种方法
2017/07/27 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
2018/08/30 Javascript
jquery拖拽自动排序插件使用方法详解
2020/07/20 jQuery
Angular 2使用路由自定义弹出组件toast操作示例
2019/05/10 Javascript
node.js中 redis 的安装和基本操作示例
2020/02/10 Javascript
详解JavaScript作用域 闭包
2020/07/29 Javascript
Python编程之多态用法实例详解
2015/05/19 Python
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
使用Python搭建虚拟环境的配置方法
2018/02/28 Python
python批量图片处理简单示例
2019/08/06 Python
Python类中的魔法方法之 __slots__原理解析
2019/08/26 Python
Python request post上传文件常见要点
2020/11/20 Python
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
2018/01/10 HTML / CSS
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
巴西化妆品商店:Lojas Rede
2019/07/26 全球购物
求职简历的自我评价怎样写好
2013/10/07 职场文书
2014年高考决心书
2014/03/11 职场文书
大学生党员个人剖析材料
2014/10/08 职场文书
2015年大学元旦晚会活动策划书
2014/12/09 职场文书
端午节活动总结报告
2015/02/11 职场文书
2015年仓库工作总结
2015/04/09 职场文书
2015年妇委会工作总结
2015/05/22 职场文书
运输公司工作总结
2015/08/11 职场文书
初中团支书竞选稿
2015/11/21 职场文书
2016年父亲节寄语
2015/12/04 职场文书
MySQL系列之十 MySQL事务隔离实现并发控制
2021/07/02 MySQL
B站评分公认最好看的动漫,你的名字评分9.9,第六备受喜欢
2022/03/18 日漫
疑《守望先锋2》A测截图泄露 或将推出新模式、新界面
2022/04/03 其他游戏