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 相关文章推荐
js通过元素class名字获取元素集合的具体实现
Jan 06 Javascript
JavaScript检测上传文件大小的方法
Jul 22 Javascript
jQuery zTree加载树形菜单功能
Feb 25 Javascript
基于Vue.js的表格分页组件
May 22 Javascript
Node.js 数据加密传输浅析
Nov 16 Javascript
js仿微信语音播放实现思路
Dec 12 Javascript
Vue下的国际化处理方法
Dec 18 Javascript
Angular浏览器插件Batarang介绍及使用
Feb 07 Javascript
剖析Angular Component的源码示例
Mar 23 Javascript
angular2路由之routerLinkActive指令【推荐】
May 30 Javascript
详解基于Vue/React项目的移动端适配方案
Aug 23 Javascript
JavaScript实现筛选数组
Mar 02 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中的生成XML文件的4种方法分享
2012/10/06 PHP
php 二维数组时间排序实现代码
2016/11/19 PHP
juqery 学习之五 文档处理 包裹、替换、删除、复制
2011/02/11 Javascript
用jquery写的菜单从左往右滑动出现
2014/04/11 Javascript
使用js画图之圆、弧、扇形
2015/01/12 Javascript
JavaScript实现动画打开半透明提示层的方法
2015/04/21 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
2015/08/21 Javascript
基于jQuery实现二级下拉菜单效果
2016/02/01 Javascript
javascript简单判断输入内容是否合法的方法
2016/05/11 Javascript
浅谈json取值(对象和数组)
2016/06/24 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
2016/09/17 Javascript
利用vue-router实现二级菜单内容转换
2016/11/30 Javascript
基于JavaScript实现移动端无限加载分页
2017/03/27 Javascript
jQuery实现动态添加和删除input框代码实例
2019/03/29 jQuery
JS工厂模式开发实践案例分析
2019/10/17 Javascript
使用p5.js临摹动态图形
2019/10/23 Javascript
node.js使用fs读取文件出错的解决方案
2019/10/23 Javascript
layui实现数据表格隐藏列的示例
2019/10/25 Javascript
Python numpy实现二维数组和一维数组拼接的方法
2018/06/05 Python
python实现按行分割文件
2019/07/22 Python
pyinstaller打包单文件时--uac-admin选项不起作用怎么办
2020/04/15 Python
Keras中 ImageDataGenerator函数的参数用法
2020/07/03 Python
python 装饰器的实际作用有哪些
2020/09/07 Python
匡威英国官网:Converse英国
2018/12/02 全球购物
卡骆驰英国官网:Crocs英国
2019/08/22 全球购物
有个性的自我评价范文
2013/11/15 职场文书
给女朋友的道歉信
2014/01/10 职场文书
先进事迹演讲稿
2014/09/01 职场文书
2015年公司保安年终工作总结
2015/05/14 职场文书
暖春观后感
2015/06/08 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
高三数学复习备考教学反思
2016/02/18 职场文书
残联2016年全国助残日活动总结
2016/04/01 职场文书
《妈妈别哭,有我在》读后感3篇
2020/01/13 职场文书
k8s部署redis cluster集群的实现
2021/06/24 Redis
前端监听websocket消息并实时弹出(实例代码)
2021/11/27 Javascript