JS OOP -01 面向對象的基礎

時間 2019-12-15

標籤 oop 面向對象基礎欄目 JavaScript 简体版

原文原文鏈接

JS面向對象的基礎：

1.用定義函數的方式定義類

2.用new操做符得到一個類的實例

3.使用 [ ] 引用對象的屬性和方法

4.動態添加，修改，刪除對象的屬性和方法

5.使用 { } 語法建立無類型的對象

6.prototype原型對象

1.函數的方式定義類

function class1 () {.......}javascript

**class1既是一個函數也是一個類，能夠將它理解爲類的構造函數，負責初始化工做。html

2.new 操做符得到一個類的實例

**JS中，函數和類是一個概念，當對一個函數進行new操做時，就會返回一個對象。若是這個函數中沒有初始化類成員，那就會返回一個空的對象java

　　　　　　　function Hello(){
                alert('hello');
            };
            
            var obj = new Hello();//這裏執行了alert('hello'); 把Hello看成是一個構造函數。
            alert(typeof(obj));//打印出obj變量是一個object。

3.使用 [] 引用對象的屬性和方法

**在JS中，每一個對象能夠看做是多個屬性（方法）的集合，引用一個屬性（方法），以下：數組

　　對象名.屬性（方法）名瀏覽器

　　對象名["屬性（方法）名"]函數

　　　　　　　var arr = new Array();
            
            arr.push('111');
            arr['push']('333');
            
            var len =arr.length;
            var len =arr['length'];
            alert(len);

**這種引用屬性（方法）的方式和數組相似，體現了JS對象就是一組屬性（方法）的集合這個性質。this

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/0318.js" ></script>
        <script>

            function User(){
                this.age=21;
                this.sex='male';
            }
            
            var user = new User();
            function show(slt){
                if(slt.selectedIndex!=0){
                    alert(user[slt.value]);
                }
            }
            
        </script>
        
    </head>
    <body>

        <select onchange="show(this)">
            <option value="0">請選擇信息</option>
            <option value="age">年齡</option>
            <option value="sex">性別</option>
        </select>
        
    </body>
</html>

**eval函數！！spa

**eval() 函數計算 JavaScript 字符串，並把它做爲腳本代碼來執行。prototype

**若是參數是一個表達式，eval() 函數將執行表達式。若是參數是Javascript語句，eval()將執行 Javascript 語句。指針

<script>
eval("x=10;y=20;document.write(x*y)");
document.write("<br>" + eval("2+2"));
document.write("<br>" + eval(x+17));
</script>

輸出：200 4 27

4.動態添加，修改，刪除對象的屬性和方法

**JS提供了靈活的機制來修改對象的行爲，能夠動態添加，修改，刪除屬性和方法。

            var user =new Object();
            user.id=1;//動態生成id屬性
            user.name='zhang';//動態生成name屬性
            
            alert(user.name);//訪問東西生成的name屬性
            
        
            user.show=function(){//動態添加方法
                alert('ok');
            }
            user.show();//

**動態生成的方法，能夠以下：

　　　　　　　function Myshow(arg01){//聲明一個函數
                alert('ok'+arg01);
            }
            
            var user =new Object();
            user.id=1;//動態生成id屬性
            user.name='zhang';//動態生成name屬性
            
            user.show =Myshow;//將Myshow方法的指針指向user.show 
            user.show(' qq');

**注意：undefined和null的區別

**調試：console.log(obj);

**修改就是從新賦值，誰在後把以前的覆蓋！

**JS裏面不存在重載！

**動態刪除：

　　　　　　　function Myshow(arg01){//聲明一個函數
                alert('ok'+arg01);
            }
            
            var user =new Object();
            user.id=1;//動態生成id屬性
            user.name='zhang';//動態生成name屬性
            
            user.show =Myshow;//將Myshow方法的指針指向user.show 
            user.show(' qq');
            
            //動態刪除
            user.id=undefined;
            user.name=undefined;
            delete user.show;
            
            alert(user.id);//undefined
            user.show('zq');//沒有打印出來，沒有該方法了

**標準標籤，能夠動態添加額外的屬性，不過要注意到瀏覽器的兼容性！！

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <script>
            
            function TestTT(){
                
                var obj = document.getElementById('btn');//獲取btn對象
                obj.tab='ZQ';//給該對象添加一個tab的屬性，可是input標準標籤並無這個屬性的！動態添加後是能夠訪問的
                
                alert(obj.tab);
                alert(obj.value);
            }
            
        </script>
        
    </head>
    <body>
        
        <input id="btn" type="text" value="123" />
        <button onclick="TestTT()" >TT</button>
        
    </body>
</html>

5.使用 { } 大括號語法建立無類型對象 --（更原生的語法，用處較多）

**JS中的對象其實就是屬性（方法）的一個集合，並沒嚴格意義上的類的概念。因此可使用 { } 直接聲明一個對象，而不是類。

　　　　　　　var arr= new Array();
            var arr=[];
            
            var obj = new Object();
            var obj ={};
            
            //大括號建立的是對象不是類
            var user ={
                name:'zq',
                age:12
            };
            
            //alert(user.age);
            //var user1= new User();//js會報錯
            //alert(user1.age);
            
            function User(){
                
            };
            var user_1 = new User();
            
            user_1=
            {
                name:'zq',
                age:12
            };
            alert(user_1.name);

6.prototype原型對象

**prototype對象是實現面向對象的一個重要機制。每一個函數(function)其實也是一個對象，它們對應的類是‘Function’，但它們的身份特殊，每一個函數對象都具備一個子對象prototype。

**即prototype表示了該函數的原型，而函數也是類，prototype就是表示了一個類的成員的集合。當經過 new 來獲取一個類的對象時，prototype對象的成員都會成爲實例化對象的成員。

**這裏能夠理解爲C#的靜態成員，而且能夠動態聲明！

　　　　　　　function User(){
                this.name='zq';
                this.age=12;
            };
            
            User.prototype.show=function(){//給這個類的原型添加了一個show方法
                alert('User Show!!!');
            };
            
            var  user1=new User();
            user1.name='qq';
            //alert(user1.name);
            user1.show();
            
            var user2=new User();
            //alert(user2.name);
            user2.show();

相關標籤/搜索

每日一句

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