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 解析json的代码
Dec 16 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
Jan 15 Javascript
javascript开发随笔一 preventDefault的必要
Nov 25 Javascript
js字符串完全替换函数分享
Dec 03 Javascript
jQuery应用之jQuery链用法实例
Jan 19 Javascript
jquery动态改变div宽度和高度
Feb 09 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
Sep 25 Javascript
js数组如何添加json数据及js数组与json的区别
Oct 27 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
Nov 30 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
Sep 14 Javascript
es6 for循环中let和var区别详解
Jan 12 Javascript
解决vue-router路由拦截造成死循环问题
Aug 05 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生成随机用户名和密码的实现代码
2013/02/27 PHP
PHP生成二维码的两个方法和实例
2014/07/01 PHP
完美的2个php检测字符串是否是utf-8编码函数分享
2014/07/28 PHP
PHP应用跨时区功能的实现方法
2019/03/21 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
php中yar框架实例用法讲解
2020/12/27 PHP
基于JQuery的一句话搞定手风琴菜单
2012/09/14 Javascript
innerHTML与jquery里的html()区别介绍
2012/10/12 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
2013/04/24 Javascript
jQuery把表单元素变为json对象
2013/11/06 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
2014/07/18 Javascript
javascript 10进制和62进制的相互转换
2014/07/31 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
2016/12/14 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
2017/08/16 Javascript
微信小程序获取手机号授权用户登录功能
2017/11/09 Javascript
JS获取指定月份的天数两种实现方法
2018/06/22 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
2018/07/12 jQuery
js中的面向对象之对象常见创建方法详解
2019/12/16 Javascript
如何使用gpu.js改善JavaScript的性能
2020/12/01 Javascript
[01:05]DOTA2完美大师赛趣味视频之选手教你打职业
2017/11/23 DOTA
在python的类中动态添加属性与生成对象
2016/09/17 Python
Python之多线程爬虫抓取网页图片的示例代码
2018/01/10 Python
python计算阶乘和的方法(1!+2!+3!+...+n!)
2019/02/01 Python
解决pycharm 工具栏Tool中找不到Run manager.py Task的问题
2019/07/01 Python
Python 中判断列表是否为空的方法
2019/11/24 Python
python爬虫模拟浏览器访问-User-Agent过程解析
2019/12/28 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
基于Python实现粒子滤波效果
2020/12/01 Python
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
重新定义牛仔布,100美元以下:Warp + Weft
2018/07/25 全球购物
俄罗斯护发和专业化妆品购物网站:Hihair
2019/09/28 全球购物
品管员岗位职责
2013/11/10 职场文书
简单租房协议书(范本)
2014/10/13 职场文书
心灵捕手观后感
2015/06/02 职场文书