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 相关文章推荐
让IE6支持min-width和max-width的方法
Jun 25 Javascript
JavaScript中实现Map的示例代码
Sep 09 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
Oct 28 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
Sep 17 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
Oct 30 Javascript
微信小程序 setData使用方法及常用错误解决办法
May 11 Javascript
js异步编程小技巧详解
Aug 14 Javascript
微信小程序修改swiper默认指示器样式的实例代码
Jul 18 Javascript
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
js module大战
Apr 19 Javascript
vue里的data要用return返回的原因浅析
May 28 Javascript
es6中Promise 对象基本功能与用法实例分析
Feb 23 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
将CMYK颜色值和RGB颜色相互转换的PHP代码
2014/07/28 PHP
Thinkphp关闭缓存的方法
2015/06/26 PHP
基于Codeigniter框架实现的student信息系统站点动态发布功能详解
2017/03/23 PHP
6个常见的 PHP 安全性攻击实例和阻止方法
2020/12/16 PHP
另类调用flash无须激活的方法
2006/12/27 Javascript
JQuery 控制内容长度超出规定长度显示省略号
2014/05/23 Javascript
用js闭包的方法实现多点标注冒泡示例
2014/05/29 Javascript
12行javascript代码绘制一个八卦图
2015/04/02 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
2015/10/26 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
详解js中call与apply关键字的作用
2016/11/21 Javascript
js原生之焦点图转换加定时器实例
2016/12/12 Javascript
angular-ngSanitize模块-$sanitize服务详解
2017/06/13 Javascript
详解vue 实例方法和数据
2017/10/23 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
2018/03/25 jQuery
jQuery中将json数据显示到页面表格的方法
2018/05/27 jQuery
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
2018/08/20 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
2018/09/07 Javascript
原生JS实现的放大镜特效示例【测试可用】
2018/12/08 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
2019/07/30 Javascript
django 自定义用户user模型的三种方法
2014/11/18 Python
Python中标准模块importlib详解
2017/04/16 Python
Python安装lz4-0.10.1遇到的坑
2018/05/20 Python
pandas通过loc生成新的列方法
2018/11/28 Python
对python中矩阵相加函数sum()的使用详解
2019/01/28 Python
使用python实现离散时间傅里叶变换的方法
2019/09/02 Python
使用Pandas的Series方法绘制图像教程
2019/12/04 Python
HTML5 canvas画图并保存成图片的jcanvas插件
2014/01/17 HTML / CSS
电脑租赁公司创业计划书
2014/01/08 职场文书
工程催款通知书
2015/04/17 职场文书
2015秋季开学演讲稿范文
2015/07/16 职场文书
团结友爱主题班会
2015/08/13 职场文书
新店开业策划方案怎么书写?
2019/07/05 职场文书
成人成长感言如何写?
2019/08/16 职场文书
vue-cli4.5.x快速搭建项目
2021/05/30 Vue.js
Python的三个重要函数详解
2022/01/18 Python