日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 前端技术 > javascript >内容正文

javascript

JS OOP -01 面向对象的基础

發布時間:2023/12/15 javascript 35 豆豆
生活随笔 收集整理的這篇文章主要介紹了 JS OOP -01 面向对象的基础 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

JS面向對象的基礎:

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

2.用new操作符獲得一個類的實例

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

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

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

6.prototype原型對象

?

1.函數的方式定義類

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

**class1既是一個函數也是一個類,可以將它理解為類的構造函數,負責初始化工作。

?

2.new 操作符獲得一個類的實例

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

       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對象就是一組屬性(方法)的集合這個性質。

<!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函數!!

**eval() 函數計算 JavaScript 字符串,并把它作為腳本代碼來執行。

**如果參數是一個表達式,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);//undefineduser.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();

?

轉載于:https://www.cnblogs.com/youguess/p/10551782.html

總結

以上是生活随笔為你收集整理的JS OOP -01 面向对象的基础的全部內容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。