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与C# Windows应用程序交互方法
Jun 29 Javascript
用方法封装javascript的new操作符(一)
Dec 25 Javascript
jQuery为iframe的body添加click事件的实现代码
Apr 07 Javascript
浅谈jQuery事件绑定原理
Jan 02 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
Dec 16 Javascript
AngularJS读取JSON及XML文件的方法示例
May 25 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
Jun 22 Javascript
微信小程序实现图片压缩功能
Jan 26 Javascript
JavaScript分步实现一个出生日期的正则表达式
Mar 22 Javascript
Vue实现用户自定义字段显示数据的方法
Aug 28 Javascript
jquery实现垂直手风琴导航栏
Feb 18 jQuery
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
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
php INI配置文件的解析实现分析
2011/01/04 PHP
Php-Redis安装测试笔记
2015/03/05 PHP
CI框架出现mysql数据库连接资源无法释放的解决方法
2016/05/17 PHP
php array_keys 返回数组的键名
2016/10/25 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
php多进程中的阻塞与非阻塞操作实例分析
2020/03/04 PHP
js通过googleAIP翻译PHP系统的语言配置的实现代码
2011/10/17 Javascript
js中hash和ico的关联分析
2015/02/05 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
2016/01/21 Javascript
javascript之Boolean类型对象
2016/06/07 Javascript
js方法数据验证的简单实例
2016/09/17 Javascript
AngularJS实现表单验证功能
2017/01/09 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
2017/10/11 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
2017/10/21 Javascript
vue轮播图插件vue-concise-slider的使用
2018/03/13 Javascript
微信小程序实现简单表格
2019/02/14 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
2019/06/20 Javascript
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
python脚本内运行linux命令的方法
2015/07/02 Python
python使用MySQLdb访问mysql数据库的方法
2015/08/03 Python
Linux中Python 环境软件包安装步骤
2016/03/31 Python
Jupyter notebook在mac:linux上的配置和远程访问的方法
2019/01/14 Python
python项目对接钉钉SDK的实现
2019/07/15 Python
Tensorflow中的dropout的使用方法
2020/03/13 Python
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
2013/01/31 HTML / CSS
在校生党员自我评价
2013/09/25 职场文书
手机促销活动方案
2014/02/05 职场文书
怎么写好自荐书
2014/03/02 职场文书
人力资源管理专业自荐书
2014/07/07 职场文书
公安领导班子四风问题个人整改措施思想汇报
2014/10/09 职场文书
领导工作表现评语
2015/01/04 职场文书
工作迟到检讨书范文
2015/05/06 职场文书
交通安全温馨提示语
2015/07/14 职场文书
oracle设置密码复杂度及设置超时退出的功能
2022/06/28 Oracle