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 相关文章推荐
JavaScript TO HTML 转换
Jun 26 Javascript
jQuery Tools tab(幻灯片)
Jul 14 Javascript
jquery 循环显示div的示例代码
Oct 18 Javascript
浅析jquery的js图表组件highcharts
Mar 06 Javascript
深入分析JQuery和JavaScript的异同
Oct 23 Javascript
jquery实现textarea 高度自适应
Mar 11 Javascript
通过设置CSS中的position属性来固定层的位置
Dec 14 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
Feb 19 Javascript
详解Node.js模块间共享数据库连接的方法
May 24 Javascript
浅谈js中test()函数在正则中的使用
Aug 19 Javascript
Node.js读写文件之批量替换图片的实现方法
Sep 07 Javascript
Node.js实现发送邮件功能
Nov 06 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
[原创]效率较高的php下读取文本文件的代码
2008/07/02 PHP
PHP 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
js代码实现微博导航栏
2015/07/30 PHP
PHP调用接口API封装的例子
2019/10/11 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
jquery 查找iframe父级页面元素的实现代码
2011/08/28 Javascript
js常用自定义公共函数汇总
2014/01/15 Javascript
Jquery实现的一种常用高亮效果示例代码
2014/01/28 Javascript
ActiveX控件与Javascript之间的交互示例
2014/06/04 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
2015/10/23 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
2016/08/16 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
Javascript blur与click冲突解决办法
2017/01/09 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
利用npm 安装删除模块的方法
2018/05/15 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
2019/01/03 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
JS实现的对象去重功能示例
2019/06/04 Javascript
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
python使用nntp读取新闻组内容的方法
2015/05/08 Python
Python的randrange()方法使用教程
2015/05/15 Python
python 创建一维的0向量实例
2019/12/02 Python
使用pandas 将DataFrame转化成dict
2019/12/10 Python
python GUI库图形界面开发之PyQt5树形结构控件QTreeWidget详细使用方法与实例
2020/03/02 Python
解决paramiko执行命令超时的问题
2020/04/16 Python
Python实现LR1文法的完整实例代码
2020/10/25 Python
中国海淘族值得信赖的海淘返利网站:55海淘
2017/01/16 全球购物
新西兰领先的鞋类和靴子网上商城:Merchant 1948
2017/09/08 全球购物
Booking.com英国官网:全球酒店在线预订网站
2018/04/21 全球购物
德国大型和小型家用电器网上商店:Energeto
2019/05/15 全球购物
官方授权图形T恤和服装:Fifth Sun
2019/06/12 全球购物
求职推荐信
2013/10/28 职场文书
运动会邀请函范文
2014/01/31 职场文书
时尚女魔头观后感
2015/06/04 职场文书
庆七一晚会主持词
2015/06/30 职场文书
MySQL中日期型单行函数代码详解
2021/06/21 MySQL