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 相关文章推荐
基于jquery自定义图片热区效果
Jul 21 Javascript
js鼠标点击图片实现随机变换图片的方法
Feb 16 Javascript
Javascript获取表单名称(name)的方法
Apr 02 Javascript
node.js回调函数之阻塞调用与非阻塞调用
Nov 13 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
May 16 Javascript
实例讲解jQuery中对事件的命名空间的运用
May 24 Javascript
AngularJS constant和value区别详解
Feb 28 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
Nov 20 Javascript
基于JSONP原理解析(推荐)
Dec 04 Javascript
element-ui 表格实现单元格可编辑的示例
Feb 26 Javascript
浅谈vue首屏加载优化
Jun 28 Javascript
Vue-axios-post数据后端接不到问题解决
Jan 09 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
PHP实现文件上传操作和封装
2020/03/04 PHP
php输出形式实例整理
2020/05/05 PHP
更正确的asp冒泡排序
2007/05/24 Javascript
jQuery实现的类flash菜单效果代码
2010/05/17 Javascript
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
JavaScript基础语法让人疑惑的地方小结
2012/05/23 Javascript
js获取指定日期前后的日期代码
2013/08/20 Javascript
理解Javascript闭包
2013/11/01 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
2013/12/04 Javascript
jQuery中click事件用法实例
2014/12/26 Javascript
详细分析JavaScript变量类型
2015/07/08 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
2016/05/09 Javascript
功能强大的Bootstrap使用手册(一)
2016/08/02 Javascript
Vue.js双向绑定操作技巧(初级入门)
2016/12/27 Javascript
微信小程序如何获取用户手机号
2018/01/26 Javascript
vue项目中微信登录的实现操作
2020/09/08 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
[01:04:49]KG vs LGD 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python爬虫获取京东手机图片的图文教程
2017/12/29 Python
使用Python轻松完成垃圾分类(基于图像识别)
2019/07/09 Python
Django时区详解
2019/07/24 Python
Python @property使用方法解析
2019/09/17 Python
python求绝对值的三种方法小结
2019/12/04 Python
Tensorflow中tf.ConfigProto()的用法详解
2020/02/06 Python
分享29个基于Bootstrap的HTML5响应式网页设计模板
2015/11/19 HTML / CSS
Groupon荷兰官方网站:高达70%的折扣
2019/11/01 全球购物
教师自荐信
2013/12/10 职场文书
《美丽的小路》教学反思
2014/02/26 职场文书
村干部承诺书
2014/03/28 职场文书
生态养殖创业计划书
2014/05/06 职场文书
全国税务系统先进集体事迹材料
2014/05/19 职场文书
环保口号大全
2014/06/12 职场文书
幼儿园清明节活动总结
2014/07/04 职场文书
2014领导干部学习焦裕禄同志先进事迹思想汇报
2014/09/19 职场文书
红与黑读书笔记
2015/06/29 职场文书
pandas DataFrame.shift()函数的具体使用
2021/05/24 Python