進擊的JavaScript小白(五)——物件
說我是單身狗的那人真逗,程式設計師誰還沒個物件了,分分鐘new一個,我還能new兩個,呵,顫抖吧,凡人!
一、物件簡介
1、物件的作用
用於同時儲存多個數據
2、宣告方式
var obj = new Object();
var obj = {};
3、物件的屬性操作
① 屬性:物件中儲存的資料,統稱為屬性
② 方法:方法實際上也是屬性,由於內部儲存的是函式值,所以稱為方法
③ 物件.屬性名:當使用物件屬性時可以確定當前要訪問的屬性名是什麼
④ 物件[‘屬性名’]:不確定本次要訪問的屬性名稱,就可以使用[]的訪問方式
⑤ 物件屬性的初始化設定方式
var obj = { name : 'jack', age : 18, sayHi : function () { console.log('這是sayHi的程式碼'); }, sayHehe : function () { console.log('這是sayHehe的程式碼'); } }; console.log(obj.name, obj['age']); obj.xingBie = '男';
二、物件建立操作
1、通過Object建構函式建立單個物件
var obj = new Object();
2、工廠模式
// 使用函式進行多個物件建立操作(工廠模式) function createStu (name, age) { // 1 建立了物件 var stu1 = new Object(); // 2 給物件新增功能 stu1.name = name; stu1.age = age; stu1.sayHi = function () { console.log('這是sayHi方法的功能'); }; // 3 返回這個物件 return stu1; } var jack = createStu('jack', 18); console.log(jack.name, jack.age); jack.sayHi();
3、建構函式模式
function Create (name, age) {
this.name = name;
this.age = age;
this.sayHi = function () {
console.log('這是sayHi');
};
}
var c1 = new Create('jack', 18);
c1.sayHi();
1、new的作用
① 建立了物件
② 將函式內的this設定為建立的物件
③ 返回了這個物件
④ 可以幫我們進行函式呼叫
2、呼叫前必須加new
3、在建構函式中只需要給要建立的物件進行功能設定即可
4、(建議)建構函式的函式名首字母大寫
4、原型模式
原型是個坑,我現在還沒填明白
function Person(){}
Person.prototype.name = 'jack';
Person.prototype.age = 19;
Person.prototype.sayName = function(){
console.log(this.name);
}
var person1 = new Person();
person1.sayName();//"jack"
var person2 = new Person();
person2.sayName(); //"jack"
console.log(person1.sayName === person2.sayName); //true
使用原型物件可以讓所有物件例項共享它所包含的屬性和方法。
還有四種,分別是組合使用建構函式模式和原型模式,動態原型模式,Object.create(),另有寄生建構函式模式和穩妥建構函式模式,四個坑,什麼時候填了,什麼時候再來加上
三、this的使用
1、this在普通函式中使用
① 指向window物件,即js瀏覽器環境中的頂級物件
② 由於window物件可以直接使用名稱訪問,所以這種this的訪問方式是沒有實際意義的
2、this在某個物件的方法中使用
① 指向當前物件,即函式呼叫者
② 以後只要在方法中操作當前物件,就統一使用this進行操作
3、特殊場景:建構函式中this只想建立的物件
new對函式內的this指向進行了修改
四、物件的遍歷操作
var obj = {
name : 'jack',
age : 18,
sayHi : function () {
console.log('這是sayHi');
}
};
for (var k in obj) {
//k - 代表屬性名 - 字串型別
if (typeof obj[k] === 'function') {
obj[k]();
//obj[k] - 代表屬性值
} else {
console.log(obj[k]);
}
}
1、陣列中的元素按照索引排列,陣列是一種有序的資料儲存方式。而物件中的元素按照屬性名儲存,是一種無序的資料儲存方式。
2、屬性名 - 鍵,屬性值 - 值,所以物件結構又稱為鍵值對
3、物件需要使用for···in進行遍歷操作。
五、物件的兩種使用形式
1、作為資料儲存使用
1、當我們將物件作為儲存資料使用時是不會設定方法結構的
2、物件是按照鍵值對儲存的,索引可以儲存兩組相關聯的資料
2、作為工具使用
1、設定一個或多個物件,通過物件的屬性和方法結合完成一些操作,我們就稱這是一種工具的使用方式。
2、自定義工具,自己建立一個物件,設定一些屬性方法
3、內建工具
六、內建物件
js中有很多的資料型別,為了方便開發者對資料型別進行操作,提供了很多的功能,這些功能根據操作的資料型別不同,劃分了多個物件,我們稱之為內建物件。
全域性物件、Number、Boolean、String、Array、Object、Function、Date、Math 等都是內建物件
下一篇將詳細講解內建物件,此篇完。