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 相关文章推荐
jQuery学习笔记之jQuery的动画
Dec 22 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
Mar 19 Javascript
JavaScript中instanceof运算符的用法总结
Nov 19 Javascript
json中换行符的处理方法示例介绍
Jun 10 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
Nov 28 Javascript
浅谈js的setInterval事件
Dec 05 Javascript
jQuery中trigger()方法用法实例
Jan 19 Javascript
JavaScript中实现继承的三种方式和实例
Jan 29 Javascript
js弹出对话框方式小结
Nov 17 Javascript
vue+swiper实现组件化开发的实例代码
Oct 26 Javascript
js实现计算器功能
Aug 10 Javascript
vue 递归组件的简单使用示例
Jan 14 Vue.js
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实现批量查询清除一句话后门的代码
2008/01/20 PHP
php学习之 数组声明
2011/06/09 PHP
PHP字符串函数系列之nl2br(),在字符串中的每个新行 (\n) 之前插入 HTML 换行符br
2011/11/10 PHP
php 修改上传文件大小限制实例详解
2016/10/23 PHP
Yii2 如何在modules中添加验证码的方法
2017/06/19 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
PHP实现将base64编码字符串转换成图片示例
2018/06/22 PHP
Smarty模板配置实例简析
2019/07/20 PHP
PHP goto语句用法实例
2019/08/06 PHP
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
2007/12/23 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
javascript简单性能问题及学习笔记
2014/02/04 Javascript
JavaScript实现点击按钮字体放大、缩小
2016/02/29 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
2016/05/05 Javascript
创建一个类Person的简单实例
2016/05/17 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
2016/08/06 Javascript
利用Jquery队列实现根据输入数量显示的动画
2016/09/01 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
2016/11/29 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
2017/03/09 Javascript
全面了解JavaScript的作用域链
2019/04/03 Javascript
带你使用webpack快速构建web项目的方法
2020/11/12 Javascript
在Python的Flask框架中构建Web表单的教程
2016/06/04 Python
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
Django基础知识与基本应用入门教程
2018/07/20 Python
浅析python 定时拆分备份 nginx 日志的方法
2020/04/27 Python
Python+OpenCV图像处理——实现轮廓发现
2020/10/23 Python
HTML5 新表单类型示例代码
2018/03/20 HTML / CSS
HTML5声音录制/播放功能的实现代码
2018/05/03 HTML / CSS
阿里巴巴英国:Alibaba英国
2019/12/11 全球购物
售前工程师职业生涯规划
2014/03/02 职场文书
爱岗敬业演讲稿
2014/05/05 职场文书
生活部的活动方案
2014/08/19 职场文书
小学生清明节演讲稿
2014/09/05 职场文书
2014年女职工工作总结
2014/11/27 职场文书
工程部主管岗位职责
2015/02/12 职场文书
简单实现一个手持弹幕功能+文字抖动特效
2021/03/31 HTML / CSS