JavaScript基礎之對象
1.對象
1.1什麼是對象?
在JavaScript中,對象是一組無序的相關屬性和方法的集合,所有的事物都是對象,例如字符串、數值、數組、函數等。
對象是由屬性和方法組成的
- 屬性:事物的特征,在對象中用屬性來表示
- 方法:事物的行為,在對象中用方法來表示
1.2為什麼需要對象
保存一個值時,可以使用變量,保存(一組值)時,可以使用數組。如果要保存一個人的完整信息呢?
例如,將張三的個人信息保存在數組中的方式為:
var arr = ['張三','男',123,156];
用對象的方式將張三的個人信息保存下來,更為清晰一點。
2.創建對象的三種方式
2.1利用對象字面量創建對象{}
對象字面量:就是{ }裡面包含瞭表達這個具體事物的(對象)的屬性和方法。
<script> //利用對象字面量創建對象{} var obj = {};//創建瞭一個空的對象 var obj = { uname: '張三', age: 18, sex: '男', sayhi: function () { console.log('hi'); } }; //(1)裡面的屬性或方法我們采取鍵值對的形式 鍵 屬性名: 值 屬性值 //(2)多個屬性或方法中間用逗號隔開 //(3)方法後面跟的是一個匿名函數 //2.使用對象 //(1) 調用對象的屬性 我們采取 對象.屬性名的方式 console.log(obj.uname); //(2)調用對象的屬性 對象名['屬性名'] console.log(obj['age']); //(3)調用對象的方法 對象名.方法名 obj.sayhi(); </script>
2.2利用new Object創建對象
// //利用new Object創建對象 var obj = new Object();//創建瞭一個空的對象 obj.uname = '張三'; obj.age = 18; obj.sex = '男'; obj.sayhi = function () { console.log('hi~'); } console.log(obj['uname']); console.log(obj.sex); obj.sayhi(); //(1) 我們是利用 等號=賦值的方法 添加對象的屬性和方法 //(2) 每個屬性和方法之間用 ; 結束 //案例 var Object = new Object(); Object.uname = '鳴人'; Object.sex = '男'; Object.age = 19; Object.skill = function () { console.log('影分身術'); } console.log(Object.uname); Object.skill();
2.3 利用構造函數創建對象
//我們為什麼需要使用構造函數 //就是因為我們前兩種創建對象的方式一次隻能創建一個對象 //因為我們一次創建一個對象,裡面很多的屬性和方法是大量相同的 利用函數來實現代碼的復用 這個函數就稱為 構造函數 // 構造函數裡封裝的是 對象 //構造函數 就是把我們對象裡面一些相同的屬性和方法抽象出來封裝到函數裡面
構造函數:是一種特殊的函數,主要用來初始化對象,即為對象成員變量賦初始值,它總是與new運算符一起使用。我們可以把對象中一些公共的屬性和方法抽象出來,然後封裝到這個函數中。
<script> //利用構造函數創建對象 //構造函數的語法格式 // function 構造函數名() { // this.屬性 = 值; // this.方法 = function() {} // } // new 構造函數名(); function Star(uname, age, sex) { this.name = uname; this.age = age; this.sex = sex; this.sing = function (song) { console.log(song); } } var ldh = new Star('劉德華', 18, '男');//調用函數返回的是一個對象 console.log(typeof ldh); console.log(ldh.name); console.log(ldh['sex']); ldh.sing('冰雨'); var zxy = new Star('張學友', 36, '男'); console.log(zxy.name); console.log(zxy['sex']); zxy.sing('李香蘭'); //1.構造函數名字首字母要大寫 //2.我們構造函數不需要return 就可以返回結果 //3.我們調用構造函數 必須使用 new //4.我們隻要new Srart() 調用函數就創建瞭一個對象 //5.我們的屬性和方法前面必須加this </script>
總結
本篇文章就到這裡瞭,希望能夠給你帶來幫助,也希望您能夠多多關註WalkonNet的更多內容!
推薦閱讀:
- Javascript中函數分類&this指向的實例詳解
- javascript設計模式之鴨子類型和多態
- 初識JavaScript的基礎
- 一文瞭解Java動態代理的原理及實現
- Javascript的原型和原型鏈你瞭解嗎