面向对象的 JavaScript

面向对象的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)