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解决innerText浏览器兼容问题思路代码
May 17 Javascript
js动态为代码着色显示行号
May 29 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
如何在Angular2中使用jQuery及其插件的方法
Feb 09 Javascript
详解Layer弹出层样式
Aug 21 Javascript
JS遍历DOM文档树的方法实例详解
Apr 03 Javascript
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
js中事件对象和事件委托的介绍
Jan 21 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 Javascript
vue-cli3添加模式配置多环境变量的方法
Jun 05 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
Jun 18 Javascript
基于ant design日期控件使用_仅月份的操作
Oct 27 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 insert语法详解
2008/06/07 PHP
微信公众平台天气预报功能开发
2014/07/06 PHP
PHP实现服务器状态监控的方法
2014/12/09 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
javascript 获取网页参数系统
2008/07/19 Javascript
from表单多个按钮提交用onclick跳转不同action
2014/04/24 Javascript
jQuery获取iframe的document对象的方法
2014/10/10 Javascript
JavaScript中的函数模式详解
2015/02/11 Javascript
jQuery Dialog对话框事件用法实例分析
2016/05/10 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
JS检测window.open打开的窗口是否关闭
2017/06/25 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
2017/11/27 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
2018/01/18 Javascript
vue 自定义 select内置组件
2018/04/10 Javascript
angularjs使用div模拟textarea文本框的方法
2018/10/02 Javascript
js中对象和面向对象与Json介绍
2019/01/21 Javascript
nodejs同步调用获取mysql数据时遇到的大坑
2019/03/02 NodeJs
Python 模板引擎的注入问题分析
2017/01/01 Python
Zookeeper接口kazoo实例解析
2018/01/22 Python
致Python初学者 Anaconda入门使用指南完整版
2018/04/05 Python
selenium+python 去除启动的黑色cmd窗口方法
2018/05/22 Python
Python序列类型的打包和解包实例
2019/12/21 Python
Python Tkinter Entry和Text的添加与使用详解
2020/03/04 Python
Centos7下源码安装Python3 及shell 脚本自动安装Python3的教程
2020/03/07 Python
Jupyter Notebook的连接密码 token查询方式
2020/04/21 Python
基于python连接oracle导并出数据文件
2020/04/28 Python
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
Html5在手机端调用相机的方法实现
2020/05/13 HTML / CSS
联想阿根廷官方网站:Lenovo Argentina
2019/10/14 全球购物
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
几道Java和数据库的面试题
2013/05/30 面试题
历史专业个人求职信分享
2013/12/20 职场文书
安全负责人任命书
2014/06/06 职场文书
JavaScript中document.activeELement焦点元素介绍
2021/11/27 Javascript
WCG2010 星际争霸决赛 Flash vs Goojila 1 星际经典比赛回顾
2022/04/01 星际争霸