构造函数方法很好用,但是存在一个浪费内存

通过原型法分配的函数是所有对象共享的.
通过原型法分配的属性是独立.-----如果你不修改属性,他们是共享

如果我们希望所有的对象使用同一一个函数,最好使用原型法添加函数,这样比较节省内存.

例子:

//----构造函数模式
为Cat对象添加一个不变的属性"type"(种类),再添加一个方法eat(吃老鼠)。那么,原型对象Cat就变成了下面这样:

  1. <script>
  2. function Cat(name, color) {
  3. this.name = name;
  4. this.color = color;
  5. this.type = "猫科动物";
  6. this.eat = function () {
  7. alert("吃老鼠");
  8. };
  9. }
  10. //生成实例:
  11. var cat1 = new Cat("大毛", "黄色");
  12. var cat2 = new Cat("二毛", "黑色");
  13. alert(cat1.type);         // 猫科动物
  14. cat1.eat();       // 吃老鼠
  15. alert(cat1.eat == cat2.eat); //false
  16. </script>

那就是对于每一个实例对象,type属性和eat()方法都是一模一样的内容,每一次生成一个实例,都必须为重复的内容,多占用一些内存。这样既不环保,也缺乏效率。
  

//----Prototype模式 
Javascript规定,每一个构造函数都有一个prototype属性,指向另一个对象。这个对象的所有属性和方法,都会被构造函数的实例继承。
这意味着,我们可以把那些不变的属性和方法,直接定义在prototype对象上。

  1. <script>
  2. function Cat(name, color) {
  3. this.name = name;
  4. this.color = color;
  5. }
  6. Cat.prototype.type = "猫科动物";
  7. Cat.prototype.eat = function () {
  8. alert("吃老鼠")
  9. };
  10. //生成实例。
  11. var cat1 = new Cat("大毛", "黄色");
  12. var cat2 = new Cat("二毛", "黑色");
  13. alert(cat1.type); // 猫科动物
  14. cat1.eat();// 吃老鼠
  15. alert(cat1.eat == cat2.eat);//trueF
  16. </script>

这时所有实例的type属性和eat()方法,其实都是一个内存地址,指向prototype对象,因此就提高了运行效率。

JS----构造函数与原型prototype 区别的更多相关文章

  1. 关于构造函数和原型prototype对象的理解

    构造函数     1.什么是构造函数 构造函数,主要用于对象创建的初始化,和new运算符一起用于创建对象,一个类可以有多个构造函数,因为函数名相同,所以只能通过参数的个数和类型不同进行区分,即构造函数 ...

  2. js 构造函数 & 静态方法 & 原型 & 实例方法

    js 构造函数 & 静态方法 & 原型 & 实例方法 ES5 "use strict"; /** * * @author xgqfrms * @licens ...

  3. 深入研究js构造函数和原型

    很快就要从新浪离职了,最近心情比较轻松,抽点空整理一下构造函数和原型的机理. 我们都知道,在经典设计模式中我们最常用的就是工厂模式.构造函数模式.原型模式这几种,听起来‘模式’好像很高大上的样子,实际 ...

  4. JS构造函数、原型对象、隐含参数this

    This 解析器再调用函数每次都会向函数内部传递一个隐含的参数this,this指向的是一个对象(函数执行的上下文对象) 1.以函数形式调用时,this永远是window. 2.以方法形式调用时,th ...

  5. 完整原型链详细图解之JS构造函数、原型 原型链、实例化对象

    一.首先说一下什么是构造函数: 构造函数:用来在创建对象时初始化对象.特点:构造函数名一般为大写字母开头:与new运算符一起使用来实例化对象. 举例: function Person(){} //Pe ...

  6. js 中的原型prototype

    每次创建新函数,就会根据规则为该函数创建一个 prototype 属性,该属性是一个指向函数原型对象的指针.并且原型对象都默认拥有一个 constructor 属性,该属性是一个指向那个新建函数的指针 ...

  7. 笔记: js构造函数与原型

    目录 构造函数与原型介绍 涉及三种引用的操作 有关原型及原型链的一些相关方法总结 @ 构造函数与原型介绍 1.函数与函数的原型对象(prototype object): 在JavaScript中,创建 ...

  8. JS 中的原型 -- prototype、__proto__ 以及原型链

    原文: 1.深入理解javascript原型和闭包——prototype原型 2.三张图搞懂JavaScript的原型对象与原型链 打开浏览器控制台,任意定义一个对象,打印出来后,会发现有最后一定有一 ...

  9. js中的原型prototype

    var arr1 = new Array(12,34,98,43,38,79,56,1); arr1.sum=function (){ var result = 0; for(var i=0; i&l ...

随机推荐

  1. CSS 背景颜色

    颜色背景 CSS中背景颜色由background-color决定,这里的背景颜色会渲染padding和content,不会渲染border和margin部分. 在css3中可以通过background ...

  2. this、call和apply

    this call apply this 和其他语言不同,JavaScript的this总是指向一个对象,而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的,而非函数被声明时的环境. this的 ...

  3. Hadoop集群(第10期)_MySQL关系数据库

    1.MySQL安装 MySQL下载地址:http://www.mysql.com/downloads/ 1.1 Windows平台 1)准备软件 MySQL版本:mysql-5.5.21-win32. ...

  4. [转载]MongoDB学习 (五):查询操作符(Query Operators).1st

    本文地址:http://www.cnblogs.com/egger/archive/2013/05/04/3059374.html   欢迎转载 ,请保留此链接๑•́ ₃•̀๑! 查询操作符(Quer ...

  5. codeforces 392A Blocked Points

    我的方式是用暴力的方法找到每一行每一列的边界点: 但是有大神直接用一个公式解决了:floor(n*sqrt(2))*4: 想了很久还是不理解,求各路大神指点! #include<iostream ...

  6. POJ - 2711 Leapin' Lizards

    题目大意: 在一个网格地图中有一些高度不同的石柱,一些石柱上站着一些蜥蜴,你的任务是让尽量多的蜥蜴逃到边界外. 每行每列中相邻石柱的距离为1,蜥蜴的跳跃距离是d,即蜥蜴可以跳到平面距离不超过d的任何一 ...

  7. HTTP Header 入门详解

    什么是HTTP Headers HTTP是"Hypertext Transfer Protocol"的所写,整个www都在使用这种协定,几乎你在流览器里看到的大部分内容都是通过ht ...

  8. wzplayer for android V1.5.3 (新增YUV文件播放)

    wzplayer for android V1.5.3 新增功能 1.使用gl es2 播放 yuv 文件. 联系方式:weinyzhou86@gmail.com QQ:514540005 版权所有, ...

  9. JAVA - Blowfish加密出现java.security.InvalidKeyException: Illegal key size 解决方案

    最近用java进行一个blowfish的加密算法,但是在我们的eclipse上报出Illegal key size的错误.google后发现原因是:ymmetricDS加密symmetric.prop ...

  10. 屯题50AC纪念

    从2.1起开始屯题,一直弄到现在才完成了一发50题的目标,实在太弱 (当然之间事比较多,还是挺不容易的) 不过总算是完成了一个小的目标了 接下来两周要进行小高考最后冲刺了,所以我大概不会再怎么刷题了 ...