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 事件查询综合
Jul 13 Javascript
jQuery操作DOM之获取表单控件的值
Jan 23 Javascript
jquery简单实现网页层的展开与收缩效果
Aug 07 Javascript
Bootstrap源码解读网格系统(3)
Dec 22 Javascript
微信小程序使用navigateTo数据传递的实例
Sep 26 Javascript
Node.js搭建WEB服务器的示例代码
Aug 15 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
Oct 12 Javascript
layui 解决富文本框form表单提交为空的问题
Oct 26 Javascript
KnockoutJS数组比较算法实例详解
Nov 25 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
Jun 02 Javascript
JavaScript实现点击自制菜单效果
Feb 02 Javascript
vue实现倒计时功能
Mar 24 Vue.js
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
使用Apache的rewrite技术
2006/06/22 PHP
PHP开发的一些注意点总结
2010/10/12 PHP
PHP中全局变量global和$GLOBALS[]的区别分析
2012/08/06 PHP
php如何解决无法上传大于8M的文件问题
2014/03/10 PHP
获取HTML DOM节点元素的方法的总结
2009/08/21 Javascript
一些主流JS框架中DOMReady事件的实现小结
2011/02/12 Javascript
基于JQuery实现异步刷新的代码(转载)
2011/03/29 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
2013/05/31 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
2013/11/21 Javascript
js获取url中"?"后面的字串方法
2014/05/15 Javascript
Flexigrid在IE下不显示数据的有效处理方法
2014/09/04 Javascript
js实现带按钮的上下滚动效果
2015/05/12 Javascript
node.js操作mysql(增删改查)
2015/07/24 Javascript
JavaScript图片轮播代码分享
2015/07/31 Javascript
AngularJS基础 ng-cloak 指令简单示例
2016/08/01 Javascript
Vue中封装input组件的实例详解
2017/10/17 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
2017/10/20 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
2018/01/18 Javascript
浅析vue.js数组的变异方法
2018/06/30 Javascript
JS精确判断数据类型代码实例
2019/12/18 Javascript
python3图片转换二进制存入mysql
2013/12/06 Python
使用Python程序抓取新浪在国内的所有IP的教程
2015/05/04 Python
Python实现在tkinter中使用matplotlib绘制图形的方法示例
2018/01/18 Python
python中返回矩阵的行列方法
2018/04/04 Python
Python中if elif else及缩进的使用简述
2018/05/31 Python
django项目中使用手机号登录的实例代码
2019/08/15 Python
python conda操作方法
2019/09/11 Python
matlab灰度图像调整及imadjust函数的用法详解
2020/02/27 Python
Django 再谈一谈json序列化
2020/03/16 Python
浅谈keras中loss与val_loss的关系
2020/06/22 Python
用python制作个音乐下载器
2021/01/30 Python
SheIn沙特阿拉伯:女装在线
2020/03/23 全球购物
学校体育节班级口号
2015/12/25 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书
mysql死锁和分库分表问题详解
2021/04/16 MySQL
纯 CSS 自定义多行省略的问题(从原理到实现)
2021/11/11 HTML / CSS