JS中的phototype详解
作者:轩脉刃
1 原型法设计模式
在.Net中可以使用clone()来实现原型法
原型法的主要思想是,现在有1个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展。我们称B的原型为A。
2 javascript的方法可以分为三类:
a 类方法
b 对象方法
c 原型方法
例子:
- functionPeople(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=newPeople("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>
JS中的phototype详解的更多相关文章
- JS中this关键字详解
本文主要解释在JS里面this关键字的指向问题(在浏览器环境下). 阅读此文章,还需要心平气和的阅读完,相信一定会有所收获,我也会不定期的发布,分享一些文章,共同学习 首先,必须搞清楚在JS里面,函数 ...
- JS 中 this 关键字详解
本文主要解释在JS里面this关键字的指向问题(在浏览器环境下). 首先,必须搞清楚在JS里面,函数的几种调用方式: 普通函数调用 作为方法来调用 作为构造函数来调用 使用apply/call方法来调 ...
- Bom和Dom编程以及js中prototype的详解
一.Bom编程: 1.事件练习: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- JavaScript面向对象(一)——JS OOP基础与JS 中This指向详解
前 言 JRedu 学过程序语言的都知道,我们的程序语言进化是从"面向机器".到"面向过程".再到"面向对象"一步步的发展而来.类似于 ...
- JS中navigator对象详解
<code class="language-html"><!doctype html> <html> <head> <meta ...
- js中Date()对象详解
var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-???? ...
- js中的逻辑运算符详解(||、&&、!)
视频地址:https://www.bilibili.com/video/BV1Y7411K7zz?p=1 一直以来都没弄清楚js中的逻辑运算符是怎么回事 , 一直都以为他们的用法和java一样 , 今 ...
- js中window对象详解以及页面跳转
1.window.top.window.location = "index.asp"; 2.window.top.location.href="index.asp&quo ...
- node.js中express-session配置项详解
官方地址:https://www.npmjs.com/package/express-session 作用:用指定的参数创建一个session中间件,sesison数据不是保存在cookie中,仅仅s ...
随机推荐
- java-mybaits-00101-基础安装配制
一.数据库安装 http://jingyan.baidu.com/article/363872ec2e27076e4ba16fc3.html 二.eclipse连接mysql http://jingy ...
- loadrunner11的移动端性能测试之场景设计
测试步骤之场景设计(Controller) 进入手工场景 准备好脚本后就可以进行场景设计和执行场景了,从VuGen中进入,见下图: 进入后第一个为目标场景,选择第二个更灵活的手工场景,我的目标人数20 ...
- [golang note] 协程通信
channel基本语法 • channel介绍 √ golang社区口号:不要通过共享内存来通信,而应该通过通信来共享内存. √ golang提供一种基于消息机制而非共享内存的通信模型.消息机制认为每 ...
- 2.7 The Object Model -- Bindings, Observers, Computed Properties:What do I use when?
有时候新用户在使用计算属性.绑定和监视者时感到困惑.下面是一些指导方针: 1. 使用computed properties来合成其他属性,以构建新的属性.computed properties不应该包 ...
- 用python解析word文件(段落篇(paragraph) 表格篇(table) 样式篇(style))
首先需要安装相应的支持库: 直接在命令行执行pip install python-docx 示例代码如下: import docxfrom docx import Document #导入库 path ...
- 常用php操作redis命令整理(四)SET类型
SADD 将一个或多个member元素加入到集合key当中.(从左侧插入,最后插入的元素在0位置),集合中已经存在TK 则返回false,不存在添加成功 返回true <?php var_dum ...
- javascript-高级用法
22.1 安全的类型检测 为什么:typeof 不靠谱, 无法将数组从对象中区分出来, instanceof 有特殊情况,在iframe存在的情况下无法判断另一个iframe内的数组 如何做:Obje ...
- 20145329 《网络对抗技术》 逆向及Bof基础实验
1.实验内容 本次实践的对象是一个名为20145329的linux可执行文件.该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串.该程序同时包含另一个代码片段,ge ...
- 如何在编辑框中使用IAutoComplete接口(转载)
出自:http://www.vckbase.com/index.php/wv/27.html 如果可能我想用打包类来实现.唉!,就叫我封装先生吧. 你算是找对地方了.但是我要先声明我的解决办法不是你所 ...
- postgresql常用操作
需要安装的软件包: apt-get install postgresql postgresql-client-9.1 postgresql-common postgresql-9.1 postgres ...