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 不间断的图片滚动并可点击
Jan 15 Javascript
基于jQuery实现的当离开页面时出现提示的实现代码
Jun 27 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
Feb 03 Javascript
纯javascript实现简单下拉刷新功能
Mar 13 Javascript
js实现简单div拖拽功能实例
May 12 Javascript
js实现浏览器倒计时跳转页面效果
Aug 12 Javascript
canvas实现探照灯效果
Feb 07 Javascript
微信小程序调用PHP后台接口 解析纯html文本
Jun 13 Javascript
详解vue express启动数据服务
Jul 05 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
Jul 28 Javascript
微信小程序事件 bindtap bindinput代码实例
Aug 26 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
Feb 13 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统计目录大小的自定义函数分享
2014/11/18 PHP
自己写的php curl库实现整站克隆功能
2015/02/12 PHP
php通过baihui网API实现读取word文档并展示
2015/06/22 PHP
php获取'/'传参的值简单方法
2017/07/13 PHP
PHP xpath()函数讲解
2019/02/11 PHP
广告代码静态化js通用函数
2007/05/09 Javascript
javascript css float属性的特殊写法
2008/11/13 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
2010/12/02 Javascript
JQuery将文本转化成JSON对象需要注意的问题
2011/05/09 Javascript
JavaScript 基础篇(一)
2012/03/30 Javascript
JS去除数组重复值的五种不同方法
2013/09/06 Javascript
javascript常用对话框小集
2013/09/13 Javascript
让table变成exls的示例代码
2014/03/24 Javascript
js获取及判断键盘按键的方法
2015/12/01 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
如何处理JSON中的特殊字符
2016/11/30 Javascript
js自定义瀑布流布局插件
2017/05/16 Javascript
vue-cli脚手架引入图片的几种方法总结
2018/03/13 Javascript
深入理解JS的事件绑定、事件流模型
2018/05/13 Javascript
JS面向对象之单选框实现
2020/01/17 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
2020/09/04 Javascript
详解Typescript里的This的使用方法
2021/01/08 Javascript
Python3基础之基本数据类型概述
2014/08/13 Python
Pycharm学习教程(5) Python快捷键相关设置
2017/05/03 Python
Python基于win32ui模块创建弹出式菜单示例
2018/05/09 Python
Python3+PyInstall+Sciter解决报错缺少dll、html等文件问题
2019/07/15 Python
Python传递参数的多种方式(小结)
2019/09/18 Python
使用python批量转换文件编码为UTF-8的实现
2020/04/03 Python
英国邮购活的植物主要供应商:Gardening Direct
2019/01/28 全球购物
应届毕业生的自我鉴定
2013/11/13 职场文书
拓展培训心得体会
2014/01/04 职场文书
会计大学生职业生涯规划书范文
2014/01/13 职场文书
团代会主持词
2014/04/02 职场文书
关于颐和园的导游词
2015/01/30 职场文书
OpenCV项目实践之停车场车位实时检测
2022/04/11 Python
vue el-table实现递归嵌套的示例代码
2022/08/14 Vue.js