>[danger]**1. JS中的構造函數** >[info]js中一般申明一個函數，在外部new這個函數得到對象，這個函數就是js的構造函數，這個函數也可以成為類。 ```javascript function foo(){ console.log('Jack'); } //實例化這個js類 var ojb = new foo(); //調用這個類 ojb.func(); ``` >[danger]**2. this 和成員變量、成員方法** ~~~ function foo(name){ //定義成員變量 this.name = name; //定義成員方法 this.func = function(){ console.log(this.name); } } //實例化這個js類 var ojb = new foo('TOM'); //調用類里面的變量 console.log(ojb.name); //調用類里面的方法 ojb.func(); ~~~ >[info]*PS：this 當前使用的是哪個對象，那this就代表的是這個對象* >[danger]**3. 刪除成員** 使用delete關鍵詞刪除類里面的變量 ~~~ function foo(){ this.age = 30; this.name = 'Jack'; this.addr = 'TOM'; this.func = function(){ console.log('HTEEL'); } } var ojb1 = new foo; var ojb2 = ojb1; //共用一個存儲空間(地址賦值) delete ojb2.name; //刪除成員變量 ojb2 = null; // ojb2 被刪除，ojb1 不受影響 console.log(ojb1); console.log(ojb2); ~~~ >[danger]**4. 練習(使用類的方式設置DOM的CSS樣式)** ~~~ function setStyle(){ this.css = function(ojb,stylename,stylevalue){ ojb.style[stylename] = stylevalue; //函數內設置style屬性格式，用style[屬性名]格式 return this; } } var div = document.querySelector('div'); var newstyle = new setStyle(); //實例化JS對象 newstyle.css(div,'background','red').css(div,'height','100px'); //連貫調用 ~~~