javascript下的protype

2023-11-18

了解下JavaScript中的prototype
JS中的phototype是JS中比较难理解的一个部分。javascript的方法可以分为三类:类方法,对象方法,原型方法。

例子:

view sourceprint?01 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();

obj1.func.call(obj)方法意思是将obj看成obj1,调用func方法。

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

' view sourceprint?1 A.prototype = new B();

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

先看一个实验的例子:

view sourceprint?01 function baseClass()

{

this.showMsg = function()

{

alert("baseClass::showMsg");

}

}



function extendClass()

{



}



extendClass.prototype = new baseClass();

instance = new extendClass();

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

我们首先定义了baseClass类,然后我们要定义extentClass,但是我们打算以baseClass的一个实例为原型,来克隆的extendClass也同时包含showMsg这个对象方法。extendClass.prototype = new baseClass()就可以阅读为:extendClass是以baseClass的一个实例为原型克隆创建的。

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

下面是扩展实验2:

view sourceprint?01 function baseClass()

{

this.showMsg = function()

{

alert("baseClass::showMsg");

}

}



function extendClass()

{

this.showMsg =function ()

{

alert("extendClass::showMsg");

}

}



extendClass.prototype = new baseClass();

instance = new extendClass();



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

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

那么又会有一个新的问题:如果我想使用extendClass的一个实例instance调用baseClass的对象方法showMsg怎么办?

答案是可以使用call:

view sourceprint?
extendClass.prototype = new baseClass();

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的对象方法

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

view sourceprint?01 <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();

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

javascript下的protype 的相关文章

  • 函数作为参数(带参数)——JavaScript

    如果我有一些 OO javascript 看起来像这样 function someFunction a b c do something with a b and c function theLoader loadFunction some
  • 为什么 lodash 将我的数组转换为对象?

    我是 lodash 的新手 创建了一个函数 该函数从值为 null 或空白的对象中删除键 但是当我传递包含某些部分作为数组的对象时 它会删除数组并将其转换为对象 下面是我尝试过的代码 mixin removeFalsies this rem
  • RxJS - 我需要取消订阅吗

    如果我有这样的事情 class MyComponent constructor this interval Observbale interval 1000 const c new MyComponent const subscriptio
  • Javascript图像编辑插件

    在哪里可以找到 Javascript 或 jQuery 图像编辑器插件 用户可以单击图像进行编辑 并且该插件允许他们进行裁剪 调整大小 旋转 翻转等 Pixastic http pixastic com lib 不再活跃 和CamanJS
  • 如何限制 Chrome 中的最大文本区域宽度和高度或如何禁用文本区域调整大小

    Chrome 允许通过在右下角添加文本区域来调整文本区域的大小 但有时这种移动可能会破坏页面的设计 所以我想知道如何限制该操作的最大和最小宽度 即如何完全禁用该功能和thml javascript css在页面上 您可以使用 resize
  • 在 ES5 中创建自定义元素 v1,而不是 ES6

    现在 如果您严格遵循自定义元素规范 v1 https html spec whatwg org multipage custom elements html custom elements 无法在不支持类的浏览器中使用自定义元素 有没有办法
  • 在设置后用 Javascript 替换 'var' css 属性

    我有一个元素 其上设置了 var 属性 如下所示 div class divwithbackground div CSS divwithbackground after background image var page header se
  • 如何将数据从 JavaScript 发送到 Python

    我正在 jinja2 和 python2 7 上使用 GAE 进行 Web 开发 我可以从Python获取数据 但我无法将数据从 JavaScript 发送到 Python 这是 JavaScript 代码 function toSave
  • linkedin js 如何是有效的 javascript

    LinkedIn Javascript 集成是通过以下方式完成的 我不明白 这怎么是一个有效的javascript 为什么 api key 没有被引用 脚本标签的主体带有src永远不会被执行 但是 加载的脚本可以像访问任何其他元素的内容一样
  • es6-module 默认导出导入为未定义

    我不确定我在这里缺少什么 我正在使用 jspm 和 es6 module loader 开发一个项目 我有一个模块定义如下 import hooks from hooks import api from api import tools f
  • 单击 btn 而不触发 div 单击未按预期工作

    代码沙盒 https codesandbox io s currying breeze depdc9 file package json https codesandbox io s currying breeze depdc9 file
  • 2 个 SVG 路径的交集

    我需要检查两个 SVG Path 元素是否相交 检查边界框与 getBBox 太不准确了 我目前正在做的是迭代两条路径 getTotalLength 然后检查是否有两个点 getPointAtLength 是平等的 下面是一个片段 但正如您
  • FileReader 在 Ionic 2 中未触发 onloadend

    我正在尝试使用 cordova file plugin 读取本地文件 目前我可以读取本地目录的内容并选择单个文件 但我在获取文件内容时遇到问题 这是我的函数 从列表中选择文件后单击按钮即可调用该函数 import window resolv
  • Nodejs 异步 Promise 队列

    我需要使用速率受限的 API 例如 我一秒钟只能进行 10 个 API 调用 因此我需要等待当前秒结束才能进行另一个 API 调用 为了实现这一目标 我想创建一个可以自行管理的异步队列 它的主要功能是让我向队列添加一个新的 Promise
  • 如何创建显示/隐藏 Docusaurus 项目中所有详细标签状态的按钮?

    根据讨论here https stackoverflow com questions 58579048 how to add or remove the open attribute from all details tags in a r
  • 从数组创建树并将父字段的表示形式更改为对象而不是 ID

    我堆满了琐碎的问题 但找不到解决方案 任何帮助将不胜感激 我有一个对象数组 id 1 title home parent null id 2 title about parent null id 3 title team parent 2
  • 单击 html 中的按钮后如何从 javascript 函数写入文件

    我正在尝试编写真正基本的代码 在 html 文件上按下按钮后 通过 JavaScript 函数在本地写入 txt 文件 这不可能吗 我可以仅使用 javascript 文件写入文件 但在尝试同时使用两者时则不能
  • 如何加载Jquery Tiny滚动条

    所以我想自定义一个滚动条 我发现了一个很小的滚动条 这是一个jquery插件 http baijs nl tinyscrollbar http baijs nl tinyscrollbar 问题是 无论如何我都无法让它工作 我将 Jquer
  • 数组长度未定义[关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 我试图按如
  • 使用 CSP 防止自动点击链接 XSS 攻击

    当将 CSP 用于稍微不同的目的 沙箱 时 我意识到一个非常简单的自动点击链接似乎甚至可以绕过相对严格的 CSP 我所描述的内容如下 内容安全政策 default src none script src unsafe inline 还有身体

随机推荐

  • 【MLOps】第 2 章 : MLOps中的人

    大家好 我是Sonhhxg 柒 希望你看完之后 能对你有所帮助 不足请指正 共同学习交流 个人主页 Sonhhxg 柒的博客 CSDN博客 欢迎各位 点赞 收藏 留言 系列专栏 机器学习 ML 自然语言处理 NLP 深度学习 DL fore
  • 备战2023蓝桥国赛-传纸条

    题目描述 解析 这道题想了我好久 一开始我是想假如只走一条路线 从 1 1 走到 m n 这种问题该怎么解决呢 针对这种问题我是设了dp k i j 表示走了k步到达 i j 的好心程度之和的最大值 然后根据这个来写出转移方程来计算 后面就
  • Nginx 队列双向链表结构 ngx_quene_t

    队列链表结构 队列双向循环链表实现文件 文件 src core ngx queue h c 在 Nginx 的队列实现中 实质就是具有头节点的双向循环链表 这里的双向链表中的节点是没有数据区的 只有两个指向节点的指针 需注意的是队列链表的内
  • JVM安全退出(如何优雅的关闭java服务)

    https tech imdada cn 2017 06 18 jvm safe exit utm source tuicool utm medium referral 背景 用户 货都到了 购物车里怎么还有刚买的东西 what 产品 有用
  • 如何助力金融贷款企业实现精准营销获客

    无论是哪个行业 吸引客户都是核心 许多公司的线下渠道面临着许多障碍 以至于他们不得不采用在线客户获取方法 受影响最大的行业之一是贷款行业 如何获得准确的贷款客户资源 如何赢得客户已经成为企业的一大痛点 过去 信贷员经常使用电话营销 本地促销
  • IP(OSPF综合实验)

    一 实验 1 R4为ISP 其上只能配置IP地址 R4与其他所有直连设备间使用公有IP 2 R3 R5 6 7为MGRE环境 R3为中心站点 3 整个OSPF环境IP地址自定义 4 所有设备均可访问R4的环回 5 减少LSA的更新量 优化
  • apache Commons-beanutils的使用

    1 背景 在java开发过程中 经常会与javabean打交道 像Entity pojo vo dto等等 java应用非常讲究分层架构 因此在各层之间bean的传输与转换非常的繁琐 比如 Student stu new Student s
  • 基于OpenCV的双目测距系统实现

    基于OpenCV的双目测距系统实现 The BinocularMeasure System Based on OpenCV Abstract This passage mainly describes how to measure dist
  • nginx安装配置

    1 nginx下载 http nginx org download 选择对应版本的nginx下载 这里选择 nginx 1 21 6 tar gz 2 环境准备 必备环境 sudo yum install y gcc c 必须下载 3 个依
  • mysql学习笔记(6)_存储过程

    原本觉得掌握最基本的语法就行了 但发现老师最近又提到了存储过程 我觉得有必要学习整理一下 以下是我的简单笔记 存储过程的含义以及优点 含义 一组预先编译号的sql语句的集合 理解成批处理语句 优点 1 提高代码的重用性 2 简化操作 3 减
  • qq机器人如何滑动验证码验证TxCaptchaHelper

    当我们再运行QQ机器人时出现 一下信息 提示需要滑动模块验证 复制上中的url 在浏览器打开 点击开始验证 出现验证图片 打开开发者控制台 一般浏览器快捷键为 F12 切换到 网络 拖到滑块 验证成功后 会出现 在 预览 中会看到ticke
  • 16-2_Qt 5.9 C++开发指南_使用样式表Qss自定义界面

    进行本篇介绍学习前 请先参考链接01 1 Qt工程实践 Qt样式表Qss 后再结合本篇进行融合学习如何使用样式表定义界面 文章目录 1 Qt样式表 2 Qt样式表句法 2 1 一般句法格式 2 2 选择器 selector 2 3 子控件
  • [Unity][Aniamtor&Animation]动画状态机设置自定义脚本StateMachineBehaviour

    对状态机设置自定义脚本StateMachineBehaviour 这种脚本能够实现什么 优点 通过Animator的状态机就可以实现 敌人AI NPC AI 可以在对应状态机 的动画进行 播放 的时候 生成 特效 音效 以及特定的物品 例如
  • Linux源码编译开启cgroup blk限制io性能

    编译选项 内核5 9 General Setup gt Control Group support gt io controller Enable the block layer gt Block layer bio throttling
  • mysql基本数据类型

    概述 要想学好mysql 了解其支持的基本数据类型以及内部原理是极为重要的 只有这样 我们才能根据不同的业务要求来选择不同的数据类型 实现最佳的存储效果和查询性能 因而本文就着重总结一下mysql支持的数据类型以及内部的存储原理 总体来说
  • Learning Spatio-Temporal Representation with Pseudo-3D Residual Networks

    Abstract 卷积神经网络 cnn 被认为是一类有效的图像识别模型 然而 当利用CNN学习时空视频表示时 这并非不平凡 一些研究表明 执行3D卷积是一种捕获视频中时空维度的有益方法 然而 从头开始开发非常深的3d cnn会导致昂贵的计算
  • 《Linux From Scratch》第三部分:构建LFS系统 第六章:安装基本的系统软件- 6.29. Coreutils-8.23...

    Coreutils 软件包包含用于显示和设置基本系统特性的工具 大概编译时间 2 5 SBU 需要磁盘空间 193 MB 6 29 1 安装 Coreutils POSIX 要求 Coreutils 中的程序即使在多字节语言环境也能正确识别
  • ChatGPT3.0、ChatGPT3.5和ChatGPT4.0版本。

    ChatGPT3 0版本是目前最先进的对话生成系统之一 已经在多个应用场景中得到了广泛应用 相较于以往的版本 ChatGPT3 0在模型规模和语言能力上都有了明显的提升 这一版本的模型包含了1 75万亿个参数 而且其生成的对话内容更加流畅
  • 性能优化点

    Arts and Sciences Computer Science myUSF 索引3层 高度为3 一般对于数据库地址千万级别的表 大于2000万的数据进行分库分表存储 JVM整体结构及内存模型 JVM调优 主要为减少FULL GC的执行
  • javascript下的protype

    了解下JavaScript中的prototype JS中的phototype是JS中比较难理解的一个部分 javascript的方法可以分为三类 类方法 对象方法 原型方法 例子 view sourceprint 01 function P