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 相关文章推荐
Extjs学习笔记之六 面版
Jan 08 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
Mar 04 Javascript
JS全局变量和局部变量最新解析
Jun 24 Javascript
轻松掌握JavaScript代理模式
Aug 26 Javascript
ES6新特征数字、数组、字符串
Oct 01 Javascript
详解AngularJS controller调用factory
May 19 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
Aug 25 Javascript
js实现鼠标跟随运动效果
Aug 02 Javascript
微信小程序实战篇之购物车的实现代码示例
Nov 30 Javascript
2种在vue项目中使用百度地图的简单方法
Sep 28 Javascript
js序列化和反序列化的使用讲解
Jan 19 Javascript
Vue双向数据绑定(MVVM)的原理
Oct 03 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 在线打包_支持子目录
2008/06/28 PHP
php 静态变量的初始化
2009/11/15 PHP
php获取数组长度的方法(有实例)
2013/10/27 PHP
php通过隐藏表单控件获取到前两个页面的url
2014/09/09 PHP
使用PHP实现下载CSS文件中的图片
2015/12/06 PHP
js+CSS 图片等比缩小并垂直居中实现代码
2008/12/01 Javascript
Javascript 获取链接(url)参数的方法[正则与截取字符串]
2010/02/09 Javascript
JavaScript实现拼音排序的方法
2012/11/20 Javascript
js操纵dom生成下拉列表框的方法
2014/02/24 Javascript
JS数组的赋值介绍
2014/03/10 Javascript
JQuery+CSS实现图片上放置按钮的方法
2015/05/29 Javascript
AngularGauge 属性解析详解
2016/09/06 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
2018/05/30 Javascript
Python实现绘制双柱状图并显示数值功能示例
2018/06/23 Python
Python 读取某个目录下所有的文件实例
2018/06/23 Python
Python文件读写保存操作的示例代码
2018/09/14 Python
python调用外部程序的实操步骤
2019/03/04 Python
Python爬取视频(其实是一篇福利)过程解析
2019/08/01 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
Macbook安装Python最新版本、GUI开发环境、图像处理、视频处理环境详解
2020/02/17 Python
使用Keras加载含有自定义层或函数的模型操作
2020/06/10 Python
Django REST Swagger实现指定api参数
2020/07/07 Python
pycharm配置QtDesigner的超详细方法
2021/01/25 Python
HTML5+lufylegend实现游戏中的卷轴
2016/02/29 HTML / CSS
雅诗兰黛美国官网:Estee Lauder美国
2016/07/21 全球购物
大型活动策划方案
2014/01/12 职场文书
高中物理教学反思
2014/02/08 职场文书
幼儿园大班教学反思
2014/02/10 职场文书
金融专业毕业生自荐信
2014/06/26 职场文书
授权收款委托书范本
2014/10/10 职场文书
检讨书范文
2015/01/27 职场文书
自荐信格式模板
2015/03/27 职场文书
关爱留守儿童捐款倡议书
2015/04/27 职场文书
被委托人身份证明
2015/08/07 职场文书
学校学期工作总结
2015/08/13 职场文书
React + Threejs + Swiper 实现全景图效果的完整代码
2021/06/28 Javascript