javascript原型模式用法实例详解


Posted in Javascript onJune 04, 2015

本文实例讲述了javascript原型模式用法。分享给大家供大家参考。具体分析如下:

一般在了解了工厂模式和构造函数模式的弊端之后,就知道为什么需要原型模式了
 
原型模式i的定义:每个函数都有一个prototype(原型)属性,这个属性是一个对象,它的用途是包含可以由特定类型的所有实例共享的属性和方法。比如在构造函数模型中sayInformation()方法,如果声明两个实例就要构造两次sayInformation方法,但是声明两次是没有必要的,这就是为什么有原型模式的出现(尼玛,网上那些博客上面都是扯谈的东西,还是看书讲的容易理解),sayInformation()声明为原型模式之后,实例就共享了,就没有必要声明两次了

function Person(){}
Person.prototype.name="jack";
Person.prototype.age=10;
Person.prototype.sayInformation=function()
{
  console.log("my name is"+this.name+" age is"+this.age);
}
var person1 = new Person();
person1.sayInformation();
console.info(person1.name);
//来自原型的属性name
person1.name="Greg";
//修改实例的name属性
console.info(person1.name);
//来自实例的属性name
delete person1.name ;
//来自实例的属性,这里删除的是实例的属性,但是原型的属性依然存在
console.info(person1.name);
//来自原型的属性name
var person2 = new Person();
person2.sayInformation();
console.info(person1.hasOwnProperty("name"));
//hasOwnProperty检查属性是属于实例还是原型中,如果是实例中就返回true
console.info(person1.name==person2.name);
console.info(person1.sayInformation==person2.sayInformation);
console.info(person1.constructor);
//指向person1的构造函数
//原型更加简便的写法
function Person2(){}
Person2.prototype={
  name:"jack",
  age:29,
  sayInformationfunction:function()
    {
      console.log("my name is"+this.name+" age is"+this.age);
    }
}

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

Javascript 相关文章推荐
javascript 鼠标滚轮事件
Apr 09 Javascript
Javascript高级技巧分享
Feb 25 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
Jan 27 Javascript
基于javascript html5实现3D翻书特效
Mar 14 Javascript
使用AJAX实现Web页面进度条的实例分享
May 06 Javascript
vuejs2.0实现一个简单的分页示例
Feb 22 Javascript
解决vue-cli3 使用子目录部署问题
Jul 19 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
Aug 19 Javascript
深入理解react 组件类型及使用场景
Mar 07 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
Nov 08 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 Javascript
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
使用JavaScript刷新网页的方法
Jun 04 #Javascript
JavaScript中Cookies的相关使用教程
Jun 04 #Javascript
javascript组合使用构造函数模式和原型模式实例
Jun 04 #Javascript
浅析JavaScript中的事件机制
Jun 04 #Javascript
JavaScript中指定函数名称的相关方法
Jun 04 #Javascript
JavaScript中Function()函数的使用教程
Jun 04 #Javascript
JavaScript中的函数嵌套使用
Jun 04 #Javascript
You might like
3
2006/10/09 PHP
WINDOWS下php5.2.4+mysql6.0+apache2.2.4+ZendOptimizer-3.3.0配置
2008/03/28 PHP
Netbeans 8.2将支持PHP7 更精彩
2016/06/13 PHP
PHP简单创建压缩图的方法
2016/08/24 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
图片连续滚动代码[兼容IE/firefox]
2009/06/11 Javascript
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
js控制frameSet示例
2013/09/10 Javascript
javascript闭包传参和事件的循环绑定示例探讨
2014/04/17 Javascript
最好用的Bootstrap fileinput.js文件上传组件
2016/12/12 Javascript
nodejs利用ajax实现网页无刷新上传图片实例代码
2017/06/06 NodeJs
JavaScript中关于class的调用方法
2017/11/28 Javascript
layui实现动态和静态分页
2018/04/28 Javascript
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
微信小程序如何调用新闻接口实现列表循环
2019/07/02 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
2019/11/06 Javascript
js中延迟加载和预加载的具体使用
2021/01/14 Javascript
[02:26]DOTA2英雄米拉娜基础教程
2013/11/25 DOTA
Python的爬虫包Beautiful Soup中用正则表达式来搜索
2016/01/20 Python
Python3实现发送QQ邮件功能(html)
2017/12/15 Python
基于anaconda下强大的conda命令介绍
2018/06/11 Python
vscode写python时的代码错误提醒和自动格式化的方法
2020/05/07 Python
python使用自定义钉钉机器人的示例代码
2020/06/24 Python
前后端结合实现amazeUI分页效果
2020/08/21 HTML / CSS
海淘零差价,宝贝全球购: 宝贝格子
2016/08/24 全球购物
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
古驰英国官网:GUCCI英国
2020/03/07 全球购物
小饰品店的创业计划书范文
2013/12/28 职场文书
大三毕业自我鉴定
2014/01/15 职场文书
公务员党员评议表自我鉴定
2014/09/14 职场文书
2014年业务工作总结
2014/11/17 职场文书
2015年国庆节慰问信
2015/03/23 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
JS不要再到处使用绝对等于运算符了
2021/04/30 Javascript
用Python爬取某乎手机APP数据
2021/06/15 Python
MySQL into_Mysql中replace与replace into用法案例详解
2021/09/14 MySQL