JavaScript 原型学习总结


Posted in Javascript onOctober 29, 2010

每个对像都有一个隐慝的属性用于指向到它的父对像(构造对像的函数)的原型(这里称为父原型或隐式原型),并从中继承它的属性和方法 [函数对像除了父原型引用外,还有一个显式的原型引用],在一般情况下,对像的父原型是不可以访问的,而函数对像的显式原型可以通过FunctionName.prototype进行访问 [在FireFox中你可以通过对像的__proto__属性来访问对像的父原型]

这个原型属性本身又是一个Object类型的对像,因此可以给这个原型属性添加任意的属性和方法 让实例对像来继承它们

如: 一个String类型的对像的原型为String.prototype,如果我们想要给String类型的对像添加一些自定义的方法,那我们可以这样来实现(这里以添加一个类式VBscript中的trim方法为例)

String.prototype.trim=function(){ 
return this.replace(/^\s*|\s*$/g,"") 
} 
// " jiangsk540 ".trim();//return "jiagnsk540"

原型除了提供以上的特性之外,它还提供了一群同类实例对像共享属性和方法的机制 [也就相当于静态属性或静态函数,无论用构造函数创建了多少个实例对像,在原型上定义的属性和方法从头到尾只定义了一次,所有实例对像都共享使用这一个属性或方法 但并非和C++或JAVA的静态属性或静态函数的概念相同]
function Class1(name){ 
this.name = name; 
} 
Class1.prototype.show=function(){ 
alert("name="+this.name); 
} 
var m1 = new Class1("jiangsk540"); 
var m2 = new Class1("毛狮子"); 
alert(m1.show===m2.show);//显示 true

动态给构造函数原型添加的属性或方法即可被先前建立的对像立即调用

function Class1(name){ 
this.name = name; 
} 
Class1.prototype.show=function(){ 
alert("name="+this.name); 
} 
var m1 = new Class1("jiangsk540"); 
Class1.prototype.say=function(){ 
alert("Hi"); 
} 
m1.say()//调用成功 
/* 
注意:只有为构造函数的原型添加的属性或方法才能被已经创建的对像立即调用 
如果是改变构造函数原型的引用那么就不能被已经创建的对像立即调用 
*/ 
Class1.prototype={newP:"jiangsk540"}; 
alert(m1.newP)//undefined
Javascript 相关文章推荐
js验证表单大全
Nov 25 Javascript
csdn 博客中实现运行代码功能实现
Aug 29 Javascript
基于jquery的超简单上下翻
Apr 20 Javascript
jquery 查找iframe父级页面元素的实现代码
Aug 28 Javascript
jQuery层次选择器选择元素使用介绍
Apr 18 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
Apr 07 Javascript
javascript数组去重方法分析
Dec 15 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
Aug 28 Javascript
layui表单提交到后台自动封装到实体类的方法
Sep 12 Javascript
vue使用recorder.js实现录音功能
Nov 22 Javascript
JS判断数组是否包含某元素实现方法汇总
Jun 24 Javascript
基于vue--key值的特殊用处详解
Jul 31 Javascript
用JQuery调用Session的实现代码
Oct 29 #Javascript
基于jquery 的一个progressbar widge
Oct 29 #Javascript
JQuery开发的数独游戏代码
Oct 29 #Javascript
Web前端设计模式  制作漂亮的弹出层
Oct 29 #Javascript
10个基于Jquery的幻灯片插件教程
Oct 29 #Javascript
jQuery.ajax 用户登录验证代码
Oct 29 #Javascript
Jquery Autocomplete 结合asp.net使用要点
Oct 29 #Javascript
You might like
apache php模块整合操作指南
2012/11/16 PHP
解决php接收shell返回的结果中文乱码问题
2014/01/23 PHP
PHP实现的策略模式示例
2019/03/20 PHP
因str_replace导致的注入问题总结
2019/08/08 PHP
javascript eval函数深入认识
2009/02/21 Javascript
JS 树形递归实例代码
2010/05/18 Javascript
JS实现的省份级联实例代码
2013/06/24 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
2013/10/15 Javascript
jquery批量设置属性readonly和disabled的方法
2014/01/24 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
2014/04/16 Javascript
jquery中append()与appendto()用法分析
2014/11/14 Javascript
nodejs简单实现中英文翻译
2015/05/04 NodeJs
javascript框架设计之浏览器的嗅探和特征侦测
2015/06/23 Javascript
JavaScript每天定时更换皮肤样式的方法
2015/07/01 Javascript
javascript弹性运动效果简单实现方法
2016/01/08 Javascript
vue2.0父子组件及非父子组件之间的通信方法
2017/01/21 Javascript
js实现音频控制进度条功能
2017/04/01 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
vue组件 keep-alive 和 transition 使用详解
2019/10/11 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
2020/01/22 Javascript
关于javascript中的promise的用法和注意事项(推荐)
2021/01/15 Javascript
Python使用gensim计算文档相似性
2016/04/10 Python
python编程实现归并排序
2017/04/14 Python
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
解决django FileFIELD的编码问题
2020/03/30 Python
解决pycharm导入numpy包的和使用时报错:RuntimeError: The current Numpy installation (‘D:\\python3.6\\lib\\site-packa的问题
2020/12/08 Python
利用CSS3实现文本框的清除按钮相关的一些效果
2015/06/23 HTML / CSS
AVON雅芳官网:世界上最大的美容化妆品公司之一
2016/11/02 全球购物
邮政员工辞职信
2014/01/16 职场文书
什么是就业协议书
2014/04/17 职场文书
文明之星事迹材料
2014/05/09 职场文书
教育系统干部作风整顿心得体会
2014/09/09 职场文书
公司党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
承诺函格式模板
2015/01/21 职场文书
2015年度女工工作总结
2015/10/22 职场文书
安全责任协议书范本
2016/03/23 职场文书