JavaScript 的對象及面向?qū)ο筇匦?/h1>

JS 的面向?qū)ο筇匦?/h1>

一. 概念

  1. 類:有相同的特征和行為的事物的抽象
  2. 對象:類的一個實例

面向?qū)ο笳Z言的要求:
一種面向?qū)ο笳Z言需要向開發(fā)者提供四種基本能力:
封裝 - 把相關(guān)的信息(無論數(shù)據(jù)或方法)存儲在對象中的能力
聚集 - 把一個對象存儲在另一個對象內(nèi)的能力
繼承 - 由另一個類(或多個類)得來類的屬性和方法的能力
多態(tài) - 編寫能以多種方法運行的函數(shù)或方法的能力
————————————————W3C:ECMAScript 面向?qū)ο蠹夹g(shù)

ECMAScript 支持這些要求耕蝉,因此可被是看做面向?qū)ο蟮摹?/p>

但是 JS 中沒有類的概念越除,而且繼承等的方式非常復(fù)雜且無用炎滞,所以我們也說 JS 不是一個嚴(yán)格面向?qū)ο蟮恼Z言稠诲。

二. 對象的判斷

對于判斷一個變量是否是對象,我們通常選擇兩個方式飒炎。

1. typeOf

typeOf 運算符有一個參數(shù)埋哟,即要檢查的變量或者值。返回值就是這個變量或者值的類型郎汪。

console.log(typeof 12); // number 數(shù)字類型
console.log(typeof 'qweqwe'); // sting 字符串類型
console.log(typeof true); // boolean 布爾類型
var fn = function() {};
console.log(typeof fn); // function 函數(shù)類型
var arr = [1, 2, 'lalala'];
console.log(typeof arr); // object 引用類型
//object 引用類型 不叫對象類型

另外還存在 undefined 類型赤赊。

2. instanceof

instanceof 方法有兩個參數(shù):第一個是要比較的變量或者值,第二個是變量類型煞赢,返回的值是 true / false抛计。

console.log(arr instanceof Object); // true
//表示 arr 是否為引用類型的對象
console.log(fn instanceof Object); // true
console.log(Boolean instanceof Object); // true
console.log(true instanceof Object); // false
console.log(arr instanceof Array); // true 
console.log('aa' instanceof String); // false
console.log(123 instanceof Number); // false
//直接寫的123或者"aa"這都是基本類型,除非:
var str = new String('aa');
console.log(str instanceof String); // true
var num = new Number(123);
console.log(num instanceof Number); // true

三. 如何創(chuàng)建一個對象

這里有兩個創(chuàng)建對象方式:

1. 直接創(chuàng)建

var 變量名={
    屬性1:值1,
    屬性2:值2,
    ... ...
    函數(shù)名: function(){
        函數(shù)內(nèi)容
    }
}

舉例:

var stu = {
    name: 'Tom',
    age: 42,
    sex: 'female',
    sayHi: function() {
        console.log(this.name)
    }
  };

此時我們就創(chuàng)建了一個名為 stu 的對象,這個對象包括三個屬性:name, age, sex照筑。

console.log(stu.age); // 42

同時對象可以自己調(diào)用自己內(nèi)部的函數(shù):

stu.sayHi(); // Tom

2. 對象的構(gòu)造函數(shù)

在第一種直接創(chuàng)建方式中吹截,我們可以想象,如果要批量創(chuàng)建對象凝危,會很繁瑣波俄。所以我們可以創(chuàng)建一個函數(shù),進(jìn)行對象的創(chuàng)建蛾默。
結(jié)構(gòu):

function 構(gòu)造函數(shù)名(參數(shù)1,參數(shù)2,...){
    this.屬性1 = 參數(shù)1;
    this.屬性2 = 參數(shù)2;
    ... ...
    this.函數(shù)名= function(){
        函數(shù)內(nèi)容 
    }
}

舉例:

function Student(name, age) {
    this.name = name;
    this.age = age;
    this.sayHi = function() {
        console.log("i'm " + this.name);
    };
};

此時我們就有了一個可以創(chuàng)建對象的函數(shù)懦铺,我們只要輸入對應(yīng)的參數(shù)值,就可以得到有函數(shù)內(nèi)包含的屬性的對象支鸡。
那么我們用構(gòu)造函數(shù)來創(chuàng)建對象:

var stu1 = new Student('Tom', 42);
console.log(stu1.name); // Tom
stu1.sayHi(); // i'm Tom

構(gòu)造函數(shù)創(chuàng)建對象有如下的優(yōu)點:

  1. 創(chuàng)建對象冬念,將復(fù)雜的內(nèi)容簡化為一個函數(shù)
  2. 改動方便,改函數(shù)牧挣,改所有對象

四. 原型

1. 概念

每一個構(gòu)造函數(shù)創(chuàng)建的屬性都遠(yuǎn)原型屬性急前,當(dāng)我們在某一個對象內(nèi)創(chuàng)建一個原型屬性,這個屬性就被曝存在了一個獨立于每個對象空間的堵路區(qū)域瀑构,且可以被所有對象訪問到裆针。

2. 原型的基本設(shè)置方式

Student.prototype.school = 'TsingHua';
// 此時我們就創(chuàng)建了一個原型屬性school,而且屬性的值都是一樣的,是TsingHua
// 這個屬性可以被所有對象訪問到
console.log(stu1.school); // TsingHua

同時原型屬性也可以是函數(shù)

Student.prototype.saySchool = function() {
    console.log('我的老家就在這個' + this.school);
    console.log(this);
};
stu1.saySchool(); 
// 我的老家就在這個TsingHua 
// Student {name: "Tom", age: 42}

3. 屬性獲取順序(原型鏈)

那么,如果此時有一個對象的 school 是其他值检碗,那我們應(yīng)該怎么辦呢据块?

var stuPeking = new Student('Jerry',22);
stuPeking.school='Peking University';
console.log(stuPeking.school); // Peking University
console.log(stu1.school); // TsingHua

這里就涉及到原型鏈的概念。
原型鏈?zhǔn)谦@取屬性的先后順序:

.基本屬性 > .prototype.屬性名 > Object構(gòu)造函數(shù) > null
可以看到折剃,基本屬性的取值優(yōu)先級大于原型屬性另假,所以當(dāng)一個對象的 school 值不是'TsingHua',那我們可以把這個對象的 school 設(shè)置為基本屬性怕犁,那么它的優(yōu)先級就更高边篮,可以設(shè)置為我們預(yù)期的值己莺,就可以了。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

  • 序言:七十年代末戈轿,一起剝皮案震驚了整個濱河市凌受,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌思杯,老刑警劉巖胜蛉,帶你破解...
    沈念sama閱讀 216,651評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異色乾,居然都是意外死亡誊册,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,468評論 3 392
  • 文/潘曉璐 我一進(jìn)店門暖璧,熙熙樓的掌柜王于貴愁眉苦臉地迎上來案怯,“玉大人,你說我怎么就攤上這事澎办〕凹睿” “怎么了?”我有些...
    開封第一講書人閱讀 162,931評論 0 353
  • 文/不壞的土叔 我叫張陵局蚀,是天一觀的道長麦锯。 經(jīng)常有香客問我,道長至会,這世上最難降的妖魔是什么离咐? 我笑而不...
    開封第一講書人閱讀 58,218評論 1 292
  • 正文 為了忘掉前任谱俭,我火速辦了婚禮奉件,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘昆著。我一直安慰自己县貌,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,234評論 6 388
  • 文/花漫 我一把揭開白布凑懂。 她就那樣靜靜地躺著煤痕,像睡著了一般。 火紅的嫁衣襯著肌膚如雪接谨。 梳的紋絲不亂的頭發(fā)上摆碉,一...
    開封第一講書人閱讀 51,198評論 1 299
  • 那天,我揣著相機與錄音脓豪,去河邊找鬼巷帝。 笑死,一個胖子當(dāng)著我的面吹牛扫夜,可吹牛的內(nèi)容都是我干的楞泼。 我是一名探鬼主播驰徊,決...
    沈念sama閱讀 40,084評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼堕阔!你這毒婦竟也來了棍厂?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,926評論 0 274
  • 序言:老撾萬榮一對情侶失蹤超陆,失蹤者是張志新(化名)和其女友劉穎牺弹,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體时呀,經(jīng)...
    沈念sama閱讀 45,341評論 1 311
  • 正文 獨居荒郊野嶺守林人離奇死亡例驹,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,563評論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了退唠。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片鹃锈。...
    茶點故事閱讀 39,731評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖瞧预,靈堂內(nèi)的尸體忽然破棺而出屎债,到底是詐尸還是另有隱情,我是刑警寧澤垢油,帶...
    沈念sama閱讀 35,430評論 5 343
  • 正文 年R本政府宣布盆驹,位于F島的核電站,受9級特大地震影響滩愁,放射性物質(zhì)發(fā)生泄漏躯喇。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,036評論 3 326
  • 文/蒙蒙 一硝枉、第九天 我趴在偏房一處隱蔽的房頂上張望廉丽。 院中可真熱鬧,春花似錦妻味、人聲如沸正压。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,676評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽焦履。三九已至,卻和暖如春雏逾,著一層夾襖步出監(jiān)牢的瞬間嘉裤,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,829評論 1 269
  • 我被黑心中介騙來泰國打工栖博, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留屑宠,地道東北人。 一個月前我還...
    沈念sama閱讀 47,743評論 2 368
  • 正文 我出身青樓笛匙,卻偏偏與公主長得像侨把,于是被迫代替她去往敵國和親犀变。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,629評論 2 354

推薦閱讀更多精彩內(nèi)容