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 相关文章推荐
JavaScrip单线程引擎工作原理分析
Sep 04 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
Oct 11 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
Aug 07 Javascript
javascript中全局对象的isNaN()方法使用介绍
Dec 19 Javascript
什么是cookie?js手动创建和存储cookie
May 27 Javascript
使用jQuery判断IE浏览器版本的代码
Jun 14 Javascript
jQuery实现自动滚动到页面顶端的方法
May 22 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
Oct 29 Javascript
JSP基于Bootstrap分页显示实例解析
Jun 12 Javascript
第二篇Bootstrap起步
Jun 21 Javascript
如何防止INPUT按回车自动提交表单FORM
Dec 06 Javascript
超简单的Vue.js环境搭建教程
Mar 17 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新建文件自动编号的思路与实现
2011/06/27 PHP
php+js实现图片的上传、裁剪、预览、提交示例
2013/08/27 PHP
PHP采用自定义函数实现遍历目录下所有文件的方法
2014/08/19 PHP
php将文件夹打包成zip文件的简单实现方法
2016/10/04 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
php对微信支付回调处理的方法
2018/08/23 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
图片格式的JavaScript和CSS速查手册
2007/08/20 Javascript
JavaScript 脚本将当地时间转换成其它时区
2009/03/19 Javascript
jQuery 常见开发使用技巧总结
2009/12/26 Javascript
ExtJs扩展之GroupPropertyGrid代码
2010/03/05 Javascript
菜鸟javascript基础资料整理3 正则
2010/12/06 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
jQuery Validation Plugin验证插件手动验证
2016/01/26 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
2016/11/25 Javascript
Bootstrap输入框组件简单实现代码
2017/03/06 Javascript
vue中的event bus非父子组件通信解析
2017/10/27 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
2017/12/26 Javascript
vue基于element的区间选择组件
2018/09/07 Javascript
layer提示框添加多个按钮选择的实例
2019/09/12 Javascript
夯基础之手撕javascript继承详解
2020/11/09 Javascript
浅谈Python中的zip()与*zip()函数详解
2018/02/24 Python
python3 动态模块导入与全局变量使用实例
2019/12/22 Python
Python使用进程Process模块管理资源
2020/03/05 Python
Python flask框架端口失效解决方案
2020/06/04 Python
Python工程师必考的6个经典面试题
2020/06/28 Python
python 获取域名到期时间的方法步骤
2021/02/10 Python
加拿大最大的书店:Indigo
2017/01/01 全球购物
Falconeri美国官网:由羊绒和羊毛制成的针织服装
2018/04/08 全球购物
优秀员工年终发言演讲稿
2014/01/01 职场文书
网上开店必备创业计划书
2014/01/26 职场文书
2014医学院领导干部四风对照检查材料思想汇报
2014/09/16 职场文书
运动会400米加油稿(8篇)
2014/09/22 职场文书
自习课吵闹检讨书范文
2014/09/26 职场文书
Python利用机器学习算法实现垃圾邮件的识别
2021/06/28 Python
星际争霸 Light vs Action 一场把教主看到鬼畜的比赛
2022/04/01 星际争霸