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 select(列表)的操作(取值/赋值)
Mar 16 Javascript
ext中store.load跟store.reload的区别示例介绍
Jun 17 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
Aug 25 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
Apr 26 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
May 31 Javascript
vue2 中如何实现动态表单增删改查实例
Jun 09 Javascript
解决vue中post方式提交数据后台无法接收的问题
Aug 11 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
Jan 23 Javascript
微信小程序实现日期格式化和倒计时
Nov 01 Javascript
js实现简单的日历显示效果函数示例
Nov 25 Javascript
Vue 一键清空表单的实现方法
Feb 07 Javascript
vue-router定义元信息meta操作
Dec 07 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加密解密类代码
2011/11/27 PHP
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
2015/02/28 Javascript
javascript验证身份证号
2015/03/03 Javascript
JavaScript DOM元素尺寸和位置
2015/04/13 Javascript
javascript中in运算符用法分析
2015/04/28 Javascript
js实现瀑布流的三种方式比较
2020/06/28 Javascript
jQuery xml字符串的解析、读取及查找方法
2016/03/01 Javascript
简单讲解AngularJS的Routing路由的定义与使用
2016/03/05 Javascript
好好了解一下Cookie(强烈推荐)
2016/06/14 Javascript
Javascript删除指定元素节点的方法
2016/06/21 Javascript
JS实现的验证身份证及获取地区功能示例
2017/01/16 Javascript
js canvas实现擦除效果示例代码
2017/04/26 Javascript
微信小程序 支付后台java实现实例
2017/05/09 Javascript
Vue.js中的图片引用路径的方式
2017/07/28 Javascript
JS switch判断 三目运算 while 及 属性操作代码
2017/09/03 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
2018/06/19 Javascript
解决vue v-for 遍历循环时key值报错的问题
2018/09/06 Javascript
Javascript 之封装(Package)
2018/09/14 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
Vue的H5页面唤起支付宝支付功能
2019/04/18 Javascript
nodejs使用node-xlsx生成excel的方法示例
2019/08/22 NodeJs
KnockoutJS数组比较算法实例详解
2019/11/25 Javascript
[40:53]完美世界DOTA2联赛PWL S3 Magma vs DLG 第二场 12.18
2020/12/20 DOTA
编写Python脚本来获取Google搜索结果的示例
2015/05/04 Python
Python中操作符重载用法分析
2016/04/29 Python
利用Tkinter和matplotlib两种方式画饼状图的实例
2017/11/06 Python
Python3解释器知识点总结
2019/02/19 Python
Django ORM 自定义 char 类型字段解析
2019/08/09 Python
快速解决docker-py api版本不兼容的问题
2019/08/30 Python
HTML5开发动态音频图的实现
2020/07/02 HTML / CSS
国外软件测试工程师面试题
2016/12/09 面试题
自我评价优秀范文分享
2013/11/30 职场文书
大二学年个人总结
2015/03/03 职场文书
公司联欢会主持词
2015/07/04 职场文书
Windows安装Anaconda3的方法及使用过程详解
2021/06/11 Python
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记