JS之面向?qū)ο?/h1>

JavaScript是基于原型(prototype), 沒(méi)有python中class 的概念氮昧。

   var Cartoon={
         name:'Micky Mouse',
         height:15,
         run:function () {
            console.log(this.name+'is quacking')
         }
     };

     function createCartoon(name) {
         var p = Object.create(Cartoon);
         p.name=name;
         return p
     }

     var p2 = createCartoon('Donald Duck');
     console.log(p2.name); //'Donald Duck'
    p2.run()   //'Donald Duck is running'

構(gòu)造函數(shù)
在JavaScript中所踊,可以用關(guān)鍵字new來(lái)調(diào)用這個(gè)函數(shù),并返回一個(gè)對(duì)象:

function Cat(name) {
         this.name = name;
         this.hello=function () {
             console.log('hello'+this.name)
         }
     }
var k1 = new Cat('kitty'); // new 別忘了寫
 k1.hello();

同上

function Cat(name) {   // 構(gòu)造函數(shù)首字母要大寫
        this.name=name
     }
     Cat.prototype.hello=function () {
         console.log('hello'+this.name)
     };
    var k1 = new Cat('kitty');
    k1.hello()

用Cat()創(chuàng)建的對(duì)象還從原型上獲得了一個(gè)constructor屬性沙咏,它指向函數(shù)Cat本身:

console.log(k1.constructor===Cat.prototype.constructor) //true

不寫new時(shí):

 function Robot(props) {
         this.name = props.name || 'John Doe';
         this.inventor = props.inventor || 'None'
     }
     Robot.prototype.sayHi = function () {
        console.log('hello,hello hello'+this.name + 'my inventor is '+ this.inventor)
             };
    function createNewRobot(props) {
        return new Robot(props || {})  // 在這里封裝new的相關(guān)操作
    }

傳參時(shí):

var r1 = createNewRobot({
        name:'David',
        inventor:'Alice'
    });
    r1.sayHi()

動(dòng)態(tài)原型創(chuàng)建對(duì)象

   function Factory(name,location) {
         this.name = name;
         this.location = location;
         if (typeof this.recruit !== 'function'){  //      判斷this.recruit這個(gè)屬性是不是function食茎,如果不是function則證明是第一次創(chuàng)建對(duì)象
             Factory.prototype.recruit = function () {
         console.log(this.name+'starting'+ ' in ' + this.location )

     };
         }

     }

    let f1 = new Factory('NNL','Jilin');
    console.log(f1.name,f1.location);
    f1.recruit()

原型和原型鏈

proto 和 prototype

image.png

prototype是函數(shù)才有的屬性
proto是每個(gè)對(duì)象都有的屬性

在大多數(shù)情況下, proto可以理解成構(gòu)造器原型丹锹, 即:

__proto__ === constructor.prototype
var a = {};
console.log(a.prototype);  //undefined
console.log(a.__proto__);  //Object {}

var b = function(){}
console.log(b.prototype);  //b {}
console.log(b.__proto__);  //function() {}
由于proto是任何對(duì)象都具有的屬性稀颁,同python一樣,JS中也是萬(wàn)物皆對(duì)象楣黍,所以會(huì)形成一條proto連接起來(lái)的鏈條匾灶,遞歸訪問(wèn)最終到頭,返回值是null租漂。

當(dāng)JS引擎查找對(duì)象的屬性時(shí)阶女,會(huì)先查找對(duì)象本身是否具有該屬性,如果不存在哩治,會(huì)在原型鏈上查找秃踩。

JS實(shí)現(xiàn)繼承的幾種方式

先定義一個(gè)父類

// 定義一個(gè)動(dòng)物類
function Animal (name) {
  // 屬性
  this.name = name || 'Animal';
  // 實(shí)例方法
  this.sleep = function(){
    console.log(this.name + ' is sleeping now');
  }
}
// 原型方法
Animal.prototype.eat = function(food) {
  console.log(this.name + ' is having ' + food);
};
1、原型鏈繼承(核心:將父類的實(shí)例作為子類的原型)
function Cat(){ 
}
Cat.prototype = new Animal();
Cat.prototype.name = 'cat';

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.eat('fish'));
console.log(cat.sleep());
console.log(cat instanceof Animal); //true 
console.log(cat instanceof Cat); //true

這種方法缺點(diǎn)太多业筏,例如憔杨,創(chuàng)建子類實(shí)例時(shí),無(wú)法向父類構(gòu)造函數(shù)傳參蒜胖,無(wú)法實(shí)現(xiàn)多繼承等消别,不推薦。

2台谢、構(gòu)造函數(shù)繼承(使用父類的構(gòu)造函數(shù)來(lái)增強(qiáng)子類實(shí)例寻狂,等于是復(fù)制父類的實(shí)例屬性給子類)
function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true

只能繼承父類的實(shí)例屬性和方法,不能繼承原型屬性/方法, 不推薦朋沮。

3蛇券、實(shí)例繼承(為父類實(shí)例添加新特性,作為子類實(shí)例返回)
function Cat(name){
  var instance = new Animal();
  instance.name = name || 'Tom';
  return instance;
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // false

不支持多繼承,不推薦纠亚。

4塘慕、拷貝繼承
function Cat(name){
  var animal = new Animal();
  for(var p in animal){
    Cat.prototype[p] = animal[p];
  }
  Cat.prototype.name = name || 'Tom';
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true

無(wú)法獲取父類不可枚舉的方法(不可枚舉方法,不能使用for in 訪問(wèn)到)不推薦菜枷。

5苍糠、組合寄生繼承
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

  • 序言:七十年代末叁丧,一起剝皮案震驚了整個(gè)濱河市啤誊,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌拥娄,老刑警劉巖蚊锹,帶你破解...
    沈念sama閱讀 216,591評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異稚瘾,居然都是意外死亡牡昆,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,448評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門摊欠,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)丢烘,“玉大人,你說(shuō)我怎么就攤上這事些椒〔ネ” “怎么了?”我有些...
    開封第一講書人閱讀 162,823評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵免糕,是天一觀的道長(zhǎng)赢乓。 經(jīng)常有香客問(wèn)我,道長(zhǎng)石窑,這世上最難降的妖魔是什么牌芋? 我笑而不...
    開封第一講書人閱讀 58,204評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮松逊,結(jié)果婚禮上躺屁,老公的妹妹穿的比我還像新娘。我一直安慰自己经宏,他們只是感情好犀暑,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,228評(píng)論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著烛恤,像睡著了一般母怜。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上缚柏,一...
    開封第一講書人閱讀 51,190評(píng)論 1 299
  • 那天苹熏,我揣著相機(jī)與錄音,去河邊找鬼。 笑死轨域,一個(gè)胖子當(dāng)著我的面吹牛袱耽,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播干发,決...
    沈念sama閱讀 40,078評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼朱巨,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了枉长?” 一聲冷哼從身側(cè)響起冀续,我...
    開封第一講書人閱讀 38,923評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎必峰,沒(méi)想到半個(gè)月后洪唐,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,334評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡吼蚁,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,550評(píng)論 2 333
  • 正文 我和宋清朗相戀三年凭需,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片肝匆。...
    茶點(diǎn)故事閱讀 39,727評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡粒蜈,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出旗国,到底是詐尸還是另有隱情枯怖,我是刑警寧澤,帶...
    沈念sama閱讀 35,428評(píng)論 5 343
  • 正文 年R本政府宣布粗仓,位于F島的核電站嫁怀,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏借浊。R本人自食惡果不足惜塘淑,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,022評(píng)論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望蚂斤。 院中可真熱鬧存捺,春花似錦、人聲如沸曙蒸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,672評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)纽窟。三九已至肖油,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間臂港,已是汗流浹背森枪。 一陣腳步聲響...
    開封第一講書人閱讀 32,826評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工视搏, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人县袱。 一個(gè)月前我還...
    沈念sama閱讀 47,734評(píng)論 2 368
  • 正文 我出身青樓浑娜,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親式散。 傳聞我的和親對(duì)象是個(gè)殘疾皇子筋遭,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,619評(píng)論 2 354

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

  • 電視里播放著美食節(jié)目,而我則迷迷糊糊的躺在沙發(fā)上睡著了暴拄。 電視里的聲音若隱若離漓滔,一身酸痛,特別是兩個(gè)手臂揍移,這幾天不...
    蕾蕾lcm閱讀 135評(píng)論 0 0
  • 兒子今天還是沒(méi)收心那伐,還是一個(gè)勁的想著玩。由于他說(shuō)他在學(xué)校就把作業(yè)寫完了石蔗,我便讓他放松了兩天罕邀。今天中午我的感...
    凱然寶貝閱讀 226評(píng)論 0 0
  • “周而復(fù)始诉探,結(jié)局還是失去你” 點(diǎn)點(diǎn)憾事,成為了今日的你我棍厌。 ① 那時(shí)還流行玩QQ肾胯,他的個(gè)性簽名總寫著:“我如果愛(ài)你...
    林穆閱讀 312評(píng)論 0 0
  • [algorithm.html](https://www.runoob.com/w3cnote/ten-sorti...
    司徒伯明閱讀 209評(píng)論 0 0
  • 三八理論,就是上帝給了每個(gè)人每天公平的三個(gè)8小時(shí)耘纱,第一個(gè)8小時(shí)大家都在工作敬肚,第二個(gè)8小時(shí)大家都在睡覺(jué),人與人的區(qū)別...
    若素_210e閱讀 73評(píng)論 0 0