收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 2546|回复: 0

[jquery] 原型prototype的使用

[复制链接]
发表于 2017-7-3 17:46:28 | 显示全部楼层 |阅读模式
本帖最后由 jianwang19 于 2017-7-6 11:21 编辑

先上代码:
  1. <script type="text/javascript">
  2. var F = function(){};
  3. F.add = function(a,b){
  4.         return a+b;
  5. };
  6. </script>
  7. <script type="text/javascript">
  8. var f = new F();
  9. </script>
  10. <script type="text/javascript">
  11. F.prototype.sub = function(a,b){
  12.         return a-b;
  13. };
  14. </script>
  15. <script type="text/javascript">
  16. console.log(f.add);//undefined
  17. console.log(f.sub);//function F.prototype.sub()
复制代码

如果一个功能需要提供对外接口,而且同时进行开发及维护升级,原型prototype就派上了用场。
在上面的例子中,add函数属于F,但不属于f,f无法调用,
sub函数由于使用原型prototype加入到F中,所以存在于F.prototype中,而f对象由于是从F中new出来的,所以可以通过原型链f.__proto__查找到F.prototype,所以可以找到sub函数。
这里需要知道的一点就是原型prototype和原型链__proto__的关系。
因为var f = new F();
所以F.prototype == f.__proto__
f中找不到的属性会通过原型链f.__proto__去查找,这就是JavaScript实现继承的方式。
同时,如果一个功能需要拓展实现,可以这么写:
  1. <script type="text/javascript">
  2. var F = function(){
  3.     this.add = function(a,b){console.log(a+b)};
  4. };
  5. F.prototype.add = function(a,b){console.log(a+' + '+b+' = '+(a+b));};
  6. var f = new F();
  7. console.log(f);
  8. f.add(1,2);
  9. f.__proto__.add(1,2);
  10. </script>
复制代码

这里对add方法实现了拓展,但是同时不影响原来的add方法。
您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-9-29 19:13 , Processed in 0.110074 second(s), 7 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表