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数组插入一条记录的代码
Aug 30 Javascript
JQuery扩展插件Validate 5添加自定义验证方法
Sep 05 Javascript
js判断当前浏览器类型,判断IE浏览器方法
Jun 02 Javascript
JavaScript原型及原型链终极详解
Jan 04 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
Aug 01 Javascript
原生js仿jquery实现对Ajax的封装
Oct 04 Javascript
jQuery实现三级联动效果
Mar 02 Javascript
JS 60秒后重新发送验证码的实例讲解
Jul 26 Javascript
原生JS实现的碰撞检测功能示例
May 18 Javascript
详解webpack4多入口、多页面项目构建案例
May 25 Javascript
JS实现判断图片是否加载完成的方法分析
Jul 31 Javascript
vue router 动态路由清除方式
May 25 Vue.js
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
PHP5中MVC结构学习
2006/10/09 PHP
php设计模式 FlyWeight (享元模式)
2011/06/26 PHP
VIM中设置php自动缩进为4个空格的方法详解
2013/06/14 PHP
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
php中socket通信机制实例详解
2015/01/03 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
解析javascript系统错误:-1072896658的解决办法
2013/07/08 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
2015/04/12 Javascript
BootStrap中Table分页插件使用详解
2016/10/09 Javascript
Vue中添加过渡效果的方法
2017/03/16 Javascript
nodejs入门教程三:调用内部和外部方法示例
2017/04/24 NodeJs
微信小程序实现的图片保存功能示例
2019/04/24 Javascript
封装微信小程序http拦截器过程解析
2019/08/13 Javascript
解决layer.prompt无效的问题
2019/09/24 Javascript
Node.js API详解之 querystring用法实例分析
2020/04/29 Javascript
用Python的urllib库提交WEB表单
2009/02/24 Python
python使用PyQt5的简单方法
2019/02/27 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
python 读取.nii格式图像实例
2020/07/01 Python
Python 在局部变量域中执行代码
2020/08/07 Python
python爬虫搭配起Bilibili唧唧的流程分析
2020/12/01 Python
python中四舍五入的正确打开方式
2021/01/18 Python
详解python的xlwings库读写excel操作总结
2021/02/26 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
HTML5实践-图片设置成灰度图
2012/11/12 HTML / CSS
HTML5 History API 实现无刷新跳转
2016/01/11 HTML / CSS
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
电力公司个人求职信范文
2014/02/04 职场文书
财务内勤岗位职责
2014/04/17 职场文书
企业负责人任命书
2014/06/05 职场文书
党委班子剖析材料
2014/08/21 职场文书
有限责任公司股东合作协议书范本
2014/10/30 职场文书
酒店人事专员岗位职责
2015/04/07 职场文书
雷锋观后感
2015/06/10 职场文书
超外差式晶体管收音机的组装与统调
2021/04/22 无线电
numpy array找出符合条件的数并赋值的示例代码
2022/06/01 Python