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

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

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

例子:

//----构造函数模式
为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. Bootstrap简易使用指南

    1.框架 1.1全局样式 使用HTML5的doctype,scaffolding.less中定义全局样式,从2开始使用normalize.css,并使用reset.less进行简化 1.2默认栅格系统 ...

  2. Note8 开机提示:secSetupWized 已停止

    情况分析: 1.要么没有双清2.要么是删除了系统内置服务 恢复后的向导 这个如果正常情况下是 弹出 选择所在地区语言/联系方式/系统设置 此情景一般出现在 刷机后/恢复默认出厂设置后. 解决办法: 刷 ...

  3. Java免费开源数据库、Java嵌入式数据库、Java内存数据库

    Java免费开源数据库.Java嵌入式数据库.Java内存数据库 http://blog.csdn.net/leiyinsu/article/details/8597680

  4. [水题]ZOJ3038 Triangle War II

    题意: 给了这样一张图 有两种状态:pushed(*)和unpushed(.)    为方便起见分别成为 开 和 关 改变一个点的开关状态 会同时改变与它相邻的点的开关状态  比如改变5,则2.3.4 ...

  5. scrollView的几个属性contentSize contentOffset contentInset

    01-  ontentSize是scrollview可以滚动的区域 比如frame = (0 ,0 ,320 ,480) contentSize = (320 ,960), 代表你的scrollvie ...

  6. Type-C设计上的防护

    Type C设计上各家芯片公司都提供了很多方案,但在防护方面很多留给了客户自己选择,这方面我可以重点聊聊,说起防护,无非就是过压过流防护. 过压防护,Type C的信号线有很多,都需要做静电防护,US ...

  7. C# zip压缩

    /**//* * Gary Zhang -- cbcye@live.com * www.cbcye.com * www.quicklearn.cn * cbcye.cnblogs.com */ usi ...

  8. vijos p1193 扫雷

      描述 相信大家都玩过扫雷的游戏.那是在一个n*n的矩阵里面有一些雷,要你根据一些信息找出雷来.万圣节到了,“余”任过流行起了一种简单的扫雷游戏,这个游戏规则和扫雷一样,如果某个格子没有雷,那么它里 ...

  9. 【转】VC中对文件的读写

    原文网址:http://www.cnblogs.com/LJWJL/archive/2012/10/06/2712466.html 注意: 1.由于C是缓冲写 所以要在关闭或刷新后才能看到文件内容 2 ...

  10. [WebKit]浏览器的加载与页面性能优化

    非常棒.非常系统的一份资料,值得阅读! 原文来自百度泛用户体验. 作者:nwind 本文将探讨浏览器渲染的loading过程,主要有2个目的: 了解浏览器在loading过程中的实现细节,具体都做了什 ...