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 相关文章推荐
js模拟类继承小例子
Jul 17 Javascript
扩展easyui.datagrid,添加数据loading遮罩效果代码
Nov 02 Javascript
js之onload事件的一点使用心得
Aug 14 Javascript
ajax提交表单实现网页无刷新注册示例
May 08 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
ajax+jQuery实现级联显示地址的方法
May 06 Javascript
表单验证正则表达式实例代码详解
Nov 09 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
Nov 24 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
Apr 06 Javascript
Vue实现6位数密码效果
Aug 18 Javascript
layui实现多图片上传并限制上传的图片数量
Sep 26 Javascript
Electron实现应用打包、自动升级过程解析
Jul 07 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
CI框架中libraries,helpers,hooks文件夹详细说明
2014/06/10 PHP
PHP实现删除字符串中任何字符的函数
2015/08/11 PHP
DEDE实现转跳属性文档在模板上调用出转跳地址
2016/11/04 PHP
JQGrid的用法解析(列编辑,添加行,删除行)
2013/11/08 Javascript
基于jquery实现的文字淡入淡出效果
2013/11/14 Javascript
jquery中event对象属性与方法小结
2013/12/18 Javascript
JS实现模拟风力的雪花飘落效果
2015/05/13 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
浅谈js中调用函数时加不加括号的问题
2016/07/28 Javascript
JS如何生成一个不重复的ID的函数
2016/12/25 Javascript
jQuery基本筛选选择器实例代码
2017/02/06 Javascript
JavaScript实现获取远程的html到当前页面中
2017/03/26 Javascript
基于JS对象创建常用方式及原理分析
2017/06/28 Javascript
mui框架移动开发初体验详解
2017/10/11 Javascript
基于js 字符串indexof与search方法的区别(详解)
2017/12/04 Javascript
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
vue 设置路由的登录权限的方法
2018/07/03 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
2018/11/29 Javascript
Vue 实现手动刷新组件的方法
2019/02/19 Javascript
vue下使用nginx刷新页面404的问题解决
2019/08/02 Javascript
JavaScript事件委托实现原理及优点进行
2020/08/29 Javascript
JavaScript canvas实现文字时钟
2021/01/10 Javascript
[47:38]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python实现将数据库一键导出为Excel表格的实例
2016/12/30 Python
Django Admin 实现外键过滤的方法
2017/09/29 Python
Python如何调用外部系统命令
2019/08/07 Python
Python多线程实现支付模拟请求过程解析
2020/04/21 Python
HTML5 Canvas概述
2009/08/26 HTML / CSS
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
PyQt QMainWindow的使用示例
2021/03/24 Python
中学教师自我鉴定
2014/02/07 职场文书
七夕活动策划方案
2014/08/16 职场文书
工作疏忽、懈怠的检讨书
2014/09/11 职场文书
新郎婚礼答谢词
2015/01/04 职场文书
Mac M1安装mnmp (Mac+Nginx+MySQL+PHP) 开发环境
2021/03/29 PHP
SQLServer 错误: 15404,无法获取有关 Windows NT 组/用户 WIN-8IVSNAQS8T7\Administrator 的信息
2021/06/30 SQL Server