面向对象的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指向的调用方式

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>面向对象的 JavaScript</title>

</head>

<body>

<script type="text/javascript">

    /*创建对象方式非常便利，

    * javascript对于声明在内部或者外部的方法没有区别对待*/

    //1.定义对象 var obj = new Object();与下面定义类型方式等同

    var obj_1 = {

        id : "No ID",

        details:null,

        fnInner:function(str){//方法调用模式，this指向方法所在对象

            this.details = (this.id = str +" "+"Function Inner");

        }

    }

    obj_1.fnOuter = function(str){//函数调用模式，this指向调用函数的对象

        this.details = (this.id = str +" "+"Function Outer");

    }

    obj_1.fnInner("obj_1 ID");

    console.log(obj_1.details);

    obj_1.fnOuter("obj_1 ID");

    console.log(obj_1.details);

    //2.使用Object.create()创建对象实现继承

    var obj_2 = Object.create(obj_1);

    //编写obj_2自己的属性

    obj_2.id = "NO ID";

    obj_2.details = null;

    obj_2.func = function(str){

        this.details = (this.id = str +" "+"Function");

    }

    obj_2.func("obj_2 ID");

    console.log(obj_2.details);

    obj_2.fnInner("obj_2 ID");

    console.log(obj_2.details+" inhert obj_1");

    obj_2.fnOuter("obj_2 ID");

    console.log(obj_2.details+" inhert obj_1");

    /*主流语言创建类以及调用类的方式，

    * 在javascript中的实现十分笨拙，牵扯到prototype关键字的使用

    * 更是容易造成混乱*/

    //3.使用构造函数来创建“类”

    var Obj_3 =  function (id, details) {

        //初始化属性

        this.id = id;

        this.details = details;

    }

    //显示使用prototype使函数成为该对象的方法

    Obj_3.prototype.funcPrototype = function(str){

        this.details = (this.id = str +" "+"prototype Function");

    }

    //我理解为静态方法不能获取this关键字的引用,本身与类没有任何关系

    //prototype关键字的使用导致对象创建混乱，javascript的编程思路不清晰导致

    //所以采取用大写字母声明的方式来避免

    Obj_3.funcStatic = function(str){

        return  str +" "+"static Function";

    }

    var Obj_3_object = new Obj_3("Obj_3 ID Code", "Obj_3 Details");

    Obj_3_object.funcPrototype("Obj_3");

    console.log(Obj_3_object.details);

    console.log(Obj_3.funcStatic("Obj_3"));

    /*对象的call、apply调用*/

    var obj_4 = {

        details:"NOT Null",

        func:function(str){

            return (this.details += str);

        }

    }

    //在函数层级实现装饰器模式

    //关键字this的指向-->call或apply的第一个参数

    obj_4.func.call(obj_1,"obj_1 调用 obj_4 function func");

    console.log(obj_1.details);

</script>

</body>

</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. Spring中PropertyPlaceholderConfigurer的使用

    Spring中PropertyPlaceholderConfigurer的使用     在使用Spring配置获取properties文件时,在网上查到相关的资料,分享哈!! (1)获取一个配置文件 ...

  2. Java反射机制探秘

    如何获得Class对象     1.针对每一个对象.getCalss(),可以得到对应的Class. 2.Class.forName(String),String的写法:包名.类名.就会创建包名.类名 ...

  3. 表空间、Schema和用户

    源地址:http://www.cnblogs.com/kevinanni/p/3688921.html

  4. 解决dedev5.7更新出现include\userlogin.class.php on line 21的办法

    第一种情况解决办法:   在dede\templets文件夹 找到 index_body.htm  文件 把这些注释掉. $(function() {    $.get("index_tes ...

  5. C++学习27 用全局函数重载运算符

    运算符重载函数既可以声明为类的成员函数,也可以声明为所有类之外的全局函数. 运算符重载函数作为类的成员函数 将运算符重载函数声明为类的成员函数时,二元运算符的参数只有一个,一元运算符不需要参数.之所以 ...

  6. CRM IFRAME 显示地图

    作者:卞功鑫  ,转载请保留.http://www.cnblogs.com/BinBinGo/p/5274409.html 需要背景: 现在已经有经纬度,需要在地图上显示出来. 环境: CRM 4.0 ...

  7. dropdownlist 控件的判断

    问题: 三个级联 下拉框.在不点击第一级别直接点击第二级别时,弹出提示窗口."请先选择XXX"之类的,理想的结果是想要下图 这样的: 由于使用的微信公众号的内置浏览器,所以问题来了 ...

  8. 在AE中通过指定中心点和半径画圆

    /// <summary>/// 通过指定的中心点.半径画圆/// </summary>/// <param name="pLayer">要画的 ...

  9. .NET连接池的配置 【转】

    ADO.Net 在数据库操作过程中默认打开了连接池,不需要再进行手工配置.这个特性可以使数据库操作时效率提高,但也要有相应的代码配合,才能真正提高程序效率. 1.连接字符串 ADO.Net 中的连接池 ...

  10. UI_RD协作开发流程

    1. 背景 由于android端需要进行多屏幕适配,这就给UI&RD之间的沟通产生了一些困难.我下面将会对这两种角色的沟通,说明了一下我们项目中沟通的方式和规则. 原则:客户端跟UI约定了各种 ...