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 判断元素上是否绑定了事件
Oct 28 Javascript
javascript 精粹笔记
May 09 Javascript
JavaScript 注册事件代码
Jan 27 Javascript
JQuery给元素绑定click事件多次执行的解决方法
May 29 Javascript
JS在IE下缺少标识符的错误
Jul 23 Javascript
js实现无缝滚动特效
Dec 20 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
May 12 Javascript
使用node.js中的Buffer类处理二进制数据的方法
Nov 26 Javascript
了解VUE的render函数的使用
Jun 08 Javascript
微信小程序常用赋值方法小结
Apr 30 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
May 30 Javascript
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
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中动态调用函数的方法
2015/03/16 PHP
摘自织梦CMS中的图片处理类
2015/08/08 PHP
php array_walk_recursive 使用自定的函数处理数组中的每一个元素
2016/11/16 PHP
php获取微信openid方法总结
2019/10/10 PHP
JavaScript 利用StringBuffer类提升+=拼接字符串效率
2009/11/24 Javascript
jQuery 学习6 操纵元素显示效果的函数
2010/02/07 Javascript
javascript的日期对象、数组对象、二维数组使用说明
2014/12/22 Javascript
JavaScript输出当前时间Unix时间戳的方法
2015/04/06 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
2016/07/27 Javascript
微信小程序 设置启动页面的两种方法
2017/03/09 Javascript
jquery.validate.js 多个相同name的处理方式
2017/07/10 jQuery
Vim快速合并行及vim 将文件所有行合并到一行
2017/11/27 Javascript
jquery radio 动态控制选中失效问题的解决方法
2018/02/28 jQuery
react配合antd组件实现的管理系统示例代码
2018/04/24 Javascript
详解vue2.6插槽更新v-slot用法总结
2019/03/09 Javascript
微信小程序开发实现的IP地址查询功能示例
2019/03/28 Javascript
微信小程序实现授权登录
2019/05/15 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
2019/05/15 Javascript
JavaScript自定义超时API代码实例
2020/04/30 Javascript
Python-嵌套列表list的全面解析
2016/06/08 Python
Python表示矩阵的方法分析
2017/05/26 Python
基于并发服务器几种实现方法(总结)
2017/12/29 Python
python通过tcp发送xml报文的方法
2018/12/28 Python
在Sublime Editor中配置Python环境的详细教程
2020/05/03 Python
Pandas实现一列数据分隔为两列
2020/05/18 Python
Python中使用aiohttp模拟服务器出现错误问题及解决方法
2020/10/31 Python
image-set实现Retina屏幕下图片显示详细介绍
2012/12/24 HTML / CSS
结构和类有什么异同
2012/07/16 面试题
小学国庆节活动方案
2014/02/11 职场文书
2014国庆节餐厅促销活动策划方案
2014/09/16 职场文书
维稳承诺书
2015/01/20 职场文书
泰坦尼克号观后感
2015/06/04 职场文书
班级管理经验交流材料
2015/11/02 职场文书
创业计划书之校园跑腿公司
2019/09/24 职场文书
python 实现德洛内三角剖分的操作
2021/04/22 Python
springboot中rabbitmq实现消息可靠性机制详解
2021/09/25 Java/Android