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 当前日期加(天、周、月、年)
Aug 09 Javascript
再次分享18个非常棒的jQuery表格插件
Apr 10 Javascript
Javascript中对象继承的实现小例
May 12 Javascript
jquery中animate的stop()方法作用实例分析
Jan 30 Javascript
深入分析JSON编码格式提交表单数据
Jun 25 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
Feb 27 Javascript
第一次接触神奇的Bootstrap基础排版
Jul 26 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
Sep 13 Javascript
jQuery中的deferred对象和extend方法详解
May 08 jQuery
微信小程序自定义toast的实现代码
Nov 16 Javascript
微信小程序实现手势滑动效果
Aug 26 Javascript
js实现鼠标点击页面弹出自定义文字效果
Dec 24 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遍历数组的几种方法
2012/03/22 PHP
深入密码加salt原理的分析
2013/06/06 PHP
解析PHP中empty is_null和isset的测试
2013/06/29 PHP
smarty获得当前url的方法分享
2014/02/14 PHP
PHP中的socket_read和socket_recv区别详解
2015/02/09 PHP
老司机传授Ubuntu下Apache+PHP+MySQL环境搭建攻略
2016/03/20 PHP
php 提交表单 关闭layer弹窗iframe的实例讲解
2018/08/20 PHP
JS对URL字符串进行编码/解码分析
2008/10/25 Javascript
Javascript 面向对象编程(coolshell)
2012/03/18 Javascript
JQueryEasyUI Layout布局框架的使用
2013/04/08 Javascript
js 删除数组的几种方法小结
2014/02/21 Javascript
moment.js轻松实现获取当前日期是当年的第几周
2015/02/05 Javascript
jQuery验证元素是否为空的两种常用方法
2015/03/17 Javascript
JQuery实现鼠标移动图片显示描述层的方法
2015/06/25 Javascript
jquery自定义插件——window的实现【示例代码】
2016/05/06 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
2017/06/26 jQuery
微信浏览器禁止页面下拉查看网址实例详解
2017/06/28 Javascript
深入理解vue-router之keep-alive
2017/08/31 Javascript
Vue实现滑动拼图验证码功能
2019/09/15 Javascript
JavaScript正则表达式验证登录实例
2020/03/18 Javascript
小程序富文本提取图片可放大缩小
2020/05/26 Javascript
JS判断数组是否包含某元素实现方法汇总
2020/06/24 Javascript
[02:21]DOTA2英雄基础教程 蝙蝠骑士
2013/12/16 DOTA
web.py在SAE中的Session问题解决方法(使用mysql存储)
2015/06/24 Python
Python实现PS滤镜特效之扇形变换效果示例
2018/01/26 Python
python使用Pycharm创建一个Django项目
2018/03/05 Python
利用Python将数值型特征进行离散化操作的方法
2018/11/06 Python
Python-while 计算100以内奇数和的方法
2019/06/11 Python
python+opencv实现摄像头调用的方法
2019/06/22 Python
物业电工岗位职责
2013/11/20 职场文书
机关作风建设剖析材料
2014/10/11 职场文书
导游词范文
2015/02/13 职场文书
创先争优个人总结
2015/03/04 职场文书
2016五四青年节活动总结范文
2016/04/06 职场文书
文书工作总结(范文)
2019/07/11 职场文书
详解Apache SkyWalking 告警配置指南
2021/04/22 Servers