JS中的prototype///////////////////////////z
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>
JS中的prototype///////////////////////////z的更多相关文章
- 论js中的prototype
今天在阅读代码时,碰到了prototype //判断是否是数组function isArray(obj) { return Object.prototype.toString.call(obj) == ...
- JS中对于prototype的理解
JS中的prototype是JS中比较难理解的一个部分 本文基于下面几个知识点: 1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是,现在有1个类A,我想要创建一个 ...
- 帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
作为一名前端工程师,必须搞懂JS中的prototype.__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关系并彻底搞 ...
- JS中的prototype (转载)
JS中的prototype JS中的phototype是JS中比较难理解的一个部分 本文基于下面几个知识点: 1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是 ...
- JS中的prototype、__proto__与constructor属性
作为一名前端工程师,必须搞懂JS中的prototype.__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关系并彻底搞 ...
- JS中的prototype、__proto__与constructor
1.前言 作为一名前端工程师,必须搞懂JS中的prototype.__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关 ...
- JS中的prototype、__proto__与constructor(图解)
作为一名前端工程师,必须搞懂JS中的prototype.__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关系并彻底搞 ...
- JS中的prototype
JS中的phototype是JS中比较难理解的一个部分 本文基于下面几个知识点: 1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是,现在有1个类A,我想要创建一个 ...
- JS中的prototype(原文地址:http://www.cnblogs.com/yjf512/archive/2011/06/03/2071914.html)
JS中的phototype是JS中比较难理解的一个部分 本文基于下面几个知识点: 1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是,现在有1个类A,我想要创建一个 ...
随机推荐
- linux 下如何打开core dump文件开关
dump文件可以在程序crash时,方便我们查看程序crash的地方和上下文信息.在window下,要能生成dump文件,需要自己编写相应的代码.不过现在网上可以找到相应的代码,只要把它下载后然后加到 ...
- 团队计划backlog
http://www.cnblogs.com/threemonkey/p/5388439.html
- RabbitMQ三种Exchange
Direct Exchange – 处理路由键.需要将一个队列绑定到交换机上,要求该消息与一个特定的路由键完全匹配.这是一个完整的匹配.如果一个队列绑定到该交换机上要求路由键 “dog”,则只有被标记 ...
- iOS五种本地缓存数据方式
iOS五种本地缓存数据方式 iOS本地缓存数据方式有五种:前言 1.直接写文件方式:可以存储的对象有NSString.NSArray.NSDictionary.NSData.NSNumber,数据 ...
- C# using的一些事
一.using释放资源 using不可以释放所有的对象,原因如下: 1.using可以主动释放的对象都需要实现IDisable接口. 2.即使都实现了IDisable接口,也没有必要全部使用using ...
- nginx基于IP的虚拟主机
知识点: server的语法: upstream语法: upstream中192.168.100.1不是ip只是个标识,只要和下面的proxy_pass 对应即可. 基于IP的虚拟主机: listen ...
- Maven3下的java web项目
咱们使用Maven3构建一个j2ee项目,项目的成果是一个war包,只需把它部署在服务器上,就可以使用浏览器访问. 具体详细信息 参考 http://www.mossle.com/docs/mave ...
- php目录下的ext目录中,执行的命令
php的目录下的ext目录,如果你只需要一个基本的扩展框架的话,执行下面的命令: ./ext_skel --extname=module_name module_name是你自己可以选择的扩展模块的名 ...
- BizTalk动手实验(三)BizTalk开发综合实验
1 课程简介 通过本课程熟悉BizTalk开发组件Schema/Map/Orchestration/Pipeline的开发与配置 2 准备工作 3 演示 3.1 创建与配置BizTalk应用程序 1. ...
- 百度Site App的uaredirect.js实现手机访问,自动跳转网站手机版
以下为代码,可放置在网站foot底部文件,或者haead顶部文件,建议将代码放在网站顶部,这样可以实现手机访问立即跳转! <script src="http://siteapp.bai ...