面向?qū)ο蠡A二(原型鏈和原型)

人生就像一列開往墳墓的列車,路途上會有很多站匆浙,很難有人至始至終陪你走完全程安寺,當陪你的人要下車時,即便不舍首尼,也要心存感激挑庶,然后揮手告別言秸。---sunnyhuang

字符串問題

問題1:** apply、call 挠羔、bind有什么作用井仰,什么區(qū)別

bind:創(chuàng)建一個新函數(shù),當這個函數(shù)被調(diào)用的時候破加,第一個參數(shù)作為this值,之后的參數(shù)作為實參傳入到新函數(shù)中雹嗦。

call:調(diào)用函數(shù)范舀,并指定這個函數(shù)的this和傳入的若干個參數(shù)值。

apply:指定this值和以數(shù)組形式傳遞參數(shù)的情況下調(diào)用函數(shù)了罪。

作用: 從它們的用法中可以看出锭环,改變this,傳遞參數(shù)泊藕。

區(qū)別:首先是call和bind的區(qū)別辅辩,call是調(diào)用函數(shù),返回的是函數(shù)的返回值娃圆,而bind是創(chuàng)建一個新函數(shù)玫锋,就像是復制了別人的軀殼,改變了內(nèi)在讼呢,然后作為一個新東西使用撩鹿。然后call和apply的區(qū)別是,傳遞的實參不一樣悦屏,call是單個傳遞节沦,而apply是以數(shù)組的形式傳遞。

    var name="window"
    function Student(age){
        this.age=age
        this.name="student";
        this.say=function(){
            console.log(this.name);
            console.log(this.age);
        }
    }
    var fn1=new Student(22)
    fn1.say()
    var say1=fn1.say.call(window)
    // say1  undefined
    var fn2=new Student()
    var say2=fn2.say.bind(Student)
    //say2  function
    say2()
    

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

var john = { 
  firstName: "John" 
}
function func() { 
  alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()
//轉(zhuǎn)換這個代碼的執(zhí)行函數(shù)
//john.sayHi.call(john)
//所以輸出'John: hi!'

問題3: 下面代碼輸出什么础爬,為什么

func() //window
function func() { 
  alert(this)
}
//轉(zhuǎn)化這個代碼的執(zhí)行函數(shù)
//func.call(null) 在默認情況下甫贯,call中傳遞的是null,undefined的時候,this指向window
//所以call的第一值就是this看蚜,也就是window

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

document.addEventListener('click', function(e){
    console.log(this); //document
    setTimeout(function(){
        console.log(this); //window
    }, 200);
}, false);
//這里考察2個點 1. setTimeout的默認this值是window 2.事件處理程序中的this就是事件源DOM對象

問題5:下面代碼輸出什么叫搁,why

var john = { 
  firstName: "John" 
}
function func() { 
  alert( this.firstName )
}
func.call(john)  //John
//1. 由于call調(diào)用函數(shù)第一個值傳遞的是this
//2. 所以func函數(shù)的調(diào)用的this的值就是john

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

var module= {
  bind: function(){
    $btn.on('click', function(){
      console.log(this) //this指什么  這里的this指的是#btn
      this.showMsg();//這里的this指的是#btn
    })
  },
  
  showMsg: function(){
    console.log('饑人谷');
  }
}
//this的指向出現(xiàn)了問題失乾,事件監(jiān)聽函數(shù)中的this指向事件源常熙,但是事件源沒有showMsg()這個方法
//修改1
  bind: function(){
    var _this=this
    $btn.on('click', function(){
      _this.showMsg();
    })
  },
//修改2
  bind: function(){
    var _this=this
    $btn.on('click', function(){
        module.showMsg.bind(module)()
        //module.showMsg.call(module)
    })
  },

原型鏈問題

問題7:有如下代碼,解釋Person碱茁、 prototype裸卫、__proto__p纽竣、constructor之間的關聯(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. 首先明白茧泪,對于函數(shù)先研究原型prototype,對于對象研究__proto__原型鏈
  2. __proto__指向的是一個構(gòu)造函數(shù)的原型,constructor指向的是對應的構(gòu)造函數(shù)
  3. 因為所有函數(shù)都是由Function創(chuàng)建的聋袋,所以Function.prototype===被創(chuàng)建函數(shù).proto
  4. 一切函數(shù)的原型對象都是由Object函數(shù)創(chuàng)建的队伟,所以Function.prototype.proto都指向Object的prototype屬性。

解析

  • Person是構(gòu)造函數(shù)幽勒,p是Person生成的實例嗜侮。每一個函數(shù)在聲明的時候同時會有一個prototype屬性(是一個對象)。

  • Person.prototype.constructor === Person 構(gòu)造函數(shù)的原型的constructor的屬性指向相應的構(gòu)造函數(shù)

  • p.__ proto __= Person.prototype 實例化的對象的__ proto__屬性啥容,指向構(gòu)造函數(shù)的原型(這里想new到底做了什么)

    ?

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

原型鏈.png

有上圖可以看出:對象p是沒有toString()方法,所以它必須通過proto像上級尋找是否有toString()方法击吱,發(fā)現(xiàn)Person.prototype里面也沒有toString()方法,所以Person.prototype必須又向上級尋找遥昧,在Object.prototype中找到了toString()方法覆醇。像這樣的通過proto不斷的尋找屬性和方法,就是原型鏈炭臭,在自己的作用域中找到了就不會繼續(xù)想上尋找了永脓。

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

var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因為d 出現(xiàn)了5次
    String.prototype.getMostOften=function(){
        var obj={}
        //遍歷字符串
        for(let i=0;i<this.length;i++){
            if(!obj[this[i]]){
                obj[this.charAt(i)]=1;
            }
            else if(obj[this[i]]){
                obj[this.charAt(i)]++
            }
        }
        //console.log(obj)
        //遍歷這個對象的值
        var max=0,val; //假定一個最大值
        for(var key in obj){
            if(obj[key]>max){
                max=obj[key];
                val=key;

            }
        }
        return val;
    }
    var str = 'foajfljadlfjlajfl';
    var ch= str.getMostOften();
    console.log(ch)

問題10: instanceof有什么作用徽缚?內(nèi)部邏輯是如何實現(xiàn)的憨奸?

記住instanceof是作用于對象的,看看一個實例化的對象在其原型鏈上存不存在一個構(gòu)造函數(shù)的原型凿试。

object(對象) instanceof constructor(一個構(gòu)造函數(shù))

內(nèi)部邏輯:首先明白1. 每一個對象都一個__proto__屬性值指向創(chuàng)建它的構(gòu)造函數(shù)排宰。2.通過__proto__原型鏈會不斷的向上尋找,直到找到目標為止那婉。3. 所有對象都是通過Object對象實例化而成板甘。

function Person(){}
var p=new Person()
p instanceof Person   //true    因為p.__proto__===Person.prototype
p instanceof Object  //true 
Person.prototype={}  //重寫原型
p instanceof Person  //false  由于原型的重寫,它還是指向原來的详炬,而此時已經(jīng)不是Person的原型了

繼承相關問題

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

繼承的作用:

  1. 減少代碼的量盐类,實現(xiàn)復用代碼。
  2. 可以充分的理解面向?qū)ο蟮幕A

問題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);

二種寫法的區(qū)別:

  1. 想想第一種寫法呛谜,我們?nèi)绻麆?chuàng)建100個實例對象在跳,是不是每一個對象都會有printName這個方法。

  2. 但是有時候隐岛,不是所有對象都需要這個方法猫妙,這就加大了內(nèi)存的負擔。

  3. 如果我們按照第二種方法構(gòu)造函數(shù)聚凹,就能夠做到割坠,誰想用就用齐帚,不用就可以不用,只有一條代碼彼哼。

  4. 這二種的結(jié)構(gòu)都不一樣对妄,生成的實例對象擁有的屬性和方法都不一樣。

    總結(jié)

    1. 公共的屬性和方法就放在構(gòu)造函數(shù)中
    2. 有的需要有的不需要就放在構(gòu)造函數(shù)的原型中
    3. 方法到底是放在原型中還是構(gòu)造函數(shù)中敢朱,是根據(jù)需要和結(jié)構(gòu)而定

問題13: Object.create 有什么作用剪菱?兼容性如何?

創(chuàng)建一個指定原型的對象拴签,也可以添加相應屬性琅豆。

通常用于繼承,給一個對象的原型創(chuàng)建一個proto指向它的父類的原型篓吁,從而實現(xiàn)繼承

支持ie9以上(包括ie9),其他主流瀏覽器

function Parent(name,age){
  this.name=name;
  this.age=age;
}
Parent.prototype.say=function(){console.log("my name is "+this.name)}
function Child(name,age,sex){
  Parent.call(this,name,age); //繼承屬性
  this.sex=sex;
}
Child.prototype=Object.create(Parent.prototype)   //這里重寫了Child的原型蚪拦,并指定了Child.prototype的__proto__指向Parent.prototype
Child.prototype.walking=function(){console.log(this.sex)}
Child.prototype.constructor=Child;  //手動指定構(gòu)造函數(shù)
var c=new Child("hcc",24,"男")

問題14: hasOwnProperty有什么作用杖剪? 如何使用?

我們知道有些屬性是通過原型鏈獲得的驰贷,不一定都是自己的盛嘿,所以急需要一個方法來判定是不是屬于我們的

Object.prototype.hasOwnProperty()判定一個屬性是不是屬于這個對象本身

var obj={
  name:"hcc",
  age:24,
  say:function(){}
}
obj.hasOwnProperty('name')  //true
obj.hasOwnProperty('say')  //true
obj.hasOwnProperty('toString')  //false
obj.hasOwnProperty('hasOwnProperty' )  //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;
}

Person.call(this, name, sex); //這里的 call 有什么作用

  1. 調(diào)用Person這個函數(shù)

  2. 改變Person里面的this作用域

  3. 傳遞erson這個函數(shù)需要的相應參數(shù)

    所以這里變相的實現(xiàn)了Male繼承了Person的屬性

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

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

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

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

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

var ruoyu = new Male('若愚', '男', 27);
ruoyu.getName();
function Person(name, sex){
    this.name=name;
    this.sex=sex;
}
Person.prototype.getName = function(){
    return "my name is "+ 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.getAge = function(){
   return "my age is "+ this.age
}
var ruoyu = new Male('若愚', '男', 27);
ruoyu.getName();
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末括袒,一起剝皮案震驚了整個濱河市次兆,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌锹锰,老刑警劉巖芥炭,帶你破解...
    沈念sama閱讀 223,207評論 6 521
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異恃慧,居然都是意外死亡园蝠,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,455評論 3 400
  • 文/潘曉璐 我一進店門痢士,熙熙樓的掌柜王于貴愁眉苦臉地迎上來彪薛,“玉大人,你說我怎么就攤上這事怠蹂∩蒲樱” “怎么了?”我有些...
    開封第一講書人閱讀 170,031評論 0 366
  • 文/不壞的土叔 我叫張陵城侧,是天一觀的道長易遣。 經(jīng)常有香客問我,道長赞庶,這世上最難降的妖魔是什么训挡? 我笑而不...
    開封第一講書人閱讀 60,334評論 1 300
  • 正文 為了忘掉前任澳骤,我火速辦了婚禮,結(jié)果婚禮上澜薄,老公的妹妹穿的比我還像新娘为肮。我一直安慰自己,他們只是感情好肤京,可當我...
    茶點故事閱讀 69,322評論 6 398
  • 文/花漫 我一把揭開白布颊艳。 她就那樣靜靜地躺著,像睡著了一般忘分。 火紅的嫁衣襯著肌膚如雪棋枕。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,895評論 1 314
  • 那天妒峦,我揣著相機與錄音重斑,去河邊找鬼。 笑死肯骇,一個胖子當著我的面吹牛窥浪,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播笛丙,決...
    沈念sama閱讀 41,300評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼漾脂,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了胚鸯?” 一聲冷哼從身側(cè)響起骨稿,我...
    開封第一講書人閱讀 40,264評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎姜钳,沒想到半個月后坦冠,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,784評論 1 321
  • 正文 獨居荒郊野嶺守林人離奇死亡傲须,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,870評論 3 343
  • 正文 我和宋清朗相戀三年蓝牲,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片泰讽。...
    茶點故事閱讀 40,989評論 1 354
  • 序言:一個原本活蹦亂跳的男人離奇死亡例衍,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出已卸,到底是詐尸還是另有隱情佛玄,我是刑警寧澤,帶...
    沈念sama閱讀 36,649評論 5 351
  • 正文 年R本政府宣布累澡,位于F島的核電站梦抢,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏愧哟。R本人自食惡果不足惜奥吩,卻給世界環(huán)境...
    茶點故事閱讀 42,331評論 3 336
  • 文/蒙蒙 一哼蛆、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧霞赫,春花似錦腮介、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,814評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至旅东,卻和暖如春灭抑,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背抵代。 一陣腳步聲響...
    開封第一講書人閱讀 33,940評論 1 275
  • 我被黑心中介騙來泰國打工腾节, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人荤牍。 一個月前我還...
    沈念sama閱讀 49,452評論 3 379
  • 正文 我出身青樓禀倔,卻偏偏與公主長得像,于是被迫代替她去往敵國和親参淫。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,995評論 2 361

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