关于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 相关文章推荐
在JavaScript中实现命名空间
Nov 23 Javascript
Firebug 字幕文件JSON地址获取代码
Oct 28 Javascript
js图片延迟技术一般的思路与示例
Mar 20 Javascript
JavaScript中Date.toSource()方法的使用教程
Jun 12 Javascript
js模拟淘宝网的多级选择菜单实现方法
Aug 18 Javascript
详解React 在服务端渲染的实现
Nov 16 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
Sep 03 Javascript
仿ElementUI实现一个Form表单的实现代码
Apr 23 Javascript
微信小程序实现商城倒计时
Nov 01 Javascript
微信小程序如何使用canvas二维码保存至手机相册
Jul 15 Javascript
微信小程序拖拽排序列表的示例代码
Jul 08 Javascript
Javascript实现关闭广告效果
Jan 29 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
解析zend studio中直接导入svn中的项目的方法步骤
2013/06/21 PHP
PHP消息队列用法实例分析
2016/02/12 PHP
PHP处理CSV表格文件的常用操作方法总结
2016/07/01 PHP
php加密解密字符串示例
2016/10/13 PHP
PHP数组基本用法与知识点总结
2020/06/02 PHP
用jscript实现新建word文档
2007/06/15 Javascript
JS 动态获取节点代码innerHTML分析 [IE,FF]
2009/11/30 Javascript
javascript与CSS复习(《精通javascript》)
2010/06/29 Javascript
jQuery 选择器项目实例分析及实现代码
2012/12/28 Javascript
JS实现日期加减的方法
2013/11/29 Javascript
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
js简单的点击返回顶部效果实现方法
2015/04/10 Javascript
Three.js实现绘制字体模型示例代码
2017/09/26 Javascript
jQuery pagination分页示例详解
2018/10/23 jQuery
JS+canvas画布实现炫酷的旋转星空效果示例
2019/02/13 Javascript
基于 jQuery 实现键盘事件监听控件
2019/04/04 jQuery
使用 vue 实现灭霸打响指英雄消失的效果附demo
2019/05/06 Javascript
jQuery实现鼠标移入显示蒙版效果
2020/01/11 jQuery
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
2020/03/10 Javascript
jQuery HTML css()方法与css类实例详解
2020/05/20 jQuery
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
2020/09/29 Javascript
Python爬虫框架Scrapy基本用法入门教程
2018/07/26 Python
Python读取Excel表格,并同时画折线图和柱状图的方法
2018/10/14 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
opencv 阈值分割的具体使用
2020/07/08 Python
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
2013/01/09 HTML / CSS
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
Spartoo荷兰:鞋子、包包和服装
2018/07/12 全球购物
越南综合购物网站:Lazada越南
2019/06/10 全球购物
兰蔻法国官方网站:Lancôme法国
2020/02/22 全球购物
法英专业大学生职业生涯规划范文:衡外情,量己力!
2014/09/23 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书
三年级学生期末评语
2014/12/26 职场文书
清洁员岗位职责
2015/02/15 职场文书
JS Object构造函数之Object.freeze
2021/04/28 Javascript