JS构造函数与原型prototype的区别介绍


Posted in Javascript onJuly 04, 2016

构造函数方法很好用,但是存在一个浪费内存

通过原型法分配的函数是所有对象共享的.

通过原型法分配的属性是独立.-----如果你不修改属性,他们是共享

如果我们希望所有的对象使用同一一个函数,最好使用原型法添加函数,这样比较节省内存.

例子:

//----构造函数模式

为Cat对象添加一个不变的属性"type"(种类),再添加一个方法eat(吃老鼠)。那么,原型对象Cat就变成了下面这样:

<script>
function Cat(name, color) {
  this.name = name;
  this.color = color;
  this.type = "猫科动物";
  this.eat = function () {
    alert("吃老鼠");
  };
  }


//生成实例:
var cat1 = new Cat("大毛", "黄色");
var cat2 = new Cat("二毛", "黑色");
alert(cat1.type);     // 猫科动物
cat1.eat();    // 吃老鼠 

alert(cat1.eat == cat2.eat); //false
</script>

那就是对于每一个实例对象,type属性和eat()方法都是一模一样的内容,每一次生成一个实例,都必须为重复的内容,多占用一些内存。这样既不环保,也缺乏效率。

//----Prototype模式

Javascript规定,每一个构造函数都有一个prototype属性,指向另一个对象。这个对象的所有属性和方法,都会被构造函数的实例继承。

这意味着,我们可以把那些不变的属性和方法,直接定义在prototype对象上。

<script>
function Cat(name, color) {
  this.name = name;
  this.color = color;
  }


Cat.prototype.type = "猫科动物";
Cat.prototype.eat = function () {
  alert("吃老鼠")
};


//生成实例。
var cat1 = new Cat("大毛", "黄色");
var cat2 = new Cat("二毛", "黑色");
alert(cat1.type); // 猫科动物
cat1.eat();// 吃老鼠


alert(cat1.eat == cat2.eat);//trueF
</script>

这时所有实例的type属性和eat()方法,其实都是一个内存地址,指向prototype对象,因此就提高了运行效率。

以上这篇JS构造函数与原型prototype的区别介绍就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
很可爱的输入框
Aug 03 Javascript
通过js来制作复选框的全选和不选效果
May 22 Javascript
js遍历子节点子元素附属性及方法
Aug 19 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
Jan 23 Javascript
详解AngularJS 模态对话框
Apr 07 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
Aug 19 Javascript
原生js实现可爱糖果数字时间特效
Dec 30 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
Jan 04 Javascript
基于JS实现翻书效果的页面切换样式
Feb 16 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
Jun 15 Javascript
JavaScript学习笔记之函数记忆
Sep 06 Javascript
微信小程序实现点赞业务
Feb 10 Javascript
js中使用使用原型(prototype)定义方法的好处详解
Jul 04 #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
You might like
php4的session功能评述(三)
2006/10/09 PHP
PHP简单处理表单输入的特殊字符的方法
2016/02/03 PHP
PHP函数超时处理方法
2016/02/14 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
通过DOM脚本去设置样式信息
2010/09/19 Javascript
jQuery对象的length属性用法实例
2014/12/27 Javascript
JS实现两表格里数据来回转移的方法
2015/05/28 Javascript
JavaScript采用递归算法计算阶乘实例
2015/08/04 Javascript
nodejs初步体验篇
2015/11/23 NodeJs
分享JavaScript与Java中MD5使用两个例子
2015/12/23 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
vue自定义全局组件(自定义插件)的用法
2018/01/30 Javascript
Vue项目中如何引入icon图标
2018/03/28 Javascript
JavaScript 判断对象中是否有某属性的常用方法
2018/06/14 Javascript
vue移动端监听滚动条高度的实现方法
2018/09/03 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
2018/09/16 Javascript
[01:34]2014DOTA2 TI预选赛预选赛 选手比赛房大揭秘!
2014/05/20 DOTA
浅析Python中else语句块的使用技巧
2016/06/16 Python
Python numpy生成矩阵、串联矩阵代码分享
2017/12/04 Python
Python中常用信号signal类型实例
2018/01/25 Python
Python中的Numpy矩阵操作
2018/08/12 Python
关于Django ForeignKey 反向查询中filter和_set的效率对比详解
2018/12/15 Python
HTML5实现锚点时请使用id取代name
2013/09/06 HTML / CSS
为世界各地的女性设计和生产时尚服装:ROMWE
2016/09/17 全球购物
介绍一下UNIX启动过程
2013/11/14 面试题
《观舞记》教学反思
2014/04/16 职场文书
学校火灾防控方案
2014/06/09 职场文书
物理学专业求职信
2014/07/04 职场文书
简单租房协议书范本
2014/08/20 职场文书
机关党总支领导班子整改方案
2014/09/20 职场文书
干部作风建设工作总结
2014/10/29 职场文书
教师个人师德总结
2015/02/06 职场文书
写给导师的自荐信
2015/03/06 职场文书
郭明义观后感
2015/06/08 职场文书
安全伴我行主题班会
2015/08/13 职场文书