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 相关文章推荐
js获取图片大小的函数代码
Sep 20 Javascript
jquery对单选框,多选框,文本框等常见操作小结
Jan 08 Javascript
js中top的作用深入剖析
Mar 04 Javascript
js判断字符长度及中英文数字等
Mar 19 Javascript
js实现遮罩层划出效果是生成div而不是显示
Jul 29 Javascript
js实现获取焦点后光标在字符串后
Sep 17 Javascript
简介JavaScript中valueOf()方法的使用
Jun 05 Javascript
JS对HTML表格进行增删改操作
Aug 22 Javascript
javascript数组遍历的方法实例分析
Sep 13 Javascript
React中ES5与ES6写法的区别总结
Apr 21 Javascript
JS实现星星海特效
Dec 24 Javascript
vue项目配置sass及引入外部scss文件
Apr 14 Vue.js
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
PHP脚本的10个技巧(2)
2006/10/09 PHP
php中get_defined_constants函数用法实例分析
2015/05/12 PHP
老生常谈PHP位运算的用途
2017/03/12 PHP
PHP join()函数用法与实例讲解
2019/03/11 PHP
PHP操作Redis常用命令的实例详解
2020/12/23 PHP
Mootools 1.2教程(21)——类(二)
2009/09/15 Javascript
css值转换成数值请抛弃parseInt
2011/10/24 Javascript
JavaScript中的noscript元素属性位置及作用介绍
2013/04/11 Javascript
jquery实现简单手风琴菜单效果实例
2015/06/13 Javascript
jquery实现简单的遮罩层
2016/01/08 Javascript
学习Javascript面向对象编程之封装
2016/02/23 Javascript
浅谈Javascript数据属性与访问器属性
2016/07/26 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
2017/01/04 Javascript
JS 实现计算器详解及实例代码(一)
2017/01/08 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
2020/10/26 Javascript
手机端转换rem适应
2017/04/01 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
2017/06/15 Javascript
NodeJS 实现多语言的示例代码
2018/09/11 NodeJs
17道题让你彻底理解JS中的类型转换
2019/08/08 Javascript
详解利用eventemitter2实现Vue组件通信
2019/11/04 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
2020/04/26 Javascript
Python 文件重命名工具代码
2009/07/26 Python
Python语言的变量认识及操作方法
2018/02/11 Python
python一行sql太长折成多行并且有多个参数的方法
2018/07/19 Python
Python2与Python3的区别实例分析
2019/04/11 Python
Python常用模块之requests模块用法分析
2019/05/15 Python
Python requests模块基础使用方法实例及高级应用(自动登陆,抓取网页源码)实例详解
2020/02/14 Python
沙特阿拉伯电子产品和家用电器购物网站:Black Box
2019/07/24 全球购物
Gretna Green中文官网:苏格兰格林小镇
2019/10/16 全球购物
中文教师求职信
2014/02/22 职场文书
酒店节能减排方案
2014/05/26 职场文书
项目申报专员岗位职责
2014/07/09 职场文书
运输企业安全生产责任书
2014/07/28 职场文书
改作风抓落实促发展心得体会
2014/09/10 职场文书
办公室文员工作自我鉴定
2014/09/19 职场文书
反腐倡廉观后感
2015/06/08 职场文书