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 日期计算算法
Sep 11 Javascript
Jquery cookie操作代码
Mar 14 Javascript
无闪烁更新网页内容JS实现
Dec 19 Javascript
对new functionName()定义一个函数的理解
May 22 Javascript
jquery移动点击的项目到列表最顶端的方法
Jun 24 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
May 12 Javascript
JavaScript必知必会(五) eval 的使用
Jun 08 Javascript
HTML Table 空白单元格补全的简单实现
Oct 13 Javascript
第一次记录Bootstrap table学习笔记(1)
May 18 Javascript
微信小程序日历组件calendar详解及实例
Jun 08 Javascript
详解Vue文档中几个易忽视部分的剖析
Mar 24 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
Feb 12 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
新浪SAE云平台下使用codeigniter的数据库配置
2014/06/12 PHP
PHP图片库imagemagick安装方法
2014/09/23 PHP
php生成年月日下载列表的方法
2015/04/24 PHP
php处理复杂xml数据示例
2016/07/11 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
解决PHPstudy Apache无法启动的问题【亲测有效】
2020/10/30 PHP
jscript之List Excel Color Values
2007/06/13 Javascript
基于jQuery的Spin Button自定义文本框数值自增或自减
2010/07/17 Javascript
jquery 图片轮换效果
2010/07/29 Javascript
json2.js的初步学习与了解
2011/10/06 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
2014/04/10 Javascript
JavaScript中三种常见的排序方法
2017/02/24 Javascript
在vue中高德地图引入和轨迹的绘制的实现
2019/10/11 Javascript
uni-app实现点赞评论功能
2019/11/25 Javascript
5个你不知道的JavaScript字符串处理库(小结)
2020/06/01 Javascript
在Python的Django框架中使用通用视图的方法
2015/07/21 Python
python简单实现操作Mysql数据库
2018/01/29 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
python except异常处理之后不退出,解决异常继续执行的实现
2020/04/25 Python
Django 解决上传文件时,request.FILES为空的问题
2020/05/20 Python
Python如何使用ElementTree解析xml
2020/10/12 Python
HTML5中判断横屏竖屏的方法(移动端)
2016/08/04 HTML / CSS
Canvas多边形绘制的实现方法
2019/08/05 HTML / CSS
Flesh Beauty官网:露华浓集团旗下彩妆品牌
2021/02/15 全球购物
应届生船舶驾驶求职信
2013/10/19 职场文书
班级旅游计划书
2014/05/03 职场文书
商务经理岗位职责
2014/08/03 职场文书
领导批评与自我批评范文
2014/10/16 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
公司奖励通知
2015/04/21 职场文书
民事诉讼代理词
2015/05/25 职场文书
党支部鉴定意见
2015/06/02 职场文书
告诉你创业计划书的8个实用技巧
2019/07/12 职场文书
CSS 实现多彩、智能的阴影效果
2021/05/12 HTML / CSS
Nginx部署vue项目和配置代理的问题解析
2021/08/04 Servers
ajax请求前端跨域问题原因及解决方案
2021/10/16 Javascript