this_原型鏈_繼承

apply、call 坦辟、bind有什么作用刊侯,什么區(qū)別

  • apply()在使用一個(gè)指定 this 值和參數(shù)(參數(shù)以數(shù)組或類數(shù)組對(duì)象的形式存在)的情況下調(diào)用某個(gè)函數(shù)的方法。fun.apply(thisArg[, argsArray])(只接受兩個(gè)參數(shù))
  • call():在使用一個(gè)指定的this值和若干個(gè)指定的參數(shù)值的前提下調(diào)用某個(gè)函數(shù)或方法锉走。fun.call(thisArg[, arg1[, arg2[, ...]]])(接受的參數(shù)個(gè)數(shù)沒(méi)有上限)
  • bind()方法創(chuàng)建一個(gè)新的函數(shù), 當(dāng)被調(diào)用時(shí)藕届,將其this關(guān)鍵字設(shè)置為提供的值,在調(diào)用新函數(shù)時(shí)亭饵,在任何提供之前提供一個(gè)給定的參數(shù)序列休偶。
    區(qū)別:
    call()方法接受的是若干個(gè)參數(shù)的列表辜羊,而apply()方法接受的是一個(gè)包含多個(gè)參數(shù)的數(shù)組踏兜。

以下代碼輸出什么?

var john = { 
  firstName: "John" 
}
function func() { 
  alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()  // 彈出 john hi!

下面代碼輸出什么,為什么

func() 
function func() { 
  alert(this)   // 彈出window
}  
因?yàn)榧钭保诤瘮?shù)內(nèi)被直接調(diào)用時(shí)this綁定到全局對(duì)象,window 就是該全局對(duì)象

下面代碼輸出什么

  document.addEventListener('click', function(e){
    console.log(this);   // #document
  setTimeout(function(){
    console.log(this);  // window
   }, 200);
}, false);

下面代碼輸出什么昔驱,why

  var john = { 
    firstName: "John" 
  }
  
  function func() { 
    alert( this.firstName )
  }
  func.call(john)    // call()調(diào)用一個(gè)函數(shù)疹尾,傳入函數(shù)執(zhí)行上下文及參數(shù), 彈出John

以下代碼有什么問(wèn)題骤肛,如何修改

  var module= {
    bind: function(){
      $btn.on('click', function(){
      console.log(this) //this指什么, 
    this.showMsg();
    })
  },

  showMsg: function(){
    console.log('饑人谷');
  }
}

this指的是$btn,而$btn沒(méi)有函數(shù)執(zhí)行

修改: 
   var module= {
      var _this = this; //  將this指向module的值賦值給_this給下面調(diào)用纳本。
      bind: function(){
        $btn.on('click', function(){
          _this.showMsg();
      })
    },

    showMsg: function(){
      console.log('饑人谷');
    }
  }

原型鏈相關(guān)問(wèn)題

有如下代碼,解釋Person腋颠、 prototype、proto淑玫、p朴艰、constructor之間的關(guān)聯(lián)。

function Person(name){
  this.name = name;
}
Person.prototype.sayName = function(){
  console.log('My name is :' + this.name);
}
var p = new Person("若愚")
p.sayName();

1、Preson是構(gòu)造函數(shù)侮穿,也是一個(gè)對(duì)象歌径。
2、p為Person的實(shí)例亲茅,擁有Person原型鏈上的屬性和方法
3、p.__proto__指向Person.prototype
4克锣、Person.prototype.constructor指向Person

上例中茵肃,對(duì)對(duì)象 p可以這樣調(diào)用 p.toString()。toString是哪里來(lái)的? 畫出原型圖?并解釋什么是原型鏈袭祟。

原型鏈.png

可以從原型圖中看出toString是Object.prototype的方法,p先通過(guò)p.__proto__找Person.prototype中的方法巾乳,然而沒(méi)找到您没。然后接著p.proto.proto就找到了toString

對(duì)String做擴(kuò)展氨鹏,實(shí)現(xiàn)如下方式獲取字符串中頻率最高的字符

  var str = 'ahbbccdeddddfg';
  var ch = str.getMostOften();
  console.log(ch); //d , 因?yàn)閐 出現(xiàn)了5次

實(shí)現(xiàn)方式:

  String prototype.getMostOften = function(){
    var obj = {};
    for(var i = 0; i< this.length; i++){
      var n = this[i];
      if(obj[n]){
        obj[n]++
      }else {
        obj[n] = 1
      }
    }

    var max = 0,
    key;
    for(var n in obj){
      if(obj[n]>max){
         max = obj[n];
         key = n;
      }
   }
  return key;
 }
 var str = 'ahbbccdeddddfg';
 var ch = str.getMostOften();
 console.log(ch);

instanceOf有什么作用欧募??jī)?nèi)部邏輯是如何實(shí)現(xiàn)的?

instanceof 用來(lái)檢查對(duì)象是否是構(gòu)造函數(shù)的實(shí)例仆抵。
內(nèi)部邏輯是判斷從原型鏈底端向上判斷原型鏈上的對(duì)象是否是否是該構(gòu)造函數(shù)的原型對(duì)象

function isInstanceOf(obj, fn){
  var oldpro = obj.__proto__;
  do{
    if(oldpro === fn.prototype){
        return true;
    }
    else {
        oldpro = oldpro.__proto__;
    }
  }while(oldpro)
    return false;
}

繼承相關(guān)問(wèn)題

繼承有什么作用?

繼承是指一個(gè)對(duì)象直接使用另一對(duì)象的屬性和方法。
作用

  • 子類擁有父類的屬性和方法镣丑,不需要重復(fù)寫代碼舔糖,修改時(shí)也只需修改一份代碼
  • 可以重寫和擴(kuò)展父類的屬性和代碼,又不影響父類本身

下面兩種寫法有什么區(qū)別?

1.jpg
12-1.jpg

12-2.jpg

從上兩圖可以看出:
方法一的寫法是屬性方法都寫入p1中剩盒;
方法二中的p1只有屬性namesex,方法綁定在Person.prototype屬性下慨蛙,p1可以繼承父類的屬性和方法。
這樣做的好處是節(jié)約代碼量期贫,提高性能跟匆。

Object.create 有什么作用?兼容性如何通砍?

Object.create() 方法會(huì)使用指定的原型對(duì)象及其屬性去創(chuàng)建一個(gè)新的對(duì)象。創(chuàng)建一個(gè)具有指定原型且可選擇性地包含指定屬性的對(duì)象封孙。
Object.create(proto[, propertiesObject])
Object.create()實(shí)現(xiàn)類式繼承

3.jpg

hasOwnProperty有什么作用迹冤? 如何使用?

hasOwnPerperty是Object.prototype的一個(gè)方法泡徙,可以判斷一個(gè)對(duì)象是否包含自定義屬性而不是原型鏈上的屬性,hasOwnProperty是JavaScript中唯一一個(gè)處理屬性但是不查找原型鏈的函數(shù)

1膜蠢、m.hasOwnProperty('name'); // true
2堪藐、m.hasOwnProperty('printName'); // false
3、Male.prototype.hasOwnProperty('printAge'); // true

如下代碼中call的作用是什么?

  function Person(name, sex){
    this.name = name;
    this.sex = sex;
  }
  function Male(name, sex, age){
    Person.call(this, name, sex);    //這里的 call 有什么作用
    this.age = age;
  }

call可以指定函數(shù)的this 礁竞,所以這里的call指定Person中的this為Male。從而讓函數(shù)Male可以調(diào)用Person的屬性杉辙。

補(bǔ)全代碼模捂,實(shí)現(xiàn)繼承

function Person(name, sex){
    // todo ...
}

Person.prototype.printName = function(){
  // todo ...
};    

function Male(name, sex, age){
   //todo ...
}

//todo ...
Male.prototype.getAge = function(){
//todo ...
};

var ruoyu = new Male('若愚', '男', 27);
ruoyu.printName();
繼承.jpg
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市枫绅,隨后出現(xiàn)的幾起案子泉孩,更是在濱河造成了極大的恐慌,老刑警劉巖并淋,帶你破解...
    沈念sama閱讀 216,372評(píng)論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異县耽,居然都是意外死亡句喷,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門唾琼,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人澎剥,你說(shuō)我怎么就攤上這事锡溯⊙埔Γ” “怎么了祭饭?”我有些...
    開(kāi)封第一講書人閱讀 162,415評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)叙量。 經(jīng)常有香客問(wèn)我倡蝙,道長(zhǎng)绞佩,這世上最難降的妖魔是什么寺鸥? 我笑而不...
    開(kāi)封第一講書人閱讀 58,157評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮品山,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘肘交。我一直安慰自己眼坏,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,171評(píng)論 6 388
  • 文/花漫 我一把揭開(kāi)白布酸些。 她就那樣靜靜地躺著檐蚜,像睡著了一般魄懂。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上闯第,一...
    開(kāi)封第一講書人閱讀 51,125評(píng)論 1 297
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼填帽。 笑死蛛淋,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的篡腌。 我是一名探鬼主播,決...
    沈念sama閱讀 40,028評(píng)論 3 417
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼嘹悼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼叛甫!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起其监,我...
    開(kāi)封第一講書人閱讀 38,887評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎限匣,沒(méi)想到半個(gè)月后抖苦,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,310評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡锌历,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,533評(píng)論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了哲身。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片辩涝。...
    茶點(diǎn)故事閱讀 39,690評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡勘天,死狀恐怖怔揩,靈堂內(nèi)的尸體忽然破棺而出怔锌,到底是詐尸還是另有隱情催束,我是刑警寧澤宽涌,帶...
    沈念sama閱讀 35,411評(píng)論 5 343
  • 正文 年R本政府宣布隘竭,位于F島的核電站可训,受9級(jí)特大地震影響绘梦,放射性物質(zhì)發(fā)生泄漏材蹬。R本人自食惡果不足惜实幕,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,004評(píng)論 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望堤器。 院中可真熱鬧昆庇,春花似錦闸溃、人聲如沸整吆。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 31,659評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)表蝙。三九已至,卻和暖如春府蛇,著一層夾襖步出監(jiān)牢的瞬間集索,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 32,812評(píng)論 1 268
  • 我被黑心中介騙來(lái)泰國(guó)打工欲诺, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人扰法。 一個(gè)月前我還...
    沈念sama閱讀 47,693評(píng)論 2 368
  • 正文 我出身青樓蛹含,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親塞颁。 傳聞我的和親對(duì)象是個(gè)殘疾皇子浦箱,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,577評(píng)論 2 353

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

  • 一祠锣、this 相關(guān)問(wèn)題 知乎上關(guān)于this的解答 this 的值到底是什么酷窥?一次說(shuō)清楚 this 的工作原理在js...
    66dong66閱讀 552評(píng)論 0 0
  • this 相關(guān)問(wèn)題 問(wèn)題1: apply、call 有什么作用伴网,什么區(qū)別 Javascript的每個(gè)Functio...
    Maggie_77閱讀 595評(píng)論 0 0
  • 深入詳解javascript之delete操作符深入javascript(六):instanceof 運(yùn)算符重新理...
    饑人谷_米彌輪閱讀 340評(píng)論 0 0
  • 1: apply动分、call 、bind有什么作用澜公,什么區(qū)別 call 和 apply 都是為了改變某個(gè)函數(shù)運(yùn)行時(shí)的...
    高進(jìn)哥哥閱讀 256評(píng)論 0 0
  • this 相關(guān)問(wèn)題 apply姆另、call 、bind有什么作用坟乾,什么區(qū)別? apply語(yǔ)法格式:function....
    小囧兔閱讀 268評(píng)論 0 0