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 相关文章推荐
用javascript实现的支持lrc歌词的播放器
May 17 Javascript
jquery animate 动画效果使用说明
Nov 04 Javascript
js 删除数组的几种方法小结
Feb 21 Javascript
Javascript原型链和原型的一个误区
Oct 22 Javascript
JavaScript学习小结(一)——JavaScript入门基础
Sep 02 Javascript
JavaScript DOM 学习总结(五)
Nov 24 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
Feb 14 Javascript
简单谈谈React中的路由系统
Jul 25 Javascript
第一个Vue插件从封装到发布
Nov 22 Javascript
微信小程序模板(template)使用详解
Jan 31 Javascript
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
Vue 3.x+axios跨域方案的踩坑指南
Jul 04 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人民币金额数字转中文大写的函数代码
2013/02/27 PHP
php5.3 goto函数介绍和示例
2014/03/21 PHP
php+redis实现多台服务器内网存储session并读取示例
2017/01/12 PHP
php快速导入大量数据的实例方法
2019/09/23 PHP
php7 参数、整形及字符串处理机制修改实例分析
2020/05/25 PHP
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
javascript操作excel生成报表全攻略
2014/05/04 Javascript
第一次接触神奇的Bootstrap菜单和导航
2016/08/01 Javascript
Bootstrap企业网站实战项目4
2016/10/14 Javascript
jquery-mobile基础属性与用法详解
2016/11/23 Javascript
利用纯js + transition动画实现移动端web轮播图详解
2017/09/10 Javascript
原生JS写Ajax的请求函数功能
2017/12/22 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
2018/09/01 Javascript
jQuery pagination分页示例详解
2018/10/23 jQuery
微信小程序身份证验证方法实现详解
2019/06/28 Javascript
JS异步处理的进化史深入讲解
2019/08/25 Javascript
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
python 中的divmod数字处理函数浅析
2017/10/17 Python
详解Python开发中如何使用Hook技巧
2017/11/01 Python
Python获取网段内ping通IP的方法
2019/01/31 Python
深度辨析Python的eval()与exec()的方法
2019/03/26 Python
浅谈pyqt5在QMainWindow中布局的问题
2019/06/21 Python
Python3 itchat实现微信定时发送群消息的实例代码
2019/07/12 Python
Python使用random模块生成随机数操作实例详解
2019/09/17 Python
python实现无边框进度条的实例代码
2020/12/30 Python
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
办公室主任岗位承诺书
2014/05/29 职场文书
人口与计划生育目标管理责任书
2014/07/29 职场文书
政风行风建设整改方案
2014/10/27 职场文书
党员思想汇报材料
2014/12/19 职场文书
2015年评职称工作总结范文
2015/04/20 职场文书
《开国大典》教学反思
2016/02/16 职场文书
灵能百分百第三季什么时候来?
2022/03/15 日漫
《雀魂PONG☆》4月1日播出 PV角色设定情报
2022/03/20 日漫