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的树控件实现代码(asp.net+json)
Jul 11 Javascript
jQuery中的jQuery()方法用法分析
Dec 27 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
Mar 28 Javascript
跟我学习javascript创建对象(类)的8种方法
Nov 20 Javascript
Vue 短信验证码组件开发详解
Feb 14 Javascript
js实现一个简单的数字时钟效果
Mar 29 Javascript
jquery实现简单实用的轮播器
May 23 jQuery
JS实现获取毫秒值及转换成年月日时分秒的方法
Aug 15 Javascript
关于微信公众号开发无法支付的问题解决
Dec 28 Javascript
vue2.0实现列表数据增加和删除
Jun 17 Javascript
uin-app+mockjs实现本地数据模拟
Aug 26 Javascript
vue如何在data中引入图片的正确路径
Jun 05 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 和 XML: 使用expat函数(二)
2006/10/09 PHP
php设计模式 Factory(工厂模式)
2011/06/26 PHP
PHP获取文件的MD5值并判断是否被修改的例子
2014/06/19 PHP
重新认识php array_merge函数
2014/08/31 PHP
PHP面向对象编程之深入理解方法重载与方法覆盖(多态)
2015/12/24 PHP
PHP各种异常和错误的拦截方法及发生致命错误时进行报警
2016/01/19 PHP
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
2013/03/25 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
2013/12/12 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
2014/01/26 Javascript
js中文逗号转英文实现
2014/02/11 Javascript
js 事件截取enter按键页面提交事件示例代码
2014/03/04 Javascript
javascript(js)的小数点乘法除法问题详解
2014/03/07 Javascript
jQuery 处理页面的事件详解
2015/01/20 Javascript
JavaScript判断用户是否对表单进行了修改的方法
2015/03/18 Javascript
使用canvas实现仿新浪微博头像截取上传功能
2015/09/02 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
2016/10/25 Javascript
前端js弹出框组件使用方法
2020/08/24 Javascript
初识 Vue.js 中的 *.Vue文件
2017/11/22 Javascript
vue项目打包后请求地址错误/打包后跨域操作
2020/11/04 Javascript
Python图像处理之识别图像中的文字(实例讲解)
2018/05/10 Python
python爬虫的一个常见简单js反爬详解
2019/07/09 Python
python解析xml文件方式(解析、更新、写入)
2020/03/05 Python
详解Python中的文件操作
2021/01/14 Python
CSS3教程(9):设置RGB颜色
2009/04/02 HTML / CSS
香港万宁官方海外旗舰店:香港健与美连锁店
2018/09/27 全球购物
婴儿鞋,独特的婴儿服装和配件:Zutano
2018/11/03 全球购物
建筑工程专业毕业生自荐信
2013/10/19 职场文书
诉讼授权委托书
2014/10/15 职场文书
学校国庆节活动总结
2015/03/23 职场文书
公司员工违纪检讨书
2015/05/05 职场文书
社区活动总结范文
2015/05/07 职场文书
高中同学会致辞
2015/08/01 职场文书
解决golang结构体tag编译错误的问题
2021/05/02 Golang
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python
使用 DataAnt 监控 Apache APISIX的原理解析
2022/07/07 Servers