面向對象的 JavaScript

時間 2019-12-10

標籤面向對象 javascript 欄目軟件設計简体版

原文原文鏈接

面向對象的javascript javascript

1、建立對象html

　　建立對象的幾種方式：java

　　var obj = {}; 編程

　　var obj = new Object();app

　　var obj = Object.create(fatherObj);函數

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

　　Obj_object = new Obj(a,b);prototype

2、經過繼承建立對象htm

　　var obj = Object.create(fatherObj);對象

3、使用構造器建立對象

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

　　Obj_object = new Obj(a,b);

4、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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。