面向对象的javascript

一、创建对象

　　创建对象的几种方式：

　　var obj = {};

　　var obj = new Object();

　　var obj = Object.create(fatherObj);

　　var Obj = function(a,b){this.a=a;this.b=b;};

　　Obj_object = new Obj(a,b);

二、通过继承创建对象

　　var obj = Object.create(fatherObj);

三、使用构造器创建对象

　　var Obj = function(a,b){this.a=a;this.b=b;};

　　Obj_object = new Obj(a,b);

四、call、apply调用实现的装饰器模式

　　可以指定this指向的调用方式

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title>面向对象的 JavaScript</title>
  6. </head>
  7. <body>
  8. <script type="text/javascript">
  9.     /*创建对象方式非常便利，
  10.     * javascript对于声明在内部或者外部的方法没有区别对待*/
  11.     //1.定义对象 var obj = new Object();与下面定义类型方式等同
  12.     var obj_1 = {
  13.         id : "No ID",
  14.         details:null,
  15.         fnInner:function(str){//方法调用模式，this指向方法所在对象
  16.             this.details = (this.id = str +" "+"Function Inner");
  17.         }
  18.     }
  19.     obj_1.fnOuter = function(str){//函数调用模式，this指向调用函数的对象
  20.         this.details = (this.id = str +" "+"Function Outer");
  21.     }
  22.     obj_1.fnInner("obj_1 ID");
  23.     console.log(obj_1.details);
  24.     obj_1.fnOuter("obj_1 ID");
  25.     console.log(obj_1.details);
  26.  
  27.     //2.使用Object.create()创建对象实现继承
  28.     var obj_2 = Object.create(obj_1);
  29.     //编写obj_2自己的属性
  30.     obj_2.id = "NO ID";
  31.     obj_2.details = null;
  32.     obj_2.func = function(str){
  33.         this.details = (this.id = str +" "+"Function");
  34.     }
  35.     obj_2.func("obj_2 ID");
  36.     console.log(obj_2.details);
  37.     obj_2.fnInner("obj_2 ID");
  38.     console.log(obj_2.details+" inhert obj_1");
  39.     obj_2.fnOuter("obj_2 ID");
  40.     console.log(obj_2.details+" inhert obj_1");
  41.  
  42.     /*主流语言创建类以及调用类的方式，
  43.     * 在javascript中的实现十分笨拙，牵扯到prototype关键字的使用
  44.     * 更是容易造成混乱*/
  45.     //3.使用构造函数来创建“类”
  46.     var Obj_3 =  function (id, details) {
  47.         //初始化属性
  48.         this.id = id;
  49.         this.details = details;
  50.     }
  51.     //显示使用prototype使函数成为该对象的方法
  52.     Obj_3.prototype.funcPrototype = function(str){
  53.         this.details = (this.id = str +" "+"prototype Function");
  54.     }
  55.     //我理解为静态方法不能获取this关键字的引用,本身与类没有任何关系
  56.     //prototype关键字的使用导致对象创建混乱，javascript的编程思路不清晰导致
  57.     //所以采取用大写字母声明的方式来避免
  58.     Obj_3.funcStatic = function(str){
  59.         return  str +" "+"static Function";
  60.     }
  61.     var Obj_3_object = new Obj_3("Obj_3 ID Code", "Obj_3 Details");
  62.     Obj_3_object.funcPrototype("Obj_3");
  63.     console.log(Obj_3_object.details);
  64.     console.log(Obj_3.funcStatic("Obj_3"));
  65.  
  66.     /*对象的call、apply调用*/
  67.     var obj_4 = {
  68.         details:"NOT Null",
  69.         func:function(str){
  70.             return (this.details += str);
  71.         }
  72.     }
  73.     //在函数层级实现装饰器模式
  74.     //关键字this的指向-->call或apply的第一个参数
  75.     obj_4.func.call(obj_1,"obj_1 调用 obj_4 function func");
  76.     console.log(obj_1.details);
  77. </script>
  78. </body>
  79. </html>

　　

 

面向对象的 JavaScript的更多相关文章

  1. 前端开发：面向对象与javascript中的面向对象实现（二）构造函数与原型

    前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型 前言(题外话): 有人说拖延症是一个绝症,哎呀治不好了.先不说这是一个每个人都多多少少会有的,也不管它究竟对生活有多么大的 ...

  2. 前端开发：面向对象与javascript中的面向对象实现（一）

    前端开发:面向对象与javascript中的面向对象实现(一) 前言: 人生在世,这找不到对象是万万不行的.咱们生活中,找不到对象要挨骂,代码里也一样.朋友问我说:“嘿,在干嘛呢......”,我:“ ...

  3. 摘抄--全面理解面向对象的 JavaScript

    全面理解面向对象的 JavaScript JavaScript 函数式脚本语言特性以及其看似随意的编写风格,导致长期以来人们对这一门语言的误解,即认为 JavaScript 不是一门面向对象的语言,或 ...

  4. 面向对象的JavaScript --- 动态类型语言

    面向对象的JavaScript --- 动态类型语言 动态类型语言与面向接口编程 JavaScript 没有提供传统面向对象语言中的类式继承,而是通过原型委托的方式来实现对象与对象之间的继承. Jav ...

  5. 面向对象的JavaScript --- 封装

    面向对象的JavaScript --- 封装 封装 封装的目的是将信息隐藏.一般而言,我们讨论的封装是封装数据和封装实现.真正的封装为更广义的封装,不仅包括封装数据和封装实现,还包括封装类型和封装变化 ...

  6. 面向对象的JavaScript --- 多态

    面向对象的JavaScript --- 多态 多态 "多态"一词源于希腊文 polymorphism,拆开来看是poly(复数)+ morph(形态)+ism,从字面上我们可以理解 ...

  7. 面向对象的JavaScript --- 原型模式和基于原型继承的JavaScript对象系统

    面向对象的JavaScript --- 原型模式和基于原型继承的JavaScript对象系统 原型模式和基于原型继承的JavaScript对象系统 在 Brendan Eich 为 JavaScrip ...

  8. 第1章 面向对象的JavaScript

    针对基础知识的每一个小点,我都写了一些小例子,https://github.com/huyanluanyu1989/DesignPatterns.git,便于大家理解,如有疑问,大家可留言给我,最近工 ...

  9. javascript面向对象之Javascript 继承

    转自原文javascript面向对象之Javascript 继承 在JavaScript中实现继承可以有多种方法,下面说两种常见的. 一,call 继承 先定义一个“人”类 //人类 Person=f ...

随机推荐

  1. 利用js将 json对象在textarea中赋值与展示

    明明很简单的东西,可惜网上一大堆废话.在此记录,转需. jsonStr = JSON.stringify(jsondata,); example: <!doctype html> < ...

  2. win xp32位与64位怎么查看是多少位系统

    方法一: Windows XP/Server2003几乎都是32位的操作系统 1. 单击“开始”,然后单击“运行”. 2. 在“打开”框中,键入cmd(再键入systeminfo)或者winmsd.e ...

  3. DedeTag Engine Create File False提示的种种原因及解决方法

    DedeTag Engine Create File False提示的种种原因及解决方法 第一种情况:站点.文件夹权限不足造成无法建立文件 这种情况的出现,一方面可能是Apache设置的读写权限较严格 ...

  4. Memcached常用命令及使用说明(转)

    一.存储命令 存储命令的格式: 1 2 <command name> <key> <flags> <exptime> <bytes> < ...

  5. 山东省第六届ACM省赛

    A.Nias and Tug-of-War(sort排序) B.Lowest Unique Price(set+map) C.Game!(博弈) D.Stars E.BIGZHUGOD and His ...

  6. POJ 2157 Evacuation Plan [最小费用最大流][消圈算法]

    ---恢复内容开始--- 题意略. 这题在poj直接求最小费用会超时,但是题意也没说要求最优解. 根据线圈定理,如果一个跑完最费用流的残余网络中存在负权环,那么顺着这个负权环跑流量为1那么会得到更小的 ...

  7. 在viewPager中的textview参数singleLine和gravity为center冲突bug

    在viewPager中有textview. 当textview的参数为singleLine和gravity为center时, onfling事件将会被读取为onclick事件. 这是andriod的一 ...

  8. JQuery基础教程：选择元素（下）

    DOM遍历方法   利用前面介绍的jQuery选择符取得一组元素,就像是我们在DOM树中纵横遍历再经过筛选得到的结果一样.如果只有这一种取得元素的方式,那我们选择的余地从某个角度讲也是很有限的.很多情 ...

  9. The Ninth Hunan Collegiate Programming Contest (2013) Problem F

    Problem F Funny Car Racing There is a funny car racing in a city with n junctions and m directed roa ...

  10. jQuery Mask

    <script type="text/javascript" src="/assets/mask/jquery.mask.min.js"></ ...