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

一樂樂發表於2022-01-17

一、定義類:使用的是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 建立物件省略了構造器的定義(程式只需要定義一個物件時)
■ 構造器可以簡化屬性的定義(程式需要定義多個相同的屬性或方法的物件)

相關文章