一、引言 前面我們介紹了有關於內置對象的很多很多的API,講道理得話如果想徹底的掌握那一定要經過一定的代碼段沉澱下。大家可以想象一下,既然在程式中有很多的內置對象供我們使用,那我們是不是也可以定義一些對象作為我們自己的特用對象呢?答案肯定是可以的。 二、導入 在工作中根據內容需求不同我們可以定義不同 ...
一、引言
前面我們介紹了有關於內置對象的很多很多的API,講道理得話如果想徹底的掌握那一定要經過一定的代碼段沉澱下。大家可以想象一下,既然在程式中有很多的內置對象供我們使用,那我們是不是也可以定義一些對象作為我們自己的特用對象呢?答案肯定是可以的。
二、導入
在工作中根據內容需求不同我們可以定義不同的對象來實現我們自己想要的功能。
三、重點內容
① 自定義對象的概念:
在工作當中,有時我們需要多次的定義不同事物的不同屬性。這個時候為了方便我們就有了對象把他們封裝起來。那麼對象是什麼呢?。它是一個無序數組的集合,你可以把它當做是你的旅行包,裡面裝著你的衣服、錢包、手機等的物品。對象可以幫我們封裝一些數據,方便我們在程式中的傳輸或者是控制。我們把在對象中封裝的內容就把這些叫做是屬性或者方法。
屬性:事物具有的特征
方法:事物具有的行為
② 自定義對象的創建方式:
1.創建自定義對象:
var student = new Object(); //創建了一個學生的空對象 // 屬性(特征,姓名,性別,年齡,手機號,家庭)和方法(打招呼,游泳,打球) student.name = "張三"; student.sex = "男"; student.age = 20; student.sayHi = function (){ console.log("我叫"+student.name+",我今年"+student.age+",我是"+student.sex+"生"); };
雖然這樣做是沒有錯誤的,但是如果說是要儲存一個班的人的信息呢?我們需要一個方式批量創建。
2. 利用函數批量的創建對象
function createStudent(name,age,sex){ var student = new Object();// 用構造函數的方式創建了一個空對象並返回 student.name =name; student.age = age; student.sex= sex; student.sayHi= function(){ console.log("我叫"+student.name+",我今年"+student.age+",我是"+student.sex+"生"); }; return student;//將這個對象返回 } var zs = createStudent("張三",25,"男"); zs.sayHi(); var ls = createStudent("李四",26,"男"); ls.sayHi(); var zs1 = createStudent("趙四",28,"男"); zs1.sayHi();
這樣子我們就可以批量的穿件對象了,但是在上面的代碼中我們發現 var student = new Object();// 用構造函數的方式創建了一個空對象並返回 return student;//將這個對象返回 這兩句是不必須的,所以我們用下麵的方法。
3.構造函數創建對象
function Student(name,sex,age){ //首字母大寫,標明是一個函數,但是是構造函數,用來創建對象 //var this = new Object(); this.name = name; // this指代當前創建出來的出來 this.age=age; this.sex = sex; this.sayHi = function(){ console.log("我叫"+this.name+",我今年"+this.age+",我是"+this.sex+"生"); }; //return student(); // return this; } var ls = new Student("李四","男",25); // 構造函數可以創建對象並返回 ls.sayHi(); var xm = new Student("小明","男",12); xm.sayHi(); //誰調用,this就指代誰,始終指向當前對象
在這裡面我們需要關註兩個關註的關鍵字new與this
new在構造函數的時候做了以下的4件事
a ) 創建一個空的對象。
b )將this指針指向這個對象。
c )將構造函數裡面的代碼,給當前空對象this設置屬性和方法。
d )將this這個當前這個對象返回。
this
在JS中,通過構造函數創建出來的對象 ,在調用方法的時候,this指代當前對象。
誰調用方法,this指代誰,都是指代當前對象。
我知道關於這兩個關鍵字肯定還有更深層的解釋,不過這是基礎先掌握後面再深入。
4.對象字面量創建對象
var o = { // 對象字面量 name:"張三", age:20, address:"上海市", sex:"男", sayHi:function(){ console.log("大家好,我的名字是:"+ this.name+",我的年齡是:"+ this.age+",我是"+ this.sex+"生"); } }; o.sayHi();
四、總結
今天的內容有些多,需要記憶的內容要求很大。希望大家可以多多記憶。