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 相关文章推荐
自写的一个jQuery圆角插件
Oct 26 Javascript
js+html5实现canvas绘制椭圆形图案的方法
May 21 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
Aug 09 Javascript
js的OOP继承实现(必看篇)
Feb 18 Javascript
Angular 开发学习之Angular CLI的安装使用
Dec 31 Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 Javascript
详解webpack loader和plugin编写
Oct 12 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
前端天气插件tpwidget使用方法详解
Jun 24 Javascript
vue路由教程之静态路由
Sep 03 Javascript
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
教你部署vue项目到docker
Apr 05 Vue.js
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编程实现获取excel文档内容的代码实例
2011/06/28 PHP
shopex主机报错误请求解决方案(No such file or directory)
2011/12/27 PHP
mysql_connect localhost和127.0.0.1的区别(网络层阐述)
2015/03/26 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
情人节之礼 js项链效果
2012/02/13 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
2013/06/05 Javascript
Javascript delete 引用类型对象
2013/11/01 Javascript
JS实现切换标签页效果实例代码
2013/11/01 Javascript
jquery选择器原理介绍($()使用方法)
2014/03/25 Javascript
js动态改变select选择变更option的index值示例
2014/07/10 Javascript
基于jQuery实现仿淘宝套餐选择插件
2015/03/04 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
jQuery无刷新上传之uploadify3.1简单使用
2016/06/18 Javascript
webpack4 从零学习常用配置(小结)
2019/05/28 Javascript
在vue中使用防抖函数组件操作
2020/07/26 Javascript
[01:14]3.19DOTA2发布会 三代刀塔人第二代
2014/03/25 DOTA
python调用java的Webservice示例
2014/03/10 Python
Python sqlite3事务处理方法实例分析
2017/06/19 Python
Python进度条实时显示处理进度的示例代码
2018/01/30 Python
python opencv之分水岭算法示例
2018/02/24 Python
matlab中实现矩阵删除一行或一列的方法
2018/04/04 Python
python实现图片素描效果
2020/09/26 Python
瑞贝卡·泰勒官方网站:Rebecca Taylor
2016/09/24 全球购物
Java TransactionAPI (JTA) 主要包含几部分
2012/12/07 面试题
广州地球村科技数据库题目
2016/04/25 面试题
保洁主管岗位职责
2013/11/20 职场文书
大学生水果店创业计划书
2014/01/28 职场文书
关于旷工的检讨书
2014/02/02 职场文书
小学生读书感言
2014/02/12 职场文书
二年级小学生评语
2014/04/21 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
党员对照检查材料思想汇报(党的群众路线)
2014/09/24 职场文书
三方股东合作协议书
2014/10/28 职场文书
大学新生入学感想
2015/08/07 职场文书
Go语言设计模式之结构型模式
2021/06/22 Golang