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 相关文章推荐
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
Nov 16 Javascript
javascript学习笔记(十) js对象 继承
Jun 19 Javascript
jquery中show()、hide()和toggle()用法实例
Jan 15 Javascript
DOM 事件流详解
Jan 20 Javascript
js实现图片和链接文字同步切换特效的方法
Feb 20 Javascript
JavaScript仿网易选项卡制作代码
Oct 06 Javascript
webpack2.0配置postcss-loader的方法
Aug 17 Javascript
详解layui中的树形关于取值传值问题
Jan 16 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
Aug 10 Javascript
基于js Canvas实现二次贝塞尔曲线
Dec 25 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
Jul 07 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
Oct 30 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
php实现爬取和分析知乎用户数据
2016/01/26 PHP
CodeIgniter表单验证方法实例详解
2016/03/03 PHP
yii2项目实战之restful api授权验证详解
2017/05/20 PHP
PHP 的Opcache加速的使用方法
2017/12/29 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
修复IE9&safari 的sort方法
2011/10/21 Javascript
非html5实现js版弹球游戏示例代码
2013/09/22 Javascript
实例讲解JS中数组Array的操作方法
2014/05/09 Javascript
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
解析Node.js基于模块和包的代码部署方式
2016/02/16 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
2016/02/19 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
2016/04/29 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
2016/07/20 Javascript
AngularJS 服务详细讲解及示例代码
2016/08/17 Javascript
基于AGS JS开发自定义贴图图层
2017/03/31 Javascript
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
Angular排序实例详解
2017/06/28 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
p5.js入门教程之图片加载
2018/03/20 Javascript
[45:34]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.18
2020/12/19 DOTA
python使用循环实现批量创建文件夹示例
2014/03/25 Python
python爬虫入门教程--优雅的HTTP库requests(二)
2017/05/25 Python
python验证码识别教程之滑动验证码
2018/06/04 Python
Python延时操作实现方法示例
2018/08/14 Python
简单了解python代码优化小技巧
2019/07/08 Python
python中def是做什么的
2020/06/10 Python
python3通过subprocess模块调用脚本并和脚本交互的操作
2020/12/05 Python
HTML5 Canvas的常用线条属性值总结
2016/03/17 HTML / CSS
西班牙购买行李箱和背包网站:Maletas Greenwich
2019/10/08 全球购物
Linux常见面试题
2013/03/18 面试题
大学生职业生涯规划书范文
2014/01/14 职场文书
2015年销售工作总结范文
2015/03/30 职场文书
物流仓管员岗位职责
2015/04/01 职场文书
离婚起诉书范本
2015/05/18 职场文书
利用Python判断整数是否是回文数的3种方法总结
2021/07/07 Python