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

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

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

例子:

//----构造函数模式
为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. php调用whois接口域名查询

    由两部分组成,一个index.php文件,一个whois的接口文件: <html> <head> <title>域名到期查询</title> <s ...

  2. Windows 2008 故障转移群集介绍

    转载:http://dufei.blog.51cto.com/382644/902026 今天有客户问起Windows 群集的相关内容,毕竟Windows Server2008所支持的群集技术和Win ...

  3. 转:Linux Shell编程入门

    http://www.cnblogs.com/suyang/archive/2008/05/18/1201990.html 从程序员的角度来看, Shell本身是一种用C语言编写的程序,从用户的角度来 ...

  4. 安装edX DevStack

    概述 edX Developer Stack 就是通常我们所说的Devstack,是为本地开发所设计的一个Vagrant实例. Devstack: 和产品(edx Product Stack)对系统的 ...

  5. [jobdu]孩子们的游戏(圆圈中最后剩下的数)

    这道题就是典型的约瑟夫环问题.http://blog.csdn.net/wuzhekai1985/article/details/6628491 一开始想了一下用数组来做,就是模拟方法,同时记录一下是 ...

  6. 自编的CHtmlView浏览器,怎么截获超连接,不让新窗口在IE中打开

    blog <自编的CHtmlView浏览器,怎么截获超连接,不让新窗口在IE中打开>    http://bbs.csdn.net/topics/10299197    http://so ...

  7. Ember.js demo5

    <!DOCTYPE html> <html> <head> <meta name="description" content=" ...

  8. xcode5编译过的xib 如何在xcode4.6下打开

    IOS7一出来,对应的xcode版本变成了5了,这次xcode升级比较大,特别是在源代码编译方面,苹果下足了功夫,编译时间不到原来的一半,忽然强烈觉得android在这方面需要加强啊: 其他不多说,X ...

  9. java类转化为json对象

    方式一:使用jar包,直接转化成json格式,再使用outwrite写到jsp中 先说说要使用到的包commons-beanutils.jar.commons-collections.jar.comm ...

  10. apache 实用配置

    1.反向代理 反向代理是指想访问目标机器,但无法直接访问,此时,可以通过与目标机器相同网络段的机器做桥接,通过访问桥接机器,访问目标机器,称为反向代理. vi httpd.conf 将代理配置开放: ...