关于Javascript 的 prototype问题。


Posted in Javascript onJanuary 03, 2007

prototype

1、prototype是与Clone联系起来的,
也就是说,当创建实例时,prototype会把成员clone到该Class(function)的实例上。
Detail: 最常见的几个内置内对象里的prototype,如:Array原型有join, split方法,
当创建数组a时var a=[1,2],原型里的所有方法都被clone到a上。

2、this是该类的实例指针(该指针为"动态联编")。如何理解js this的动态联编,请参考我写的这篇文章:http://blog.never-online.net/article.asp?id=117
当创建该类实例时,实例具有预先定义的所有以this.p类似的成员。也具有prototype原型里定义的成员,如果类内部定义与prototype里的一个定义相同,则不是重写:

看这个例子,jsclass定义的this.func,还有prototype里定义的func,如果jsclass内部有成员与原型里的相同,实例化时优先权为this.func,但注意,原型里并不是重写func,而是jsclass实例共有的,虽然其优先权没有this.func高,与此同时,我们也可以以这种方式来理解prototype与类内部定义成员:

<script>
function jsclass() {
  this.p = "never-online";
  this.func = function () {
    alert('func');
  }
}
jsclass.prototype = {
  func : function () {
  alert(this.p);
  }
}
var a = new jsclass();
a.func();
delete a.func;
a.func();
</script>

我们再把上面的代码修改一下。这样看:

<script>
function jsclass() {
  this.p = "never-online";
  this.func = function () {
    alert('func');
  }
}
jsclass.prototype = {
  func : function () {
  alert(this.p?this.p:'no value');
  }
}
var a = new jsclass();
a.func();//调用内部成员
delete a.func;//此处删除是的类内部定义的func
a.func();//调用prototype成员
delete a.func;//试图再次删除func(prototype)
a.func();//删除无效(内部的func已经被删除),依然可打印输出
</script>

注释:类内部的成员可以用delete删除,而原型里定义的,则不能用delete 实例名.成员名来删除的。
如果用prototype定义后,实例化时:用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象
也就是在上面的
delete a.func;//此处删除是的类内部定义的func
a.func();//调用prototype成员
之后,再次调用a.func(),调用时,通过调用prototype.func来实现的。而并非a.func(),这也解释了为什么在jsclass内部定义func与在prototype定义func时不会有重写现象。

Javascript 相关文章推荐
myFocus slide3D v1.1.0 使用方法与下载
Jan 12 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
Dec 13 Javascript
判断iframe里的页面是否加载完成
Jun 06 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
Jun 17 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
Sep 29 Javascript
基于Bootstrap仿淘宝分页控件实现代码
Nov 07 Javascript
分享5个好用的javascript文件上传插件
Sep 16 Javascript
JavaScript循环遍历你会用哪些之小结篇
Sep 28 Javascript
layui中的switch开关实现方法
Sep 03 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
Feb 24 Javascript
js判断密码强度的方法
Mar 18 Javascript
vue组件开发之tab切换组件使用详解
Aug 21 Javascript
彻底搞懂JS无缝滚动代码
Jan 03 #Javascript
经典的解除许多网站无法复制文字的绝招
Dec 31 #Javascript
对象的类型:本地对象(1)
Dec 29 #Javascript
JavaScript高级程序设计
Dec 29 #Javascript
JavaScript 参考教程
Dec 29 #Javascript
js自带函数备忘 数组
Dec 29 #Javascript
slice函数的用法 之不错的应用
Dec 29 #Javascript
You might like
关于Intype一些小问题的解决办法
2008/03/28 PHP
php装饰者模式简单应用案例分析
2019/10/23 PHP
自动完成JS类(纯JS, Ajax模式)
2009/03/12 Javascript
jquery 实现的全选和反选
2009/04/15 Javascript
跟着JQuery API学Jquery 之二 属性
2010/04/09 Javascript
js动态生成指定行数的表格
2013/07/11 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
2013/11/15 Javascript
js+jquery实现图片裁剪功能
2015/01/02 Javascript
angular中使用路由和$location切换视图
2015/01/23 Javascript
JavaScript检查数字是否为整数或浮点数的方法
2015/06/09 Javascript
JS实现的3D拖拽翻页效果代码
2015/10/31 Javascript
Bootstrap每天必学之导航组件
2016/04/25 Javascript
Boostrap入门准备之border box
2016/05/09 Javascript
微信小程序 教程之事件
2016/10/18 Javascript
vuejs指令详解
2017/02/07 Javascript
Node.js 中使用 async 函数的方法
2017/11/20 Javascript
JS控制鼠标拒绝点击某一按钮的实例
2017/12/29 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
2018/02/03 Javascript
JS对象与json字符串相互转换实现方法示例
2018/06/14 Javascript
利用Decorator如何控制Koa路由详解
2018/06/26 Javascript
JavaScript实现的联动菜单特效示例
2019/07/08 Javascript
vue 实现input表单元素的disabled示例
2019/10/28 Javascript
vue实现浏览器全屏展示功能
2019/11/27 Javascript
使用vue构建多页面应用的示例
2020/10/22 Javascript
[50:12]EG vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python网络编程学习笔记(八):XML生成与解析(DOM、ElementTree)
2014/06/09 Python
Python异常对代码运行性能的影响实例解析
2018/02/08 Python
使用Python处理BAM的方法
2018/09/28 Python
pyhanlp安装介绍和简单应用
2019/02/22 Python
pycharm 批量修改变量名称的方法
2019/08/01 Python
基于Python获取城市近7天天气预报
2019/11/26 Python
python os.path.isfile 的使用误区详解
2019/11/29 Python
Python.append()与Python.expand()用法详解
2019/12/18 Python
顶岗实习接收函
2014/01/09 职场文书
个人求职自荐信范文
2015/03/06 职场文书
教师聘用意向书
2015/05/11 职场文书