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 相关文章推荐
jQuery在vs2008及js文件中的无智能提示的解决方法
Dec 30 Javascript
open 动态修改img的onclick事件示例代码
Nov 13 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
Sep 24 Javascript
jQuery与getJson结合的用法实例
Aug 07 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
Aug 20 Javascript
JS生成不重复的随机数组的简单实例
Jul 10 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
Oct 28 Javascript
Move.js入门
Feb 08 Javascript
详解react-webpack2-热模块替换[HMR]
Aug 03 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
Oct 19 Javascript
js生成word中图片处理方法
Jan 06 Javascript
Json实现传值到后台代码实例
Jun 30 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的无限分类实现想法~
2007/01/02 PHP
smarty基础之拼接字符串的详解
2013/06/18 PHP
神盾加密解密教程(二)PHP 神盾解密
2014/06/08 PHP
php提取身份证号码中的生日日期以及验证是否为成年人的函数
2015/09/29 PHP
php中使用GD库做验证码
2016/03/31 PHP
PHP面向对象程序设计之多态性的应用示例
2018/12/19 PHP
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
2009/08/28 Javascript
jquery foreach使用示例
2013/09/12 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
2016/01/07 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
javascript-解决mongoose数据查询的异步操作
2016/12/22 Javascript
详解JavaScript数组过滤相同元素的5种方法
2017/05/23 Javascript
ES6学习教程之对象字面量详解
2017/10/09 Javascript
react+redux的升级版todoList的实现
2017/12/18 Javascript
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
2019/07/04 Javascript
vue 扩展现有组件的操作
2020/08/14 Javascript
[01:02:06]LGD vs Mineski Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
OpenCV 表盘指针自动读数的示例代码
2020/04/10 Python
keras自定义回调函数查看训练的loss和accuracy方式
2020/05/23 Python
浅谈keras中Dropout在预测过程中是否仍要起作用
2020/07/09 Python
用于ETL的Python数据转换工具详解
2020/07/21 Python
python中os.remove()用法及注意事项
2021/01/31 Python
ProBikeKit美国官网:自行车套件,跑步和铁人三项套件
2016/10/13 全球购物
银行见习期自我鉴定
2014/01/29 职场文书
出纳试用期自我评价
2015/03/10 职场文书
校长新学期致辞
2015/07/30 职场文书
英语导游欢迎词
2015/09/30 职场文书
护士工作心得体会
2016/01/25 职场文书
教师节作文之小学四年级
2019/09/03 职场文书
导游词之秦始皇兵马俑博物馆
2019/09/29 职场文书
Nginx本地目录映射实现代码实例
2021/03/31 Servers
Pytorch GPU内存占用很高,但是利用率很低如何解决
2021/06/01 Python
Python中Numpy和Matplotlib的基本使用指南
2021/11/02 Python
JavaScript实现一键复制内容剪贴板
2022/07/23 Javascript