js的Prototype属性解释及常用方法


Posted in Javascript onMay 08, 2014

函数:原型

每一个构造函数都有一个属性叫做原型(prototype,下面都不再翻译,使用其原文)。这个属性非常有用:为一个特定类声明通用的变量或者函数。

prototype的定义

你不需要显式地声明一个prototype属性,因为在每一个构造函数中都有它的存在。你可以看看下面的例子:

Example PT1

function Test()
{
}
alert(Test.prototype); // 输出 "Object"

给prototype添加属性

就如你在上面所看到的,prototype是一个对象,因此,你能够给它添加属性。你添加给prototype的属性将会成为使用这个构造函数创建的对象的通用属性。

例如,我下面有一个数据类型Fish,我想让所有的鱼都有这些属性:livesIn="water"和price=20;为了实现这个,我可以给构造函数Fish的prototype添加那些属性。

Example PT2

function Fish(name, color)
{
this.name=name;
this.color=color;
}
Fish.prototype.livesIn="water";
Fish.prototype.price=20;

接下来让我们作几条鱼:

var fish1=new Fish("mackarel", "gray");
var fish2=new Fish("goldfish", "orange");
var fish3=new Fish("salmon", "white");

再来看看鱼都有哪些属性:

for (int i=1; i<=3; i++)
{
var fish=eval_r("fish"+i);   // 我只是取得指向这条鱼的指针
alert(fish.name+","+fish.color+","+fish.livesIn+","+fish.price);
}

输出应该是:

"mackarel, gray, water, 20"
"goldfish, orange, water, 20"
"salmon, white water, 20"

你看到所有的鱼都有属性livesIn和price,我们甚至都没有为每一条不同的鱼特别声明这些属性。这时因为当一个对象被创建时,这个构造函数将会把它的属性prototype赋给新对象的内部属性__proto__。这个__proto__被这个对象用来查找它的属性。

你也可以通过prototype来给所有对象添加共用的函数。这有一个好处:你不需要每次在构造一个对象的时候创建并初始化这个函数。为了解释这一点,让我们重新来看Example DT9并使用prototype来重写它:

用prototype给对象添加函数

Example PT3

function Employee(name, salary)
{
this.name=name;               
this.salary=salary;
}
Employee.prototype.getSalary=function getSalaryFunction()
{
return this.salary;
}
Employee.prototype.addSalary=function addSalaryFunction(addition)
{
this.salary=this.salary+addition;
}

我们可以象通常那样创建对象:

var boss1=new Employee("Joan", 200000);
var boss2=new Employee("Kim", 100000);
var boss3=new Employee("Sam", 150000);

并验证它:

alert(boss1.getSalary());   // 输出 200000
alert(boss2.getSalary());   // 输出 100000
alert(boss3.getSalary());   // 输出 150000

这里有一个图示来说明prototype是如何工作的。这个对象的每一个实例(boss1, boss2, boss3)都有一个内部属性叫做__proto__,这个属性指向了它的构造器(Employee)的属性prototype。当你执行 getSalary或者addSalary的时候,这个对象会在它的__proto__找到并执行这个代码。注意这点:这里并没有代码的复制(和 Example DT8的图表作一下对比)。

js的Prototype属性解释及常用方法

Javascript 相关文章推荐
jquery中实现简单的tabs插件功能的代码
Mar 02 Javascript
javascript SpiderMonkey中的函数序列化如何进行
Dec 05 Javascript
Extjs实现进度条的两种便捷方式
Sep 26 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
Jan 14 Javascript
js对文章内容进行分页示例代码
Mar 05 Javascript
js计算任意值之间随机数的方法
Jan 16 Javascript
原生Js实现简易烟花爆炸效果的方法
Mar 20 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
Apr 15 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
May 20 Javascript
原生JS实现旋转木马式图片轮播插件
Apr 25 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
Mar 10 Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
Javascript玩转继承(一)
May 08 #Javascript
玩转方法:call和apply
May 08 #Javascript
jQuery产品间断向下滚动效果核心代码
May 08 #Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
May 08 #Javascript
jquery通过visible来判断标签是否显示或隐藏
May 08 #Javascript
setInterval计时器不准的问题解决方法
May 08 #Javascript
Js Jquery创建一个弹出层可加载一个页面
May 08 #Javascript
You might like
php下通过伪造http头破解防盗链的代码
2010/07/03 PHP
解析array splice的移除数组中指定键的值,返回一个新的数组
2013/07/02 PHP
PHP处理CSV表格文件的常用操作方法总结
2016/07/01 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
可输入的下拉框
2006/06/19 Javascript
ExtJs 表单提交登陆实现代码
2010/08/19 Javascript
基于JQuery的动态删除Table表格的行和列的代码
2011/05/12 Javascript
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
angularJS 中$attrs方法使用指南
2015/02/09 Javascript
PHP守护进程实例
2015/03/06 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
2017/04/22 Javascript
nodejs入门教程五:连接数据库的方法分析
2017/04/24 NodeJs
对于js垃圾回收机制的理解
2017/09/14 Javascript
javaScript实现滚动条事件详解
2020/03/24 Javascript
vue中element组件样式修改无效的解决方法
2018/02/03 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
2018/09/27 Javascript
JS实现换肤功能的方法实例详解
2019/01/30 Javascript
Python交换变量
2008/09/06 Python
详解Django中的过滤器
2015/07/16 Python
python Django批量导入数据
2016/03/25 Python
python difflib模块示例讲解
2017/09/13 Python
对TensorFlow中的variables_to_restore函数详解
2018/07/30 Python
django组合搜索实现过程详解(附代码)
2019/08/06 Python
使用 Supervisor 监控 Python3 进程方式
2019/12/05 Python
Python字典底层实现原理详解
2019/12/18 Python
python中Mako库实例用法
2020/12/31 Python
python中numpy数组与list相互转换实例方法
2021/01/29 Python
HTML5实现文件断点续传的方法
2017/01/04 HTML / CSS
给领导的检讨书
2014/02/16 职场文书
2014年小学重阳节活动策划方案
2014/09/16 职场文书
企业党建工作总结2015
2015/05/26 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
Python scrapy爬取起点中文网小说榜单
2021/06/13 Python
html中显示特殊符号(附带特殊字符对应表)
2021/06/21 HTML / CSS