JS中的prototype

2023-11-04

JS中的phototype是JS中比较难理解的一个部分

 

本文基于下面几个知识点:

 

1 原型法设计模式

在.Net中可以使用clone()来实现原型法

原型法的主要思想是,现在有1个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展。我们称B的原型为A。

 

2 javascript的方法可以分为三类:

a 类方法

b 对象方法

c 原型方法

例子:

function  People(name)
{
  this .name = name;
  // 对象方法
  this .Introduce = function (){
    alert(
" My name is  " + this .name);
  }
}
// 类方法
People.Run = function (){
  alert(
" I can run " );
}
// 原型方法
People.prototype.IntroduceChinese = function (){
  alert(
" 我的名字是 " + this .name);
}

 

// 测试

var  p1 = new  People( " Windking " );

p1.Introduce();

People.Run();

p1.IntroduceChinese(); 

 

3 obj1.func.call(obj)方法

意思是将obj看成obj1,调用func方法

 

 

好了,下面一个一个问题解决:

 

prototype是什么含义?

 

javascript中的每个对象都有prototype属性,Javascript中对象的prototype属性的解释是:返回对象类型原型的引用。

A.prototype = new B();

理解prototype不应把它和继承混淆。A的prototype为B的一个实例,可以理解A将B中的方法和属性全部克隆了一遍。A能使用B的方法和属性。这里强调的是克隆而不是继承。可以出现这种情况:A的prototype是B的实例,同时B的prototype也是A的实例。

 

先看一个实验的例子:


function  baseClass()
{
  this .showMsg  =   function ()
  {
     alert(
" baseClass::showMsg " );   
  }
}

function  extendClass()
{
}

extendClass.prototype 
=   new  baseClass();
var instance 
=   new  extendClass();
instance.showMsg(); 
//  显示baseClass::showMsg

我们首先定义了baseClass类,然后我们要定义extentClass,但是我们打算以baseClass的一个实例为原型,来克隆的extendClass也同时包含showMsg这个对象方法。

extendClass.prototype = new baseClass()就可以阅读为:extendClass是以baseClass的一个实例为原型克隆创建的。

 

那么就会有一个问题,如果extendClass中本身包含有一个与baseClass的方法同名的方法会怎么样?

下面是扩展实验2:


function  baseClass()
{
    
this .showMsg  =   function ()
    {
        alert(
" baseClass::showMsg " );   
    }
}

function  extendClass()
{
    
this .showMsg  = function  ()
    {
        alert(
" extendClass::showMsg " );
    }
}

extendClass.prototype 
=   new  baseClass();
var instance 
=   new  extendClass();

instance.showMsg();
// 显示extendClass::showMsg

 

实验证明:函数运行时会先去本体的函数中去找,如果找到则运行,找不到则去prototype中寻找函数。或者可以理解为prototype不会克隆同名函数。

 

那么又会有一个新的问题:

如果我想使用extendClass的一个实例instance调用baseClass的对象方法showMsg怎么办?

 

答案是可以使用call:


extendClass.prototype  =   new  baseClass();
var instance 
=   new  extendClass();


var  baseinstance  =   new  baseClass();
baseinstance.showMsg.call(instance);
// 显示baseClass::showMsg

 

这里的baseinstance.showMsg.call(instance);阅读为“将instance当做baseinstance来调用,调用它的对象方法showMsg”

好了,这里可能有人会问,为什么不用baseClass.showMsg.call(instance);

这就是对象方法和类方法的区别,我们想调用的是baseClass的对象方法

 

最后,下面这个代码如果理解清晰,那么这篇文章说的就已经理解了:

 


< script type = " text/javascript " >

function  baseClass()
{
    
this .showMsg  =   function ()
    {
        alert(
" baseClass::showMsg " );   
    }
   
    
this .baseShowMsg  =   function ()
    {
        alert(
" baseClass::baseShowMsg " );
    }
}
baseClass.showMsg 
=   function ()
{
    alert(
" baseClass::showMsg static " );
}

function  extendClass()
{
    
this .showMsg  = function  ()
    {
        alert(
" extendClass::showMsg " );
    }
}
extendClass.showMsg 
=   function ()
{
    alert(
" extendClass::showMsg static " )
}

extendClass.prototype 
=   new  baseClass();
var instance 
=   new  extendClass();

instance.showMsg(); 
// 显示extendClass::showMsg
instance.baseShowMsg();  // 显示baseClass::baseShowMsg
instance.showMsg();  // 显示extendClass::showMsg

baseClass.showMsg.call(instance);
// 显示baseClass::showMsg static

var  baseinstance  =   new  baseClass();
baseinstance.showMsg.call(instance);
// 显示baseClass::showMsg

< / script>

 

作者:轩脉刃(yjf512)
出处:(http://www.cnblogs.com/yjf512/
版权声明:本文的版权归作者与博客园共有。欢迎转载阅读,转载时须注明本文的详细链接。 

 

[参考文章]

http://tech.ddvip.com/2009-05/1243588303121461.html

http://jetway.iteye.com/blog/56533

http://xiaofeizm55333.iteye.com/blog/80913

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JS中的prototype 的相关文章

  • 我如何在 AngularJS 中监听点击并按住的情况?

    我制作了一个时间计数器 您可以通过单击按钮来增加或减少时间 然而 我希望当我单击并按住按钮时 时间的价值会不断攀升 所以目前如果你看到我的Plunkr http plnkr co edit BxX9x5zYFMXVqt5JsN1F p pr
  • chrome 调试器承诺在暂停时不会解析?

    也许我没有正确调试承诺 但基本上 如果您在断点处停止并运行异步代码 它实际上不会完成 直到您恢复执行为止 这是一个问题 调试器允许您快速试验多个 api 方法 但如果您恢复它 您就不能 debugger now type the follo
  • Oo 任何 IDE 中的 javascript 代码补全

    你知道有什么IDE可以自动完成这种代码吗 我这里有一个 javascript 类生成器 function var core bind function method scope if method instanceof Function t
  • 如果对象包含在另一个数组中,则从数组中删除该对象

    我试图从数组中删除一个对象 如果该对象的属性 唯一 包含在另一个数组中 我知道我可以像这样执行嵌套 for 循环 for i 0 i lt array length i for j 0 j lt array2 length j if arr
  • HTML/VBA Click 事件未触发

    这是我第一次在 StackOverflow 上发布问题 到目前为止 我已经能够通过 VBA 帮助论坛解决我的大部分问题 我的问题很简单 我有一个自动数据拉取 我需要在其中导出数据 我过去曾在这方面取得过成功 但这次略有不同 我尝试单击以生成
  • 访问sendBeacon发送的数据

    文档表明sendBeacon通过发送其数据HTTP POST request 但在 PHP 中 POST变量似乎是一个空数组 这是我的 JavaScript 代码 navigator sendBeacon beacon log php My
  • 网站 YouTube 嵌入视频不断播放

    我正在使用 youtube 提供的 iframe 在我的网站上嵌入视频 我还使用了一个 css 弹出窗口 这是我从这个页面学到的http www pat burt com web development how to do a css po
  • VBA / HTML / jQuery 选择自动完成 - 在列表中选择

    我正在尝试使用 Excel 中的 VBA 在网站的列表中选择一个值 这不是一个 正常列表 该网站使用 jQuery 选择自动完成 如下所示 example http davidwalsh name demo jquery chosen ph
  • 使用 CryptoJS 更改密钥 [重复]

    这个问题在这里已经有答案了 我正在使用 CryptoJS 来加密和解密文本 在这里 我只是获取消息并显示加密和解密消息 我使用DES算法进行加密和解密 这是我的 HTML 文件
  • Node.js - console.log 不显示数组中的项目,而是显示 [Object]

    我在注销对象内数组的内容时遇到问题 实际的物体看起来像这样 var stuff accepted item1 item2 rejected response Foo envelope from The sender to new item1
  • JS用正则表达式替换数字

    我有元素的标识符 如下所示 form book 1 2 3 我想要的是用其他值替换该标识符中的第二个数字 我将函数 match 与以下正则表达式一起使用 var regexp d d d 但它返回我包含的数组 1 2 3 2 因此 当我尝试
  • Chartjs刻度标签位置

    尝试让 Y 轴刻度标签看起来像image https i stack imgur com XgoxX png 位于秤顶部且不旋转 缩放选项当前如下所示 scales yAxes id temp scaleLabel display true
  • 为什么“tbody”不设置表格的背景颜色?

    我在用 tbody 作为 CSS 选择器来设置background color在一个表中 我这样做是因为我有多个 tbody 表内的部分 它们具有不同的背景颜色 我的问题是 当使用border radius在细胞上 细胞不尊重backgro
  • 无法在前端使用 JavaScript Fetch API 将文件上传到 FastAPI 后端

    我正在尝试弄清楚如何将图像发送到我的 API 并验证生成的token那是在header的请求 到目前为止 这就是我所处的位置 app post endreProfilbilde async def endreProfilbilde requ
  • 如何在 Google 地图 V3 中创建编号地图标记?

    我正在制作一张上面有多个标记的地图 这些标记使用自定义图标 但我还想在顶部添加数字 我已经了解了如何使用旧版本的 API 来实现这一点 我怎样才能在V3中做到这一点 注意 当您将鼠标悬停在标记上时 标题 属性会创建一个工具提示 但我希望即使
  • Jquery - 通过在字符串中构建 id 的 id 获取元素

    我在使用 jquery 元素时遇到问题 我正在 var 中构造名称 例如 var myId myGotId myId attr title changed myId 返回空 我想通过 id 获取我的元素 但动态构建我的 Id 连接字符串 编
  • 需要有关 React Js 的帮助

    我是 React Js 新手 我的代码无法正常工作 请看下面 这是我的脚本文件Main jsx 该文件由 React 编译 输出放置在 dist 文件夹下的 main js 文件中 var react require react react
  • 在 Javascript 中减少/分组数组

    基于this https stackoverflow com a 40774906 3254598例如 我想以稍微不同的方式按对象进行分组 结果应该如下 key audi items make audi model r8 year 2012
  • 单击列表时使用 bootstrap Dropdown 防止下拉菜单消失

    我正在使用使用引导下拉菜单 http twitter github com bootstrap javascript html dropdowns生成下拉菜单 我想防止点击菜单时菜单消失 我已经实现了以下代码 但它不起作用 知道如何修复它吗
  • 在 GWT 中,在任何主机页标记上添加事件处理程序

    我想为任何标签添加 MouseOver 事件处理程序 举个例子 我想为旧版 HTML 页面中的每个锚点页面添加事件处理程序 继GWT指南 http code google com webtoolkit doc 1 6 DevGuideUse

随机推荐

  • 项目的子模块中的其中几个模块初步讲解

    子模块有点多 只挑其中几个讲解 首先就是backend web这个模块 在main创建一个resouces文件后 有些IDEA版本比较旧的 需要你们顺便把它remark成resources文件 然后在这个resources文件里面放上一个p
  • ROS学习笔记(四)---使用 VScode 启动launch文件运行多个节点

    ROS学习笔记文章目录 01 ROS学习笔记 一 Linux安装VScode 02 ROS学习笔记 二 使用 VScode 开发 ROS 的Python程序 简例 03 ROS学习笔记 三 好用的终端Terminator 一 什么是laun
  • 10年老电脑如何提速_2020年双十一笔记本电脑选购终极指南,教你如何选择购买游戏本电脑,高性价比电脑推荐(10月更新)...

    本文会在双十一期间持续更新 每天更新各大电商平台的笔记本电脑好价 如果想及时收到信息 建议点击文章最底部的 追更 仅支持手机版知乎 或者收藏本文 双十一购物狂欢节 又快到了一年一度的双十一了 按照以往的规律 双十一期间 各大笔记本厂商都会下
  • 【ANFIS 时序预测】基于 ANFIS 的时间序列预测附 MATLAB 代码

    作者简介 热爱科研的Matlab仿真开发者 修心和技术同步精进 matlab项目合作可私信 个人主页 Matlab科研工作室 个人信条 格物致知 内容介绍 辐照度是影响光伏 PV 电站发电量最重要的气象因素 提出了一种新的基于自适应模糊推理
  • docker启动tomcat

    先检查当前镜像是否存在 docker image ls 存在后继续下一步 不存在的话拉取镜像 docker pull tomcat 镜像拉去成功后 启动容器 如果是用虚拟机的话需要端口映射 p 8080 8080才可以在浏览器访问 d后台运
  • 第三章 基于QT和DCMTK的Dicom 图像浏览器---单个Dicom图像读取类

    由于mitk net被人恶意抢注 中科院分子影像重点实验室的www mitk net 改到 www mitk net cn 目录 开始 DCMTK MD版 编译和安装 VS2015 第一章 DCMTK MD版 QT VS2015编写Dico
  • 日志收集-elk

    04 4 日志收集 1 日志收集方式 Kubernetes的业务Pod日志有两种输出方式 一种是直接打到标准输出或者标准错误 第二种是将日志写到特定目录下的文件种 针对这两种不同场景 提供了不同的容器日志收集思路 1 1 Kubernete
  • websocket校验token:使用threadlocal存放和获取当前登录用户

    都知道threadlocal可以用于线程之间的变量隔离 在登录时中它可以放入当前用户 之后再用于获取当前登录用户 下面是一个使用实例 用户实体类 jpa框架 Data EqualsAndHashCode callSuper false Ta
  • socket套接字——UDP协议

    目录 一 预备知识 1 端口号 1 网络通信的目的 2 认识端口号 3 网络通信的本质 4 端口号的作用 2 认识TCP和UDP协议 3 网络字节序 1 各处数据的大小端 2 字节序转换接口 二 socket套接字 1 socket接口 1
  • EasyPoi实现excel文件导入导出

    EasyPoi学习实践 1 简介 easypoi功能如同名字easy 主打的功能就是容易 让一个没见接触过poi的人员 就可以方便的写出Excel导出 Excel模板导出 Excel导入 Word模板导出 通过简单的注解和模板 语言 熟悉的
  • qt连接oracle

    qt连接oracle 作者 bjoern 来源 CSDN 版权声明 本文为博主原创文章 未经博主允许不得转载 声明 qt编译的位数版本和数据库oracle的版本是密切相关的 如果你的电脑是64位的 但是qt装了默认32位的 那么你的orac
  • Java性能监控和故障诊断可视化工具之jmc

    前面的文章中我们介绍了jvisualvm 本篇文章我们来介绍下目前为止功能最为强大的可视化工具jmc jmc Java Mission Control 是jdk1 7开始引入的JVM监控工具 jmc可视化监控工具主要包含两大块内容 1 JM
  • 以transformAssociateToMap函数为例,分析LeGO-LOAM的坐标系统

    文章目录 LeGO LOAM采用的坐标轴体系 transformAssociateToMap函数剖析 公式推导 LeGO LOAM坐标变换解析 LeGO LOAM采用的坐标轴体系 LeGO LOAM的旋转顺序是固定轴ZXY而LeGO LOA
  • python文字转语音

    你觉得将文字转成语音需要写多少行代码才能完成 我用了7行 你呢 coding utf 8 import sys reload sys sys setdefaultencoding utf 8 import pyttsx engine pyt
  • STM32 SPI对存储芯片发送写是能命令后一直忙等待

    我采用CUBE配置的SPI外设 对NSS引脚选择了硬件输出 这种方式对读取命令没有影响 但是对写命令有 当我发送写是能命令后 读取状态寄存器的值一直都是忙 我猜测这可能是硬件控制NSS引脚后 对于HAL SPI Transmit等命令 内部
  • Github+Typora - - 我理想中的markdown云笔记神器

    这篇文章记录我如何解决市面上markdown笔记软件的弊端 扬长避短 为喜爱markdown软件的朋友出一份力 首先 我们先看下这篇文章 介绍了我们当下markdown软件多多少少有些不完美的状况 让我们虽然不喜欢 但也只可 欲罢不能 的尴
  • 使用python在wordpress博客网站添加新文章示例

    Wodrepress是最近很火的一个博客平台 利用它可以快速搭建各种网站 下面我是利用xmlrpc编程接口在wordpress添加文章的示例代码 import datetime xmlrpclib wp url http www examp
  • Camera和Image sensor技术基础笔记(5) -- HDR相关技术

    动态范围 Dynamic Range 动态范围最早是信号系统的概念 一种信号系统的动态范围定义为 最大的信号不失真的电平和噪声电平的差 在实际场景中 多用分贝 dB 为单位来衡量一个信号系统的动态范围 以上说法可能有些抽象 来看两个例子 1
  • ggplot2读书笔记2:ggplot()的基本用法以及如何绘制几何对象

    Getting Started with ggplot2 ggplot 基本用法 由ggplot2所制得图形有三个重要的组成部分 1 数据 2 数据和视觉变量属性之间的映射 aesthetic mappings 3 呈现数据结果的图层 一般
  • JS中的prototype

    JS中的phototype是JS中比较难理解的一个部分 本文基于下面几个知识点 1 原型法设计模式 在 Net中可以使用clone 来实现原型法 原型法的主要思想是 现在有1个类A 我想要创建一个类B 这个类是以A为原型的 并且能进行扩展