• javascript是动态语言，可以在运行时给对象添加属性，也可以给对象删除(delete)属性

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. /*
  5. //01.定义对象第一种方式
  6. var object =new Object();
  7. alert(object.username);
  8. //01.1增加属性username
  9. object["username"]="liujianglong";
  10. //object.username="liujl";
  11. alert(object.username);
  12.  
  13. //01.2删除属性username
  14. delete object.username;//username属性已经从object对象中删除
  15. alert(object.username);
  16. */
  17.  
  18. //02.定义对象第二种方式--在javascript中定义对象的一种最常见的方式
  19. var object={name:"zhangsan",age:10,sex:"fale"};
  20. alert(object.name);
  21. alert(object.age);
  22. alert(object.sex);
  23.  
  24. </script>
  25. </head>
  26. <body>
  27. </body>
  28. </html>

属性名:方法名  也是可以的.因为函数本身就是个对象

 

  • javascript 数组排序

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script type="text/javascript">
  5. var array=[1,3,25];
  6.  
  7. /////////////////////////////////
  8. var compare=function(num1,num2){
  9.     var temp1=parseInt(num1);
  10.     var temp2=parseInt(num2);
  11.     if(temp1<temp2){
  12.         return -1;
  13.     }else if(temp1==temp2){
  14.         return 0;
  15.     }else{
  16.         return 1;
  17.     }
  18. }
  19. //array.sort(compare);//01.函数名是对象引用
  20. ////////////////////////////////
  21.  
  22. //02.匿名函数方式//////////////////
  23. array.sort(function c(num1,num2){
  24. var temp1=parseInt(num1);
  25.     var temp2=parseInt(num2);
  26.     if(temp1<temp2){
  27.         return -1;
  28.     }else if(temp1==temp2){
  29.         return 0;
  30.     }else{
  31.         return 1;
  32.     }
  33.  
  34. });
  35. /////////////////////////////////
  36.  
  37. alert(array);
  38.  
  39. </script>
  40. </head>
  41. <body>
  42. </body>
  43. </html>

 

 

  • javascript中定义对象的几种方式(javascript中没有类的概念，只有对象 )

    • 第一种方式: 基于已有对象扩充其属性和方法

  1. <script type="text/javascript">
  2. //01.基于已有对象扩充其属性和方法
  3. var object=new Object();
  4. object.username="zhangsan";
  5. object.sayName=function (name){
  6.     this.username=name;
  7.     alert(this.username);
  8. }
  9. alert(object.username);
  10. object.sayName("lisi");
  11. alert(object.username);
  12. </script>

这种方法具有局限性，因为javascript不像java那样具有类的概念，写一个类，之后new就可以得到一个具有了这些属性、方法的对象了。

这时如果要拥有object2就只能把上面来的代码再写一份，这是不太好的。

 

 

    • 第二种方式: 工厂方式

           类似于java中静态的工厂方法。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script type="text/javascript">
  5. //对象工厂方法
  6. var  createObject=function(){
  7.     var object=new Object();
  8.     object.username="zhangsan";
  9.     object.password="123";
  10.     object.get=function(){
  11.         alert(this.username+" , "+object.password);
  12.     }
  13.     return object;
  14. }
  15. var obj1=createObject();
  16. var obj2=createObject();
  17.  
  18. obj1.get();
  19.  
  20. //修改对象2的密码
  21. obj2["password"]="123456";
  22. obj2.get();
  23. </script>
  24. </head>
  25. <body>
  26. </body>
  27. </html>

上面这种方式创建对象有弊端(每个对象都有一个get方法，从而浪费了内存),改进后的工厂方式( 所有对象共享一个get方法):

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script type="text/javascript">
  5. //所有对象共享的get方法
  6. var get=function(){
  7.     alert(this.username+" , "+this.password);
  8. }
  9. //对象工厂方法
  10. var createObject=function(username,password){
  11.     var object=new Object();
  12.     object.username=username;
  13.     object.password=password;
  14.     object.get=get;//注意：这里不写方法的括号
  15.     return object;
  16. }
  17.  
  18. //通过工厂方法创建对象
  19. var object1=createObject("zhangsan","123");
  20. var object2=createObject("lisi","345");
  21.  
  22. //调用get方法
  23. object1.get();
  24. object2.get();
  25. </script>
  26. </head>
  27. <body>
  28. </body>
  29. </html>

 

 

 

 

    • 第三种方式: 构造函数方式 定义对象

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script type="text/javascript">
  5.  
  6. var get=function(){
  7.     alert(this.username+" , "+this.password);
  8. }
  9.  
  10. function Person(username,password){
  11.     //在执行第一行代码前，js引擎会为我们生成一个对象
  12.     this.username=username;
  13.     this.password=password;
  14.     this.get=get;
  15.     //在此处，有一个隐藏的return语句，用于返回之前生成的对象[这点是和工厂模式不一样的地方]
  16. }
  17. var person=new Person("zhangsan","123");
  18. person.get();
  19. </script>
  20. </head>
  21. <body>
  22. </body>
  23. </html>

 

 

    • 第四种方式: 原型(Prototype)方式创建对象

      • prototype是object对象中的属性，所有person对象也可以拥有prototype这个属性。

      可以给对象的原型增加一些属性，方法。

      单纯的使用原型方式创建对象的缺点：①无法传参数,只能在对象创建后再改变它的值

                                                            ②可能会导致程序错误

      1. <!DOCTYPE html>
      2. <html>
      3. <head>
      4. <script type="text/javascript">
      5. function Person(){
      6.  
      7. }
      8. Person.prototype.username="zhangsan";
      9. Person.prototype.password="123";
      10. Person.prototype.getInfo=function(){
      11.     alert(this.username+" , "+this.password);
      12. }
      13.  
      14. var person1=new Person();
      15. var person2=new Person();
      16.  
      17. person1.username="lisi";
      18.  
      19. person1.getInfo();
      20. person2.getInfo();
      21. </script>
      22. </head>
      23. <body>
      24. </body>
      25. </html>

       

       

      1. <!DOCTYPE html>
      2. <html>
      3. <head>
      4. <script type="text/javascript">
      5. function Person(){
      6.  
      7. }
      8. Person.prototype.username=new Array();
      9. Person.prototype.password="123";
      10. Person.prototype.getInfo=function(){
      11.     alert(this.username+" , "+this.password);
      12. }
      13.  
      14. var person1=new Person();
      15. var person2=new Person();
      16.  
      17. person1.username.push("wanglaowu");
      18. person1.username.push("wanglaowu2");
      19.  
      20. person2.password="456";
      21. person1.getInfo    ();
      22. person2.getInfo();
      23. </script>
      24. </head>
      25. <body>
      26. </body>
      27. </html>

      单纯使用原型方式定义对象无法再构造函数中为属性赋初值，只能在对象生成后再去改变属性值。

       

       

       

    • 第五种方式: 使用原型+构造函数方式来定义对象----推荐使用

      • 对象之间的属性互不干扰
      • 各个对象之间共享同一个方法
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script type="text/javascript">
  5. //使用原型+构造函数方式来定义对象
  6.  
  7. function Person(){
  8.     //属性 定义在构造函数中
  9.     this.username=new Array();
  10.     this.password="123";
  11. }
  12.     //方法 定义在原型中
  13. Person.prototype.getInfo=function(){
  14.     alert(this.username+" , "+this.password);
  15. }
  16.  
  17. var p1=new Person();
  18. var p2=new Person();
  19.  
  20. p1.username.push("zhangsan");
  21. p2.username.push("lisi");
  22.  
  23. p1.getInfo();
  24. p2.getInfo();
  25. </script>
  26. </head>
  27. <body>
  28. </body>
  29. </html>

 

    • 第六种方式: 动态原型方式----推荐使用

         在构造函数中通过标志量让所有对象共享一个方法，而每个对象拥有自己的属性。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script type="text/javascript">
  5. var Person=function (username,password){
  6.     this.username=username;
  7.     this.password=password;
  8.     if(typeof Person.flag=="undefined"){
  9.         alert("invoked");
  10.         Person.prototype.getInfo=function(){
  11.             alert(this.username+" , "+this.password);
  12.         }
  13.         Person.flag=true;
  14.     }
  15. }
  16.  
  17. var p1=new Person("zhangsan","123");
  18. var p2=new Person("lisi","456");
  19.  
  20. p1.getInfo();
  21. p2.getInfo();
  22. </script>
  23. </head>
  24. <body>
  25. </body>
  26. </html>

javascript 构造函数方式定义对象的更多相关文章

  1. javascript 构造函数方式定义对象 (转载）

    javascript 构造函数方式定义对象   javascript是动态语言,可以在运行时给对象添加属性,也可以给对象删除(delete)属性 <html> <head> & ...

  2. javascript构造函数以及原型对象的理解

    以下是一个构造函数的例子 如果是实例方法,不同的实例化,它们引用的地址是不一样的,是唯一的. //定义一个构造函数 function People(name,age){ this.name=name; ...

  3. Javascript 构造函数、原型对象、实例之间的关系

    # Javascript 构造函数.原型对象.实例之间的关系 # 创建对象的方式 # 1.new object() 缺点:创建多个对象困难 var hero = new Object(); // 空对 ...

  4. 深入javascript——构造函数和原型对象

    常用的几种对象创建模式 使用new关键字创建 最基础的对象创建方式,无非就是和其他多数语言一样说的一样:没对象,你new一个呀! var gf = new Object(); gf.name = &q ...

  5. 谈谈对Javascript构造函数和原型对象的理解

    对象,是javascript中非常重要的一个梗,是否能透彻的理解它直接关系到你对整个javascript体系的基础理解,说白了,javascript就是一群对象在搅..(哔!).   常用的几种对象创 ...

  6. 深入理解javascript构造函数和原型对象

    ---恢复内容开始--- 对象,是javascript中非常重要的一个梗,是否能透彻的理解它直接关系到你对整个javascript体系的基础理解,说白了,javascript就是一群对象在搅..(哔! ...

  7. javascript构造函数及原型对象

    /** @ javascript中没有类的概念,所以基在对象创建方面与面向对象语言有所不同* @ 对象创建的常用方法及各自的局限性* @ 使用Object或对象字面量创建对象* @ 工厂模式创建对象* ...

  8. ［转］深入javascript——构造函数和原型对象

    对象,是javascript中非常重要的一个梗,是否能透彻的理解它直接关系到你对整个javascript体系的基础理解,说白了,javascript就是一群对象在搅..(哔!). 常用的几种对象创建模 ...

  9. [转]JavaScript构造函数及原型对象

    JavaScript中没有类的概念,所以其在对象创建方面与面向对象语言有所不同. JS中对象可以定义为”无序属性的集合”.其属性可以包含基本值,对象以及函数.对象实质上就是一组没有特定顺序的值,对象中 ...

随机推荐

  1. 【干货分享】Google 的设计准则，素材和资源

    在谷歌,他们说, “专注于用户,所有其它的就会水到渠成 ”.他们遵循设计原则,寻求建立让用户惊喜的用户体验.谷歌一直挑战自己,为他们的用户创造一种视觉语言,综合优秀设计的经典原则和创新.谷歌设计规范是 ...

  2. TCP/IP协议（一）

    TCP/IP是Transmission Control Protocol/Internet Protocol的简写,中译名为传输控制协议/因特网互联协议,又名网络通讯协议,是Internet最基本的协 ...

  3. Python3.x中bytes类型和str类型深入分析

    Python 3最重要的新特性之一是对字符串和二进制数据流做了明确的区分.文本总是Unicode,由str类型表示,二进制数据则由bytes类型表示.Python 3不会以任意隐式的方式混用str和b ...

  4. 优化C/C++代码的小技巧

    说明: 无意看到一篇小短文,猜测作者应该是一个图形学领域的程序员或专家,介绍了在光线(射线)追踪程序中是如何优化C/C++代码的.倒也有一些参考意义,当然有的地方我并不赞同或者说我也不完全理解,原文在 ...

  5. WebService服务调用方法介绍

    1 背景概述 由于在项目中需要多次调用webservice服务,本文主要总结了一下java调用WebService常见的6种方式,即:四种框架的五种调用方法以及使用AEAI ESB进行调用的方法. 2 ...

  6. 【C#】属性（Attribute)

    如果程序员是猫,你是哪只猫? 这个是我一直都很喜欢的一个技术,不是很麻烦,也不是很难理解,和反射配合起来,只有你想不到没有做不到的用途(夸张了哈). 运用范围 程序集,模块,类型(类,结构,枚举,接口 ...

  7. 使用C#开发屏幕保护程序步骤

    本文介绍使用C#制作屏幕保护的方法,这个屏幕保护就是仿效视窗系统自带的字幕屏保. 屏幕保护程序的扩展名虽然是"scr",但其实是一个可执行的"exe"文件.但他 ...

  8. MYSQL企业常用架构与调优经验分享

    一.选择Percona Server.MariaDB还是MYSQL  mysql应用源码:http://www.jinhusns.com/Products/Download/?type=xcj 1.M ...

  9. 重新想象 Windows 8 Store Apps (52) - 绑定: 与 Element Model Indexer Style RelativeSource 绑定, 以及绑定中的数据转换

    [源码下载] 重新想象 Windows 8 Store Apps (52) - 绑定: 与 Element Model Indexer Style RelativeSource 绑定, 以及绑定中的数 ...

  10. [moka同学笔记]yii2.0查询数据库

      一. [:id占位符]使用 $results = Test::findBySql($sql,array(':id'=>'1 or 1=1))->all()   二. [id=1]  选 ...