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 相关文章推荐
在html页面上拖放移动标签
Jan 08 Javascript
父节点获取子节点的字符串示例代码
Feb 26 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
Feb 03 Javascript
jQuery的框架介绍
May 11 Javascript
JavaScript中的操作符类型转换示例总结
May 30 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
Nov 10 Javascript
jQuery Easyui datagrid连续发送两次请求问题
Dec 13 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
May 02 Javascript
基于javascript的拖拽类封装详解
Apr 19 Javascript
用js简单提供增删改查接口
May 12 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
Oct 31 Javascript
Ajax是什么?Ajax高级用法之Axios技术
Apr 21 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
支持oicq头像的留言簿(二)
2006/10/09 PHP
用缓存实现静态页面的测试
2006/12/06 PHP
通过PHP CLI实现简单的数据库实时监控调度
2009/07/01 PHP
PHP版网站缓存加快打开速度的方法分享
2012/06/03 PHP
基于php的微信公众平台开发入门实例
2015/04/15 PHP
php实现的三个常用加密解密功能函数示例
2017/11/06 PHP
PHP面向对象五大原则之接口隔离原则(ISP)详解
2018/04/04 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
Packer 3.0 JS压缩及混淆工具 下载
2007/05/03 Javascript
浅谈javascript 面向对象编程
2009/10/28 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
JavaScript基于原型链的继承
2016/06/22 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
2016/11/22 Javascript
Angular2入门--架构总览
2017/03/29 Javascript
详解IWinter 一个路由转控制器的 Nodejs 库
2017/11/15 NodeJs
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
vue侧边栏动态生成下级菜单的方法
2018/09/07 Javascript
详解webpack4之splitchunksPlugin代码包分拆
2018/12/04 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
2018/12/21 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
2020/07/15 Javascript
[34:56]Ti4冒泡赛LGD vs Liquid 1
2014/07/14 DOTA
Python的Django框架中使用SQLAlchemy操作数据库的教程
2016/06/02 Python
python利用不到一百行代码实现一个小siri
2017/03/02 Python
django模板加载静态文件的方法步骤
2019/03/01 Python
Python3简单实现串口通信的方法
2019/06/12 Python
python画图把时间作为横坐标的方法
2019/07/07 Python
通过实例解析Python调用json模块
2019/12/11 Python
如何利用cmp命令比较文件
2013/09/23 面试题
财务管理专业自荐信范文
2013/12/24 职场文书
旅游与酒店管理专业求职信
2014/07/21 职场文书
初中国旗下的演讲稿
2014/08/28 职场文书
普通党员群众路线教育实践活动心得体会
2014/11/04 职场文书
2014年驻村干部工作总结
2014/11/17 职场文书
防溺水主题班会教案
2015/08/12 职场文书
创业计划书之川味火锅店
2019/09/02 职场文书