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 相关文章推荐
Javascript vue.js表格分页,ajax异步加载数据
Oct 24 Javascript
Reactjs实现通用分页组件的实例代码
Jan 19 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
Jan 22 Javascript
Vue的轮播图组件实现方法
Mar 03 Javascript
Angular网络请求的封装方法
May 22 Javascript
JS+H5 Canvas实现时钟效果
Jul 20 Javascript
js字符串倒序的实例代码
Nov 30 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
Jun 20 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
Jul 29 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
Feb 06 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
Nov 05 Javascript
vue实现lodop打印功能的示例
Nov 11 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新手上路(九)
2006/10/09 PHP
PHP实现把文本中的URL转换为链接的auolink()函数分享
2014/07/29 PHP
php检索或者复制远程文件的方法
2015/03/13 PHP
PHP自带方法验证邮箱是否存在
2016/02/01 PHP
ThinkPHP的常用配置选项汇总
2016/03/24 PHP
PHP解析url并得到url参数方法总结
2018/10/11 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
js实现鼠标悬停图片上时滚动文字说明的方法
2015/02/17 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
2015/03/04 Javascript
Jquery中$.post和$.ajax的用法小结
2015/04/28 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
2015/08/28 Javascript
js判断鼠标位置是否在某个div中的方法
2016/02/26 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
2017/04/07 Javascript
解决React Native端口号修改的方法
2017/07/28 Javascript
详解如何用模块化的方式写vuejs
2017/12/16 Javascript
详解使用webpack构建多页面应用
2017/12/21 Javascript
vue-cli实现多页面多路由的示例代码
2018/01/30 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
2018/04/03 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
2019/01/29 Javascript
Vue.js中的extend绑定节点并显示的方法
2019/06/20 Javascript
Vue组件间通信 Vuex的用法解析
2019/08/05 Javascript
Django数据库表反向生成实例解析
2018/02/06 Python
Django生成PDF文档显示在网页上以及解决PDF中文显示乱码的问题
2019/07/04 Python
TensorFlow加载模型时出错的解决方式
2020/02/06 Python
Scrapy模拟登录赶集网的实现代码
2020/07/07 Python
HTML5 video视频字幕的使用和制作方法
2018/05/03 HTML / CSS
Wedgwood英国官方网站:英式精致骨瓷餐具、礼品与生活精品,源于1759年
2019/09/02 全球购物
英国计算机商店:Technextday
2019/12/28 全球购物
PHP经典面试题
2016/09/03 面试题
出国留学计划书
2014/04/27 职场文书
IT工程师岗位职责
2014/07/04 职场文书
超市食品安全承诺书
2015/04/29 职场文书
工程进度款催款函
2015/06/24 职场文书
《珍珠鸟》教学反思
2016/02/16 职场文书
SQL实现LeetCode(176.第二高薪水)
2021/08/04 MySQL
vue elementUI批量上传文件
2022/04/26 Vue.js