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 相关文章推荐
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
Node.js编程中客户端Session的使用详解
Jun 23 Javascript
实现非常简单的js双向数据绑定
Nov 06 Javascript
jQuery滚动加载图片实现原理
Dec 14 Javascript
Javascript 基础---Ajax入门必看
Jul 06 Javascript
写给vue新手们的vue渲染页面教程
Sep 01 Javascript
vue2.0实现音乐/视频播放进度条组件
Jun 06 Javascript
微信小程序之裁剪图片成圆形的实现代码
Oct 11 Javascript
Vue绑定内联样式问题
Oct 17 Javascript
eslint 的三大通用规则详解
May 16 Javascript
ckeditor一键排版功能实现方法分析
Feb 06 Javascript
vue设置默认首页的操作
Aug 12 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+ajax 无刷新删除数据
2010/02/20 PHP
php的curl封装类用法实例
2014/11/07 PHP
JavaScript Cookie 直接浏览网站分网址
2009/12/08 Javascript
js去除空格的12种实用方法
2013/11/08 Javascript
javascript中substring()、substr()、slice()的区别
2015/08/30 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
JavaScript的设计模式经典之建造者模式
2016/02/24 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
ES6入门教程之Iterator与for...of循环详解
2017/05/17 Javascript
Ionic3实现图片瀑布流布局
2017/08/09 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
2017/09/30 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
2018/02/09 Javascript
用ES6写全屏滚动插件的示例代码
2018/05/02 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
2019/02/22 Javascript
React-redux实现小案例(todolist)的过程
2019/09/29 Javascript
windows及linux环境下永久修改pip镜像源的方法
2016/11/28 Python
Python使用PDFMiner解析PDF代码实例
2017/03/27 Python
python将控制台输出保存至文件的方法
2019/01/07 Python
Python小进度条显示代码
2019/03/05 Python
python飞机大战pygame碰撞检测实现方法分析
2019/12/17 Python
python 通过文件夹导入包的操作
2020/06/01 Python
keras输出预测值和真实值方式
2020/06/27 Python
HTML5中图片之间的缝隙完美解决方法
2017/07/07 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
PatPat香港:婴童服饰和亲子全家装在线购物
2020/09/27 全球购物
超市营业员求职简历的自我评价
2013/10/17 职场文书
建筑项目策划书
2014/01/13 职场文书
寄语是什么意思
2014/04/10 职场文书
诉讼财产保全担保书
2014/05/20 职场文书
2014年信访工作总结
2014/11/17 职场文书
庐山导游词
2015/02/03 职场文书
中学生逃课检讨书
2015/02/17 职场文书
师范生见习总结范文
2015/06/23 职场文书
教研活动主持词
2015/07/03 职场文书
Vue+Element UI实现概要小弹窗的全过程
2021/05/30 Vue.js
php访问对象中的成员的实例方法
2021/11/17 PHP