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解密入门 最终变量劫持
Jun 25 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
Dec 27 Javascript
node.js中的querystring.parse方法使用说明
Dec 10 Javascript
Jquery的基本对象转换和文档加载用法实例
Feb 25 Javascript
JS实现太极旋转思路分析
Dec 09 Javascript
借助node实战JSONP跨域实例
Mar 30 Javascript
js如何获取网页所有图片
May 12 Javascript
Vue.js框架路由使用方法实例详解
Aug 25 Javascript
js实现随机点名程序
Sep 17 Javascript
微信小程序加载机制及运行机制图解
Nov 27 Javascript
Vue实现浏览器打印功能的代码
Apr 17 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
Jul 21 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 采集书并合成txt格式的实现代码
2009/03/01 PHP
php过滤html中的其他网站链接的方法(域名白名单功能)
2014/04/24 PHP
Codeigniter实现多文件上传并创建多个缩略图
2014/06/12 PHP
php获取apk包信息的方法
2014/08/15 PHP
PHP通过引用传递参数用法分析
2016/12/01 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
Yii框架学习笔记之应用组件操作示例
2019/11/13 PHP
javascript 表格排序和表头浮动效果(扩展SortTable)
2009/04/07 Javascript
IE6下出现JavaScript未结束的字符串常量错误的解决方法
2010/11/21 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
2011/12/08 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
2015/03/13 Javascript
jQuery Validate验证框架经典大全
2015/09/23 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
2016/07/07 Javascript
微信小程序 地图(map)实例详解
2016/11/16 Javascript
最常见的左侧分类菜单栏jQuery实现代码
2016/11/28 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
2017/02/08 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
JS实现数组去重方法总结(六种方法)
2017/07/14 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
2018/04/18 jQuery
vuex的module模块用法示例
2018/11/12 Javascript
layui 弹出层值回传解决方式
2019/11/14 Javascript
python抓取网页中图片并保存到本地
2015/12/01 Python
用python写扫雷游戏实例代码分享
2018/05/27 Python
Django中反向生成models.py的实例讲解
2018/05/30 Python
Python日期格式和字符串格式相互转换的方法
2020/02/18 Python
Python reversed函数及使用方法解析
2020/03/17 Python
python如何判断IP地址合法性
2020/04/05 Python
Jupyter 无法下载文件夹如何实现曲线救国
2020/04/22 Python
Python获取浏览器窗口句柄过程解析
2020/07/25 Python
世界最大的私人旅行指南出版商:孤独星球
2016/08/23 全球购物
2014年安全保卫工作总结
2014/11/13 职场文书
小浪底导游词
2015/02/12 职场文书
幼儿教师辞职信范文
2015/03/02 职场文书
卫生院艾滋病宣传活动总结
2015/05/09 职场文书
Python字典和列表性能之间的比较
2021/06/07 Python
适合后台管理系统开发的12个前端框架(小结)
2021/06/29 Javascript