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 相关文章推荐
List the Stored Procedures in a SQL Server database
Jun 20 Javascript
JavaScript 验证浏览器是否支持javascript的方法小结
May 17 Javascript
js中arguments的用法(实例讲解)
Nov 30 Javascript
Javasipt:操作radio标签详解
Dec 30 Javascript
node.js中的fs.openSync方法使用说明
Dec 17 Javascript
JavaScript实现二分查找实例代码
Feb 22 Javascript
原生js仿浏览器滚动条效果
Mar 02 Javascript
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
vue axios请求拦截实例代码
Mar 29 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
May 30 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
Jun 03 Javascript
javascript系统时间设置操作示例
Jun 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 ? EasyUI DataGrid 资料存的方式介绍
2012/11/07 PHP
PHP扩展CURL的用法详解
2014/06/20 PHP
示例详解Laravel的注册重构
2016/08/14 PHP
thinkphp中AJAX返回ajaxReturn()方法分析
2016/12/06 PHP
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
2010/05/18 Javascript
jQuery验证插件 Validate详解
2014/11/20 Javascript
js表单中选择框值的获取及表单的序列化
2015/12/17 Javascript
JavaScript代码性能优化总结篇
2016/05/15 Javascript
详解javascript事件绑定使用方法
2016/10/20 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
node中koa中间件机制详解
2017/08/22 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
2018/08/09 Javascript
jQuery实现上下滚动公告栏详细代码
2018/11/21 jQuery
微信小程序上传多图到服务器并获取返回的路径
2019/05/05 Javascript
nodejs dgram模块广播+组播的实现示例
2019/11/04 NodeJs
JavaScript Window浏览器对象模型原理解析
2020/05/30 Javascript
[54:29]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第二场
2018/04/09 DOTA
python3调用百度翻译API实现实时翻译
2018/08/16 Python
Python设计模式之装饰模式实例详解
2019/01/21 Python
python跳出双层for循环的解决方法
2019/06/24 Python
Python动态语言与鸭子类型详解
2019/07/01 Python
Python操作远程服务器 paramiko模块详细介绍
2019/08/07 Python
Python判断三段线能否构成三角形的代码
2020/04/12 Python
python与pycharm有何区别
2020/07/01 Python
python如何调用java类
2020/07/05 Python
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
意大利奢侈品多品牌集合店:TheDoubleF
2019/08/24 全球购物
俄罗斯设计师家具购物网站:The Furnish
2019/12/01 全球购物
大学生社会实践活动总结
2014/07/03 职场文书
三月法制宣传月活动总结
2014/07/03 职场文书
新疆民族团结演讲稿
2014/08/27 职场文书
软件研发工程师岗位职责
2014/09/30 职场文书
工厂员工辞职信范文
2015/05/12 职场文书
离婚民事起诉状
2015/08/03 职场文书
go语言使用Casbin实现角色的权限控制
2021/06/26 Golang
redis复制有可能碰到的问题汇总
2022/04/03 Redis