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 学习笔记(六)
Dec 31 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
Aug 12 Javascript
Jquery 例外被抛出且未被接住原因介绍
Sep 04 Javascript
javacript获取当前屏幕大小
Jun 04 Javascript
JQuery的attr 与 val区别
Jun 12 Javascript
js 判断一组日期是否是连续的简单实例
Jul 11 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
Aug 16 Javascript
vuex 使用文档小结篇
Jan 11 Javascript
vue监听键盘事件的快捷方法【推荐】
Jul 11 Javascript
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
JS中的算法与数据结构之常见排序(Sort)算法详解
Aug 16 Javascript
Vue-resource安装过程及使用方法解析
Jul 21 Javascript
使用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
Codeigniter实现智能裁剪图片的方法
2014/06/12 PHP
PHP遍历目录函数opendir()、readdir()、closedir()、rewinddir()总结
2014/11/18 PHP
PHP实现微信红包金额拆分试玩的算法示例
2018/04/07 PHP
js实现翻页后保持checkbox选中状态的实现方法
2012/11/03 Javascript
JS中把字符转成ASCII值的函数示例代码
2013/11/21 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
2014/06/16 Javascript
jquery中trigger()无法触发hover事件的解决方法
2015/05/07 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
2015/10/31 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
2016/08/05 Javascript
angular route中使用resolve在uglify压缩后问题解决
2016/09/21 Javascript
用move.js库实现百叶窗特效
2017/02/08 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
2017/02/08 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
2017/02/21 Javascript
vue.js项目打包上线的图文教程
2017/11/16 Javascript
浅谈VUE监听窗口变化事件的问题
2018/02/24 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
vue移动端监听滚动条高度的实现方法
2018/09/03 Javascript
[49:20]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
跟老齐学Python之开始真正编程
2014/09/12 Python
Python选课系统开发程序
2016/09/02 Python
Python制作钉钉加密/解密工具
2016/12/07 Python
python导入模块交叉引用的方法
2019/01/19 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
详解Anaconda安装tensorflow报错问题解决方法
2020/11/01 Python
纯CSS3实现Material Design效果
2017/03/09 HTML / CSS
俄罗斯在线大型超市:ТутПросто
2021/01/08 全球购物
揠苗助长教学反思
2014/02/04 职场文书
销售人员职业生涯规划范文
2014/03/01 职场文书
四风问题个人自查剖析材料思想汇报
2014/09/21 职场文书
2014年英语工作总结
2014/12/20 职场文书
捐助感谢信
2015/01/22 职场文书
自我工作评价范文
2015/03/06 职场文书
对领导班子的意见和建议
2015/06/08 职场文书
职场中的你,辞职信写对了吗?
2019/06/26 职场文书
只用Python就可以制作的简单词云
2021/06/07 Python