js的Prototype属性解释及常用方法
发布时间:2024-06-07 16:00:32
函数:原型
每一个构造函数都有一个属性叫做原型(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的图表作一下对比)。
![](https://www.aspxhome.com/images/zang.png)
![](https://www.aspxhome.com/images/jiucuo.png)
猜你喜欢
- 话不多说,直接上代码运行截图 1.语音合成------->执行:结果:输入要转换的内容,程序直接帮你把转换好的mp3文件输出
- 先判断是jquery对象还是html对象, 如果是jquery对象, 可以直接用 jquery对象.attr("
- 主要讲 except 和 not in 的性能上的区别。 代码如下:CREATE TABLE tb1(ID int) CREAT
- 目录代码分享一、安装并创建Scrapy项目二、爬取应用市场评论过程1. Scrapy爬虫运行流程2. 页面分析页面分析过程一页面分析过程二页
- django路由和视图要了解django是如何运行的,首先要了解路由和视图两个概念,然后我们在项目中添加一些简单的路由和视图路由和视图的概念
- 基于Python中求和函数sum的用法详解今天在看《集体编程智慧》这本书的时候,看到一段Python代码,当时是百思不得其解,总觉得是书中排
- 一,PHP脚本与动态页面。 PHP脚本是一种服务器端脚本程序,可通过嵌入等方法与HTML文件混合,也可以类,函数封装等形式,以模板的方式对用
- 本文实例讲述了Python使用matplotlib实现基础绘图功能。分享给大家供大家参考,具体如下:一个简单的例子# -*- coding:
- 1. 常用模块# 连接数据库connect()函数创建一个新的数据库连接对话并返回一个新的连接实例对象PG_CONF_123 = {
- 前言本文代码基于 python3.6 和 pygame1.9.4。俄罗斯方块是儿时最经典的游戏之一,刚开始接触 pygame 的时候就想写一
- 如何制作一个安全的页面?随后,让我们来编程:manage.asp' 登录页面<%@ Language=VB
- 前言之前学python时在网上找了好多小程序,由于年代久远,已经忘记出自哪里了,给代码加了点注释,再稍微修改了一下,让代码的可读性更好,如有
- 1、同级目录下调用若在程序 testone.py 中导入模块 testtwo.py , 则直接使用【import testtwo 或 fro
- Vue Demi是什么如果你想开发一个同时支持Vue2和Vue3的库可能想到以下两种方式:1.创建两个分支,分别支持Vue2和Vue32.只
- 程序员的浪漫,你懂吗?今天使用python小海龟实现爱心图案的绘制,代码如下:import turtleimport time# 清屏函数d
- 1.添加自定义机器人2.编写python代码请求钉钉机器人所给的webhook钉钉自定义机器人官方文档安全方式使用加签的方式:第一步,把ti
- 线程是进程中可以调度执行的实体。而且,它是操作系统中可以执行的最小处理单元。简单地说,一个线程就是一个程序中可以独立于其他代码执行的指令序列
- 今天早上到现在,一直在搞一个很愚蠢的问题,竟然一直没发现 如果$str=""; $str = "$str-$s
- 本文实例为大家分享了pygame实现贪吃蛇小游戏的具体代码,供大家参考,具体内容如下由于这段时间实在是太聊了,没什么事做,游戏也玩腻了,所以
- 一、什么是vscode** Visual Studio Code (简称 VS Code /