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 相关文章推荐
asp.net HttpHandler实现图片防盗链
Nov 09 Javascript
使用jquery插件实现图片延迟加载技术详细说明
Mar 12 Javascript
extjs ColumnChart设置不同的颜色实现代码
May 17 Javascript
利用js制作html table分页示例(js实现分页)
Apr 25 Javascript
HTML5实现留言和回复页面样式
Jul 22 Javascript
js实现左侧网页tab滑动门效果代码
Sep 06 Javascript
详解浏览器渲染页面过程
Feb 09 Javascript
js实现带进度条提示的多视频上传功能
Dec 13 Javascript
微信小程序实现MUI数字输入框效果
Jan 31 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
Jun 11 Javascript
angularJs在多个控制器中共享服务数据的方法
Sep 30 Javascript
vue3.0 搭建项目总结(详细步骤)
May 20 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 5.3.1 安装包 VC9 VC6不同版本的区别是什么
2010/07/04 PHP
用PHP的超级变量$_POST获取HTML表单(HTML Form) 数据
2011/05/07 PHP
php中操作memcached缓存进行增删改查数据的实现代码
2014/08/15 PHP
php结合curl实现多线程抓取
2015/07/09 PHP
php修改数组键名的方法示例
2017/04/15 PHP
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
2009/06/14 Javascript
jquery 简单导航实现代码
2009/09/11 Javascript
js getElementsByTagName的简写方式
2010/06/27 Javascript
jQuery中mouseover事件用法实例
2014/12/26 Javascript
js实现网页抽奖实例
2015/08/05 Javascript
nodejs 中模拟实现 emmiter 自定义事件
2016/02/22 NodeJs
利用Angularjs和Bootstrap前端开发案例实战
2016/08/27 Javascript
基于jQuery实现弹幕APP
2017/02/10 Javascript
windows下vue-cli及webpack搭建安装环境
2017/04/25 Javascript
创建简单的node服务器实例(分享)
2017/06/23 Javascript
AngularJS实现表格的增删改查(仅限前端)
2017/07/04 Javascript
JavaScript之创意时钟项目(实例讲解)
2017/10/23 Javascript
Vue项目路由刷新的实现代码
2019/04/17 Javascript
js实现随机8位验证码
2020/07/24 Javascript
微信小程序实现下拉框功能
2019/07/16 Javascript
element的el-table中记录滚动条位置的示例代码
2019/11/06 Javascript
[01:04:05]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python 文件和路径操作函数小结
2009/11/23 Python
python3编码问题汇总
2016/09/06 Python
深入理解Django的自定义过滤器
2017/10/17 Python
python利用smtplib实现QQ邮箱发送邮件
2020/05/20 Python
Python安装pycurl失败的解决方法
2018/10/15 Python
详解用python计算阶乘的几种方法
2019/08/14 Python
Python使用paramiko连接远程服务器执行Shell命令的实现
2021/03/04 Python
详解如何获取localStorage最大存储大小的方法
2020/05/21 HTML / CSS
Nordgreen英国官网:斯堪的纳维亚设计师手表
2018/10/24 全球购物
Helly Hansen工作服美国官方网上商店:为最恶劣的环境
2019/09/04 全球购物
金讯Java笔试题目
2013/06/18 面试题
求网格中的黑点分布
2013/11/06 面试题
代办委托书怎么写
2014/08/01 职场文书
试用期转正员工自我评价
2014/09/18 职场文书