原型 繼承

this 相關(guān)問題

問題1: apply抬探、call 、bind有什么作用帆赢,什么區(qū)別

apply() 方法調(diào)用一個函數(shù), 其具有一個指定的this值小压,以及作為一個數(shù)組(或類似數(shù)組的對象)提供的參數(shù)。

fun.apply(thisArg, [argsArray])
// thisArg 在 fun 函數(shù)運行時指定的 this 值椰于。
// argsArray 一個數(shù)組或者類數(shù)組對象

call() 方法調(diào)用一個函數(shù), 其具有一個指定的this值和分別地提供的參數(shù)(參數(shù)的列表)怠益。

fun.call(thisArg[, arg1[, arg2[, ...]]])
// thisArg在fun函數(shù)運行時指定的this值。
// arg1, arg2, ...指定的參數(shù)列表瘾婿。

bind()方法創(chuàng)建一個新的函數(shù), 當被調(diào)用時蜻牢,將其this關(guān)鍵字設(shè)置為提供的值,在調(diào)用新函數(shù)時偏陪,在任何提供之前提供一個給定的參數(shù)序列抢呆。

fun.bind(thisArg[, arg1[, arg2[, ...]]])
// thisArg 當綁定函數(shù)被調(diào)用時,該參數(shù)會作為原函數(shù)運行時的 this 指向笛谦。當使用new操作符調(diào)用綁定函數(shù)時抱虐,該參數(shù)無效。
// arg1, arg2, ...指定的參數(shù)列表饥脑。

問題2: 以下代碼輸出什么?

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

問題3: 下面代碼輸出什么恳邀,為什么

func() 
function func() { 
  alert(this)
}
// 瀏覽器彈出提示:[Object window]  this是指調(diào)用函數(shù)的對象懦冰,若無指定對象,則默認為window

問題4:下面代碼輸出什么

document.addEventListener('click', function(e){
    console.log(this);
    setTimeout(function(){
        console.log(this);
    }, 200);
}, false);
// #document 
// window setTimeout的函數(shù)里的this是全局變量

問題5:下面代碼輸出什么谣沸,why

var john = { 
  firstName: "John" 
}

function func() { 
  alert( this.firstName )
}
func.call(john)
// John  因為call的作用是將括號內(nèi)的john指定為this來調(diào)用func

問題6: 以下代碼有什么問題儿奶,如何修改

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

// this指向的不是對象實例,它不包含showMsg屬性
修改
var module= {
  bind: function(){
    var __this = this
    $btn.on('click', function(){
      console.log(__this) //this指什么
      __this.showMsg();
    })
  },
  
  showMsg: function(){
    console.log('饑人谷');
  }
}

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

問題7:有如下代碼鳄抒,解釋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();

// Person是構(gòu)造函數(shù)贤重,p 是 Person 的實例對象
// prototype是p的對象原型茬祷,p從prototype繼承方法sayName,p的__proto__指向其構(gòu)造函數(shù)的prototype
// constructor屬性在prototype對象中并蝗,默認指向prototype對象所在的構(gòu)造函數(shù)

問題8: 上例中祭犯,對對象 p可以這樣調(diào)用 p.toString()。toString是哪里來的? 畫出原型圖?并解釋什么是原型鏈滚停。

從Object()中繼承來沃粗。p.proto.proto.toString()

image.png

原型鏈: 對象的屬性和方法,有可能是定義在自身键畴,也有可能是定義在它的原型對象最盅。由于原型本身也是對象,又有自己的原型起惕,所以形成了一條原型鏈(prototype chain)涡贱。

問題9:對String做擴展,實現(xiàn)如下方式獲取字符串中頻率最高的字符

var str = 'ahbbccdeddddfg';
str.__proto__.getMostOften = function () {
  var arr = this
  var count = 0
  var most = 0
  var value
  for (var i = 0; i < arr.length; i++){
    for (j = 0; j < arr.length; j++){
      if(arr[i] === arr[j]){
        count += 1
      }
    }
    if (count > most){
      value = arr[i]
      most = count
    }
    count = 0
  }
  return value
}
var ch = str.getMostOften();
console.log(ch); //d , 因為d 出現(xiàn)了5次

問題10: instanceOf有什么作用惹想?內(nèi)部邏輯是如何實現(xiàn)的问词?

instanceof 一般用于判斷一個變量是否為某個對象的實例。
查找某個變量的原型鏈上是否有某個對象的prototype嘀粱。是則返回true激挪,否則為false

繼承相關(guān)問題

問題11:繼承有什么作用?

繼承可以讓某個類型的對象獲得另一個類型的對象的屬性的方法,讓其可以使用現(xiàn)有類的所有功能草穆,并在無需重新編寫原來的類的情況下對這些功能進行擴展灌灾。

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

//方法1

function People(name, sex){
    this.name = name;
    this.sex = sex;
    this.printName = function(){
        console.log(this.name);
    }
}
var p1 = new People('饑人谷', 2)

//方法2

function Person(name, sex){
    this.name = name;
    this.sex = sex;
}

Person.prototype.printName = function(){
    console.log(this.name);
}
var p1 = new Person('若愚', 27);

方法1每創(chuàng)建一個實例都會給它創(chuàng)建一個printName方法,這些實例printName方法作用相同悲柱,但是為不同的函數(shù)锋喜,會占用不同的內(nèi)存空間,造成資源的浪費;
而方法2 創(chuàng)建實例對象則只是引用prototype的方法嘿般,所有實例的sayName都是一個方法段标,不會造成資源浪費。

問題13: Object.create 有什么作用炉奴?兼容性如何逼庞?

Object.create接受一個對象作為參數(shù),然后以它為原型瞻赶,返回一個實例對象赛糟。該實例完全繼承繼承原型對象的屬性。
Object.create方法的實質(zhì)是新建一個構(gòu)造函數(shù)F砸逊,然后讓F.prototype屬性指向參數(shù)對象obj璧南,最后返回一個F的實例,從而實現(xiàn)讓該實例繼承obj的屬性师逸。

兼容性

image.png
image.png

問題14: hasOwnProperty有什么作用司倚? 如何使用?

hasOwnProperty 可以判斷某個屬性定義在對象自身篓像,還是定義在原型鏈上动知。

Date.hasOwnProperty('length')
// true

Date.hasOwnProperty('toString')
// false

問題15:如下代碼中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;
}
在創(chuàng)建Male實例對象時,這個this是指實例對象员辩,
call作用是讓實例對象調(diào)用Person函數(shù)實現(xiàn)繼承Person內(nèi)屬性的目的

問題16: 補全代碼盒粮,實現(xiàn)繼承

function Person(name, sex){
    this.name = name
    this.sex = sex
}

Person.prototype.getName = function(){
    console.log(this.name)
};    

function Male(name, sex, age){
    Person.call(this, name, sex)
    this.age = age
}
Male.prototype = Object.create(Person.prototype)
Male.prototype.constructor = Male
Male.prototype.printName = Person.prototype.getName
Male.prototype.getAge = function(){
    console.log(this.age)
};

var ruoyu = new Male('若愚', '男', 27)
ruoyu.printName()
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市屈暗,隨后出現(xiàn)的幾起案子拆讯,更是在濱河造成了極大的恐慌,老刑警劉巖养叛,帶你破解...
    沈念sama閱讀 222,807評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異宰翅,居然都是意外死亡弃甥,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評論 3 399
  • 文/潘曉璐 我一進店門汁讼,熙熙樓的掌柜王于貴愁眉苦臉地迎上來淆攻,“玉大人,你說我怎么就攤上這事嘿架∑可海” “怎么了?”我有些...
    開封第一講書人閱讀 169,589評論 0 363
  • 文/不壞的土叔 我叫張陵耸彪,是天一觀的道長伞芹。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么唱较? 我笑而不...
    開封第一講書人閱讀 60,188評論 1 300
  • 正文 為了忘掉前任扎唾,我火速辦了婚禮,結(jié)果婚禮上南缓,老公的妹妹穿的比我還像新娘胸遇。我一直安慰自己,他們只是感情好汉形,可當我...
    茶點故事閱讀 69,185評論 6 398
  • 文/花漫 我一把揭開白布纸镊。 她就那樣靜靜地躺著,像睡著了一般概疆。 火紅的嫁衣襯著肌膚如雪薄腻。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,785評論 1 314
  • 那天届案,我揣著相機與錄音庵楷,去河邊找鬼。 笑死楣颠,一個胖子當著我的面吹牛尽纽,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播童漩,決...
    沈念sama閱讀 41,220評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼弄贿,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了矫膨?” 一聲冷哼從身側(cè)響起差凹,我...
    開封第一講書人閱讀 40,167評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎侧馅,沒想到半個月后危尿,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,698評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡馁痴,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,767評論 3 343
  • 正文 我和宋清朗相戀三年谊娇,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片罗晕。...
    茶點故事閱讀 40,912評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡济欢,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出小渊,到底是詐尸還是另有隱情法褥,我是刑警寧澤,帶...
    沈念sama閱讀 36,572評論 5 351
  • 正文 年R本政府宣布酬屉,位于F島的核電站半等,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜酱鸭,卻給世界環(huán)境...
    茶點故事閱讀 42,254評論 3 336
  • 文/蒙蒙 一吗垮、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧凹髓,春花似錦烁登、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至赌躺,卻和暖如春狼牺,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背礼患。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評論 1 274
  • 我被黑心中介騙來泰國打工是钥, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人缅叠。 一個月前我還...
    沈念sama閱讀 49,359評論 3 379
  • 正文 我出身青樓悄泥,卻偏偏與公主長得像,于是被迫代替她去往敵國和親肤粱。 傳聞我的和親對象是個殘疾皇子弹囚,可洞房花燭夜當晚...
    茶點故事閱讀 45,922評論 2 361

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