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 相关文章推荐
一个对于js this关键字的问题
Jan 09 Javascript
编写自己的jQuery插件简单实现代码
Apr 19 Javascript
Jquery选中或取消radio示例
Sep 29 Javascript
js计算字符串长度包含的中文是utf8格式
Oct 15 Javascript
javascript 定时器工作原理分析
Dec 03 Javascript
vue axios同步请求解决方案
Sep 29 Javascript
深入浅析Vue.js计算属性和侦听器
May 05 Javascript
Vue组件之单向数据流的解决方法
Nov 10 Javascript
js实现随机数小游戏
Jun 28 Javascript
微信小程序 如何保持登录状态
Aug 16 Javascript
微信小程序实现按字母排列选择城市功能
Nov 25 Javascript
react项目从新建到部署的实现示例
Feb 19 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
php file_exists 检查文件或目录是否存在的函数
2010/05/10 PHP
PHP弹出对话框技巧详细解读
2015/09/26 PHP
分享PHP源码批量抓取远程网页图片并保存到本地的实现方法
2015/12/01 PHP
php 无限分类 树形数据格式化代码
2016/10/11 PHP
Centos 6.5系统下编译安装PHP 7.0.13的方法
2016/12/19 PHP
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
location.href语句与火狐不兼容的问题
2010/07/04 Javascript
js中获取事件对象的方法小结
2011/03/13 Javascript
jQuery表格行换色的三种实现方法
2011/06/27 Javascript
JavaScript SetInterval与setTimeout使用方法详解
2013/11/15 Javascript
jQuery Masonry瀑布流插件使用详解
2014/11/17 Javascript
JS实现的左侧竖向滑动菜单效果代码
2015/10/19 Javascript
JavaScript 七大技巧(二)
2015/12/13 Javascript
js实现下拉列表选中某个值的方法(3种方法)
2015/12/17 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
2016/05/31 Javascript
bootstrap日历插件datetimepicker使用方法
2016/12/14 Javascript
Vue.js如何实现路由懒加载浅析
2017/08/14 Javascript
详解wow.js中各种特效对应的类名
2017/09/13 Javascript
在vscode里使用.vue代码模板的方法
2018/04/28 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
2018/11/01 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
2019/07/15 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
2020/08/10 Javascript
解决vue项目,npm run build后,报路径错的问题
2020/08/13 Javascript
浅谈python中截取字符函数strip,lstrip,rstrip
2015/07/17 Python
实例解析Python设计模式编程之桥接模式的运用
2016/03/02 Python
使用Django启动命令行及执行脚本的方法
2018/05/29 Python
Python机器学习之scikit-learn库中KNN算法的封装与使用方法
2018/12/14 Python
python中matplotlib条件背景颜色的实现
2019/09/02 Python
python 8种必备的gui库
2020/08/27 Python
西班牙电子产品购物网站:Electronicamente
2018/07/26 全球购物
英国设计的甲板鞋和船鞋:Chatham
2018/12/06 全球购物
租赁意向书范本
2014/04/01 职场文书
机关党员进社区活动总结
2014/07/05 职场文书
2016圣诞节贺卡寄语
2015/12/07 职场文书
本地通过nginx配置反向代理的全过程记录
2021/03/31 Servers