學習javaScript必知必會(6)~類、類的定義、prototype 原型、json物件

一樂樂發表於2022-01-17
JavaScript原型JSON物件

一、定義類：使用的是funciton，因為在js中沒有定義類的class語句，只有function.

■ 舉例：

//定義一個Person類（通過類的無參建構函式定義類）
function Person(){}
var p = new Person();
p.name = '小明';
p.age = 12;

二、類的種類（系統類、自定義類）

（1）常見的系統類 String、Date、Math

1）String 類，字面量 '' 舉例： var str = 'abc';

✿ 補充：
'' 字串
[] 陣列
{} 物件
// 正規表示式

① length
② indexOf(string) 取得引數在字串中出現的位置
③ substr(num1, num2) 擷取字串
④ toLowerCase()
⑤ toUpperCase()
⑥ replace(str1, str2) 字串替換


2）Date 日期類

① getYear() getFullYear() getMonth() getDay()
② getDate()
③ getHours() getMinutes() getSeconds() getMilliseconds()


3) Math 數學類

① ceil(數值) floor(數值)
② min(數值1, 數值2) max(數值1, 數值2)
③ pow(數值1, 數值2)
④ random() 隨機數
⑤ round(數值) 四捨五入
⑥ sqrt(數值) 開平方根


❀（2）自定義類【在js中沒有定義類的語句class，是通過類的建構函式定義類的】：

❀ 1）語法：

function 類名() { //在js中沒有定義類的語句class，是通過類的無參建構函式定義類

}

var 物件變數 = new 類名();

❀ 2）關於物件屬性的使用：

物件.屬性
物件['屬性']

❀ 3）物件的屬性是動態新增的，物件屬性可以使用 . 或者 [''] 形式表示出來（物件的屬性可以是任意資料型別）

//定義一個Person類（Person類的無參建構函式）
function Person(){}
var p = new Person();
p.name = '小明';
p['age'] = 12;

❀ 4）定義類通過類的有參建構函式：

■ 舉例：

//定義一個Person類（Person類的有參建構函式）
function Person(name, age, hobby){
    this.name = name;
    this.age = age;
    this.hobby = hobby;
}

var p = new Person('小明', 12, '遊戲');

5）for…in 遍歷物件的屬性：

■ 舉例：

//定義一個Person類（Person類的有參建構函式）
function Person(name, age, hobby){
    this.name = name;
    this.age = age;
    this.hobby = hobby;
}

var p = new Person('小明', 12, '遊戲');
for(var i in p){
    document.write(i + ':' + p[i] + '<br/>');
}

6）關鍵字 constructor、typeof、instanceof、delete

  • constructor： 物件.constructor 返回物件的構造器
  • typeof： typeof 物件 返回物件的資料型別
  • instanceof： 物件 instanceof 類 判斷物件是否是某個類的例項
  • delete： delete 物件.屬性 刪除物件的屬性



三、prototype 原型（返回物件型別(類)原型的引用）

1、格式：class.prototype //獲取類原型的引用

■ 舉例：

//定義一個Person類
function Person(name, age) {
    this.name = name;
    this.age = age;
}
//獲取類的原型Person.prototype, 並且給類新增屬性nationlity
Person.prototype.nationality = "English";
//獲取類的原型Person.prototype, 並且給類新增方法屬性say
Person.prototype.say = function () {
    console.log('say hello');
};
//建立Person類的例項
var p = new Person("John", 50);
console.log(p.nationality);
p.say();

✿ 2、區分例項屬性和靜態屬性：

**例如：定義了一個Person類，區分Person.prototype. nationality 和 Person. nationality **:
■ Person.prototype. nationality: 是指為Person類下的例項新增屬性nationality
■ Person. nationality：是指為Person類新增靜態屬性nationality


3、prototype 原理：

□ js在載入每個構造器時，會建立對應的原型物件；
□ 在構造器物件內部有一個prototype屬性用來指向原型物件；
□ 在原型物件內部是有一個constructor屬性用來指向構造器；
□ 一般例項化物件後，物件的屬性是先在構造器中查詢，找不到就到原型物件中找


4、為什麼說Object是所有類的父類：

當系統為某個類構造器建立原型物件時，類名.prototype = new Object()
//即類的原型是Object的一個例項，原型物件擁有Object的所有屬性，
所以說Object是所有類的父類

四、原型鏈



五、json 物件

1、語法：{屬性名：屬性值，屬性名：屬性值，屬性名：屬性值……}

✿ 鍵值對的集合，即json物件


2、定義物件的屬性語法：

//定義一個json物件
var p1 = {name:'小明', age:12, sex:'女'}; //物件的屬性可以不加單引號，不叫雙引號
var p2 = {'name':'小明', 'age':12, 'sex':'女'};//物件的屬性可以加單引號
var p3 = {"name":'小明', "age":12, "sex":'女'};//物件的屬性可以加雙引號

□ json物件是Object類下的一個物件


3、建立物件有兩種方式（使用構造器的方式和使用json { } 的方式），有什麼區別？

■ json 建立物件省略了構造器的定義（程式只需要定義一個物件時）
■ 構造器可以簡化屬性的定義（程式需要定義多個相同的屬性或方法的物件）

相關文章