js中使用使用原型(prototype)定义方法的好处详解


Posted in Javascript onJuly 04, 2016

经常在前端面试或是和其他同行沟通是,在谈到构造在JS定义构造函数的方法是最好使用原型的方式:将方法定义到构造方法的prototype上,这样的好处是,通过该构造函数生成的实例所拥有的方法都是指向一个函数的索引,这样可以节省内存。

当然,这种说法没有任何问题,只是在实现上,并非只有使用prototype的方式才能达到这样的效果,我们可以将方法以函数的形式定义在构造函数之外,然后在构造函数中通过this.method = method的方式,这样生成的实例的方法也都通过索引指向一个函数,具体如下:

// 不使用原型定义方法:
(function() {
  function Constractor() {
    this.method1 = method1;
    this.method2 = method2;
  }

  function method1() {
  }

  function method2() {
  }
})();

一般使用原型定义时代码如下:

(function () {
  function Constractor() {
  }

  Constactor.prototype = {
    method1: function() {
    },
    method2: function() {
    }
  };
  
  // 或者
  Constactor.prototype.method1 = function() {
  };
  Constactor.prototype.method2 = function() {
  };

})();

理论和实现都没有什么高深的,只是为了达到同样的目的,可以通过不同的途径,只是此种方式在使用instanceOf运算符来判断继承关系时就不奏效了。

以上这篇js中使用使用原型(prototype)定义方法的好处详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Tab页界面,用jQuery及Ajax技术实现
Sep 21 Javascript
页面只有一个text的时候,回车自动submit的解决方法
Aug 12 Javascript
JS链式调用的实现方法
Mar 07 Javascript
php和js对数据库图片进行等比缩放示例
Apr 28 Javascript
跟我学习javascript的prototype使用注意事项
Nov 17 Javascript
早该知道的7个JavaScript技巧
Jun 21 Javascript
js实现密码强度检验
Jan 15 Javascript
json数据处理及数据绑定
Jan 25 Javascript
微信小程序报错:this.setData is not a function的解决办法
Sep 27 Javascript
微信小程序定位当前城市的方法
Jul 19 Javascript
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
Sep 21 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
Jul 04 #Javascript
浅谈js构造函数的方法与原型prototype
Jul 04 #Javascript
全面了解js中的script标签
Jul 04 #Javascript
jQuery基础_入门必看知识点
Jul 04 #Javascript
把普通对象转换成json格式的对象的简单实例
Jul 04 #Javascript
JS实现n秒后自动跳转的两种方法
Nov 30 #Javascript
js输出数据精确到小数点后n位代码
Jul 02 #Javascript
You might like
桌面中心(一)创建数据库
2006/10/09 PHP
从C/C++迁移到PHP——判断字符类型的函数
2006/10/09 PHP
用php实现让页面只能被百度gogole蜘蛛访问的方法
2009/12/29 PHP
php_screw安装使用教程(另一个PHP代码加密实现)
2014/05/29 PHP
Laravel框架中队列和工作(Queues、Jobs)操作实例详解
2020/04/06 PHP
jQuery中add实现同时选择两个id对象
2010/10/22 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
2013/01/15 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
2015/01/21 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
js+canvas简单绘制圆圈的方法
2016/01/28 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
2020/11/30 Javascript
react-native封装插件swiper的使用方法
2018/03/20 Javascript
vue router 跳转后回到顶部的实例
2018/08/31 Javascript
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
vue 开发企业微信整合案例分析
2019/12/02 Javascript
Vue实现跑马灯效果
2020/05/25 Javascript
Vue中父子组件的值传递与方法传递
2020/09/28 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
2020/11/07 Javascript
Python科学计算环境推荐——Anaconda
2014/06/30 Python
使用url_helper简化Python中Django框架的url配置教程
2015/05/30 Python
Java Web开发过程中登陆模块的验证码的实现方式总结
2016/05/25 Python
Python调用C++程序的方法详解
2017/01/24 Python
django模板语法学习之include示例详解
2017/12/17 Python
python sys,os,time模块的使用(包括时间格式的各种转换)
2018/04/27 Python
django-filter和普通查询的例子
2019/08/12 Python
基于python爬取链家二手房信息代码示例
2020/10/21 Python
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
意大利高端时尚买手店:Stefania Mode
2018/03/01 全球购物
可打印的优惠券、杂货和优惠券代码:Coupons.com
2018/06/12 全球购物
新西兰便宜隐形眼镜购买网站:QUICKLENS New Zealand
2019/03/02 全球购物
linux面试题参考答案(4)
2013/01/28 面试题
采购助理岗位职责
2014/02/16 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
2014年法务工作总结
2014/12/11 职场文书
Python基础之元类详解
2021/04/29 Python