原型旧困、原型鏈稼锅、繼承

  • 原型鏈下端的屬性會屏蔽原型鏈上端的屬性(最下端為實例對象)
  • 構造函數(shù)創(chuàng)建的原型對象矩距,因為Foo.prototype.constructor === Foo(原型對象的構造器是構造函數(shù)Foo)
  • 構造函數(shù)首字母大寫是JavaScript世界的慣例!標識它是一個“類”
  • new調(diào)用普通函數(shù)就是變成了構造函數(shù)調(diào)用
  • 實例對象不是由構造函數(shù)構造的锣咒,實例的constructor有時候不等于構造函數(shù)毅整,比如重寫原型對象绽左,所以constroctor不表示由誰構造,避免使用實例對象的constructor屬性戏蔑。
  • 原型的機制就是指對象中的一個內(nèi)部鏈接引用另一個對象总棵,其本質(zhì)就是對象之間的關聯(lián)關系情龄。

創(chuàng)建關聯(lián)

es6之前需要拋棄原型對象,例如
Bar.prototype = Object.create(Foo.prototype)
es6語法不用拋棄鞍爱,例如Object.setPrototypeOf(Bar.prototype,Foo.prototype)
instance = Object.create(obj)

  • 找實例的祖先
  1. a instanceof Foo a的原型鏈上是否有Foo函數(shù)的原型(對象和函數(shù)的關系)
  2. Foo.prototype.isPrototypeOf(a) a的原型鏈上是否出現(xiàn)過Foo的原型(對象和對象的關系)
  3. 獲取原型 Object.getPrototypeOf(a) === Foo.prototype

原型prototype繼承(原型鏈繼承)

    function Animal(name,arr) {
      this.name = name;
      this.arr = arr;
      this.sleep = function () {
        console.log(this.name + '正在睡覺')
      }
    }
    Animal.prototype.eat = function (food) {
      console.log(this.name + '正在吃'+food)
    }
    function Cat() {
      
    }
    // 關鍵代碼
    Cat.prototype = new Animal()
    // 關鍵代碼
    Cat.prototype.constructor = Cat
    Cat.prototype.age= 2
    var cat1 = new Cat()
    var cat2 = new Cat()
    cat1.arr.push(1)
    // 優(yōu)缺點
    // 子類新增原型屬性和方法睹逃,必須在new Animal()之后執(zhí)行,無法實現(xiàn)多繼承
    // 創(chuàng)建子類實例時無法向超類傳遞參數(shù)躬柬,new Cat
    // 構造函數(shù)中引用類型的屬性arr,一個實例修改該屬性橄碾,其他實例都會使用修改后的值(引用類型值的共享問題)
  • 直接繼承proptotype
// 關鍵代碼
Cat.prototype = Animal.prototype
// 關鍵代碼
Cat.prototype.constructor = Cat
// 會把Animal的原型對象的constructor改了!
  • 構造函數(shù)繼承
    function Cat(name, age) {
      // 關鍵代碼
      Animal.call(this, name)
      // 關鍵代碼
      this.age = age
    }
    var car1 = new Cat('小黑', 2)
    // 優(yōu)缺點
    // 可以在子類構造函數(shù)中向超類函數(shù)傳遞參數(shù)
    // 子類可以實現(xiàn)多繼承琼掠,不能繼承原型鏈拒垃,方法函數(shù)都在構造函數(shù)中定義,無法復用
  • 原型鏈組合構造函數(shù)繼承
    function Cat(name, age) {
      // 關鍵代碼
      Animal.call(this, name)
      this.age = age
    }
    // 關鍵代碼
    Cat.prototype = new Animal()
    Cat.prototype.constructor = Cat
    var car1 = new Cat('小黑', 2)
    // 調(diào)用了兩次超類構造函數(shù)
    // 可以使用create
    Cat.prototype = Object.create(Animal.prototype);
  • 原型式繼承瓷蛙,使用空對象作為中介
    借助原型可以基于已有的對象創(chuàng)建新對象
    es5規(guī)范了該方法悼瓮,即Object.create()
    // o為超類原型
    function obj(o) {
      function F() {}
      F.prototype = o
      let f = new F()
      return f
    }
    或者
    function extend(Child, Parent) {
    var F = function(){};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;  
    }
  • 實例繼承
    function Cat(name, age) {
      var instance = new Animal()
      instance.age = age
      return instance
    }
    var car1 = new Cat('小黑', 2)
    var cat2 = Cat('小黑', 2)
    // 優(yōu)缺點
    // 不限制調(diào)用方式,不能實現(xiàn)多繼承
  • 拷貝繼承
   function extend2(Child, Parent) {
    var p = Parent.prototype;
    var c = Child.prototype;
    for (var i in p) {
      c[i] = p[i];
    }
    c.uber = p;
  }
  • 寄生式繼承
    // o為原型對象
    function createObj(o) {
      let clone = Object.create(o)
      clone.sayHi = function () {
        console.log('hi');
      }
      return clone
    }
    o1 = createObj(o)
    // 添加的方法不能被復用
  • 寄生組合構造函數(shù)繼承
// 通過create創(chuàng)建sub的prototype對象
    function Super(name) {
      this.name = name
      this.color = ['red', 'blue']
    }
    Super.prototype.sayHi = function () {
      console.log('hi');
    }
    function Sub(name, age) {
      Super.call(name)
      this.age = age
    }

    Sub.prototype = Object.create(Super.prototype)
    Sub.prototype.constructor = sub

    Sub.prototype.eat = function () {
      console.log('eat');
    }
    let o1 = new Sub('jack', 18)
    // 只調(diào)用一次超類構造函數(shù)艰猬,
最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末横堡,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子冠桃,更是在濱河造成了極大的恐慌命贴,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,635評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件食听,死亡現(xiàn)場離奇詭異胸蛛,居然都是意外死亡,警方通過查閱死者的電腦和手機玷室,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,543評論 3 399
  • 文/潘曉璐 我一進店門津肛,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事涯鲁⌒袷伲” “怎么了肩祥?”我有些...
    開封第一講書人閱讀 168,083評論 0 360
  • 文/不壞的土叔 我叫張陵檀蹋,是天一觀的道長舅逸。 經(jīng)常有香客問我水醋,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,640評論 1 296
  • 正文 為了忘掉前任授舟,我火速辦了婚禮,結果婚禮上署浩,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 68,640評論 6 397
  • 文/花漫 我一把揭開白布焕梅。 她就那樣靜靜地躺著,像睡著了一般弟蚀。 火紅的嫁衣襯著肌膚如雪级零。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,262評論 1 308
  • 那天发绢,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的痒玩。 我是一名探鬼主播褒脯,決...
    沈念sama閱讀 40,833評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼浇雹,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了抠蚣?” 一聲冷哼從身側響起距贷,我...
    開封第一講書人閱讀 39,736評論 0 276
  • 序言:老撾萬榮一對情侶失蹤闽撤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后贩据,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,280評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡葱绒,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,369評論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了荧止。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片兔朦。...
    茶點故事閱讀 40,503評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖沽甥,靈堂內(nèi)的尸體忽然破棺而出声邦,到底是詐尸還是另有隱情,我是刑警寧澤摆舟,帶...
    沈念sama閱讀 36,185評論 5 350
  • 正文 年R本政府宣布亥曹,位于F島的核電站,受9級特大地震影響恨诱,放射性物質(zhì)發(fā)生泄漏媳瞪。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,870評論 3 333
  • 文/蒙蒙 一照宝、第九天 我趴在偏房一處隱蔽的房頂上張望蛇受。 院中可真熱鬧,春花似錦厕鹃、人聲如沸兢仰。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,340評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽旨别。三九已至诗赌,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間秸弛,已是汗流浹背铭若。 一陣腳步聲響...
    開封第一講書人閱讀 33,460評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留递览,地道東北人叼屠。 一個月前我還...
    沈念sama閱讀 48,909評論 3 376
  • 正文 我出身青樓,卻偏偏與公主長得像绞铃,于是被迫代替她去往敵國和親镜雨。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,512評論 2 359

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