关于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 相关文章推荐
基于jquery的网站幻灯片切换效果焦点图代码
Sep 15 Javascript
js实现两个值相加alert出来精确到指定位
Sep 25 Javascript
html5+javascript制作简易画板附图
Apr 25 Javascript
js获取form的方法
May 06 Javascript
javascript中setTimeout使用指南
Jul 26 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
May 13 Javascript
vue组件中的数据传递方法
May 14 Javascript
webpack之引入图片的实现及问题
Oct 08 Javascript
微信小程序上传图片到php服务器的方法
May 23 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
Aug 02 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
Jul 18 Javascript
vue vant中picker组件的使用
Nov 03 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
聊天室php&amp;mysql(三)
2006/10/09 PHP
php使用MySQL保存session会话的方法
2015/06/18 PHP
Yii2单元测试用法示例
2016/11/12 PHP
php获取数据库中数据的实现方法
2017/06/01 PHP
PHP设计模式之适配器模式原理与用法分析
2018/04/25 PHP
PHP echo()函数讲解
2019/02/15 PHP
判断脚本加载是否完成的方法
2009/05/26 Javascript
extjs grid设置某列背景颜色和字体颜色的方法
2010/09/03 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
2010/12/22 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
2015/06/15 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
2015/08/13 Javascript
JavaScript中var关键字的使用详解
2015/08/14 Javascript
JS中改变this指向的方法(call和apply、bind)
2016/03/26 Javascript
AngularJs directive详解及示例代码
2016/09/01 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
关于layui导航栏不展示下拉列表的解决方法
2019/09/25 Javascript
javascript操作元素的常见方法小结
2019/11/13 Javascript
Python实现的数据结构与算法之链表详解
2015/04/22 Python
高效测试用例组织算法pairwise之Python实现方法
2017/07/19 Python
Django自定义用户表+自定义admin后台中的字段实例
2019/11/18 Python
python判断变量是否为int、字符串、列表、元组、字典的方法详解
2020/02/13 Python
解决TensorFlow调用Keras库函数存在的问题
2020/07/06 Python
python自动化测试三部曲之unittest框架的实现
2020/10/07 Python
Kendra Scott官网:美国领先的时尚配饰品牌
2020/10/22 全球购物
父亲八十大寿答谢词
2014/01/23 职场文书
运动会跳远加油稿
2014/02/20 职场文书
维修工先进事迹
2014/05/29 职场文书
调研座谈会发言材料
2014/08/23 职场文书
建议书格式
2015/02/04 职场文书
求职简历自我评价怎么写
2015/03/10 职场文书
英语读书笔记
2015/07/02 职场文书
雨雪天气温馨提示
2015/07/15 职场文书
小学五年级(说明文3篇)
2019/08/13 职场文书
python实战之90行代码写个猜数字游戏
2021/04/22 Python
pytorch中的numel函数用法说明
2021/05/13 Python