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

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

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

例子:

//----构造函数模式
为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. js复制黏贴

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. xml &amp; 符号表示方法,xml转义字符

    HTML,xml 中<, >,&等有特别含义,(前两个字符用于链接签,&用于转义),不能直接使用.使用这三个字符时,应使用他们的转义序列,如下所示: & 或 &am ...

  3. StreamCQL

    StreamCQLhttps://github.com/HuaweiBigData/StreamCQL http://blog.csdn.net/viewcode/article/details/90 ...

  4. Cassandra命令行CLI的基本使用

    启动cassandra-cli服务之后,可以进行CQL的使用. 1. 创建keyspace 可以理解成关系数据库的database [default@testkeyspace] create keys ...

  5. TSS 内核栈 用户栈的关系

    http://blog.sina.com.cn/s/blog_673ef8130100qaje.html 该博客不错,有不少有用的信息 中断程序的一开始我们执行一个PUSHALL,把这些积存器保存在核 ...

  6. 浅谈HTTP中Get与Post的区别/HTTP协议与HTML表单(再谈GET与POST的区别)

    HTTP协议与HTML表单(再谈GET与POST的区别) GET方式在request-line中传送数据:POST方式在request-line及request-body中均可以传送数据. http: ...

  7. RecyclerView一个奇怪的npe异常

    java.lang.NullPointerException at android.support.v7.widget.RecyclerView.computeVerticalScrollOffset ...

  8. 使用java远程调试技术监控代码运行

    JAPA介绍 JPDA(Java Platform Debugger Architecture)是 Java 平台调试体系结构的缩写,通过 JPDA 提供的 API,开发人员可以方便灵活的搭建 Jav ...

  9. BZOJ_1096_[ZJOI2007]_仓库建设_(斜率优化动态规划+单调队列+特殊的前缀和技巧)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1096 有\(n\)个工厂,给出第\(i\)个工厂的到1号工厂的距离\(x[i]\),货物数量\ ...

  10. BZOJ_1008_[HNOI2008]_越狱_(简单组合数学+快速幂)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1008 监狱有连续编号为1...N的N个房间,每个房间关押一个犯人,有M种宗教,每个犯人可能信仰 ...