this_原型鏈_繼承

問題1: apply、call 捂襟、bind有什么作用咬腕,什么區(qū)別

apply ,call,bind都會改變函數(shù)的執(zhí)行上下文,就是改變函數(shù)的this指向葬荷。

apply和call都是不會改變原函數(shù)涨共,但是參數(shù)不一樣apply的參數(shù)是數(shù)組。

bind是會創(chuàng)建一個新的函數(shù)宠漩,當(dāng)被調(diào)用的時候举反,this還是指向bind()的第一個參數(shù)。而且這個新函數(shù)再次使用call或apply時失效扒吁。
從apply火鼻,bind,call的使用可以從以下代碼思路出發(fā):

var obj = {
  x: 81,
  getX: function() {
    return this.x;
  }
};

alert(obj.getX.bind(obj)());
alert(obj.getX.call(obj));
alert(obj.getX.apply(obj));
var age=19;
var k={
  age:18,
  f:function (){
     return this.age;
  }

}
var p={
  age:39
}

var f2=k.f.bind(p);

console.log(f2());//39,this指向的是p

console.log(f2.call(window));//39雕崩,因為bind()創(chuàng)建的函數(shù)的this還是指向之前bind()第一個參數(shù)p魁索,this始終不變

console.log(f2.apply(k));//39,因為bind()創(chuàng)建的函數(shù)的this還是指向之前bind()第一個參數(shù)p盼铁,this始終不變

var f3=k.f.call(window);
console.log(f3());//error粗蔚,因為call無法產(chǎn)生一個新的函數(shù)

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

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

輸出的是John
可以這么思考 john.sayHi().call(john);

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

func() 
function func() { 
  alert(this)
}

輸出的是window
思考:func().call(window);this 就是call函數(shù)的參數(shù)饶火。

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

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

執(zhí)行結(jié)果:
console.log(this)輸出的是 document
而setTimeout種輸出的console.log(this)
輸出是window
因為setTimeout的this無論在哪個位置指向的都是window

問題5:下面代碼輸出什么鹏控,why

var john = { 
  firstName: "John" 
}

function func() { 
  alert( this.firstName )
}
func.call(john)

輸出的結(jié)果是:
John 因為func.call(john)中將this改為了指向john對象

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

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

問題是this.showMsg()中this的指向問題
修改如下:

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

module.showMsg();

https://jsbin.com/dazigurisi/5/edit?html,js,console,output

總結(jié)this的使用:

大部分的函數(shù)調(diào)用都將call方法省略了,而call的理解就如同一個對象調(diào)用一個方法当辐,而this則是只call的第一個參數(shù)抖僵。
修改setTImeout或者setInterval的this用bind的方法

image.png

網(wǎng)址為:https://stackoverflow.com/questions/11366643/how-do-i-change-scope-of-this-in-setinterval-and-settimeout-functions
修改click的this指向用bind方法如下:

image.png

網(wǎng)址為:https://stackoverflow.com/questions/5490448/how-do-i-pass-the-this-context-into-an-event-handler
一篇方方介紹了JS 里為什么會有 this

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

方方的一篇關(guān)于new 到底是干什么的
https://zhuanlan.zhihu.com/p/23987456

解釋:關(guān)于new到底是干什么的,我在方方的一篇文章中找到了以下觀點(diǎn):

不用創(chuàng)建臨時對象缘揪,因為 new 會幫你做(你使用「this」就可以訪問到臨時對象)耍群;
不用綁定原型,因為 new 會幫你做(new 為了知道原型在哪找筝,所以指定原型的名字為 prototype)世吨;
不用 return 臨時對象,因為 new 會幫你做呻征;
不要給原型想名字了,因為 new 指定名字為 prototype罢浇。

總結(jié)下來就是new其實(shí)就是返回了一個對象陆赋,這個對象在new的過程中自動創(chuàng)建了一個_ _proto _ 屬性,這個對象中會復(fù)制構(gòu)造函數(shù)自己所擁有的內(nèi)容嚷闭。同時 _proto _ _這個屬性會指向構(gòu)造函數(shù)的原型對象攒岛。

問題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();
image.png

關(guān)系為:
p._ _ proto _ _ ==Peroson.prototype ;
Person.prototype.constructor ==Person;
p.__ proto__.constructor==Person;
Person.prototype.__ proto __ ==Object.prototype;
p. __ proto__.__ proto __ ==Object.prototype;
p. __ proto__.__ proto __ ==Person.prototype.__ proto __;
Object. __ proto __ =null;

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

image.png

toSting()是object.prototype中的
P先從proto中查找是否有toString()方法,如果沒有就從p.proto.proto中查找帽蝶,一直沿著原型鏈查找赦肋,直到object的prototype中找到toString方法

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

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

代碼如下:

var str = 'ahbbccdeddddfg';

String.prototype.getMostOften=function()
{
  var str={};
  var key;
  for(var i=0;i<this.length;i++)
    {
      key=this[i];
      if(str[key])
        {
          str[key]++;
        }
      else
        {
          str[key]=1;
        }
    }
  var max=0,maxkey;
  for(var key in str)
    {
      if(str[key]>max)
        {
          max=str[key];
          maxkey=key;
        }
    }
  return ("出現(xiàn)最多的字符是:"+maxkey+","+"共出現(xiàn)了"+max+"次");
}
var ch = str.getMostOften();
console.log(ch); //d , 因為d 出現(xiàn)了5次
image.png

問題10: instanceof有什么作用励稳?內(nèi)部邏輯是如何實(shí)現(xiàn)的佃乘?

instanceof操作符判斷一個對象是不是某個類的實(shí)例
instanceof依據(jù)原型鏈上的 _ proto _屬性指向了構(gòu)造函數(shù)的prototype

function _instanceof(fn,fn2)
{ 
  var pointer=fn.__proto__;
   while(pointer)
   {
     if(pointer==fn2.prototype)
     {
       return true;
     }
     else
     {
       pointer=pointer.__proto__;
     }
   }
  return false;
}
var arr=[1,2];
var fn2=Object;
console.log(_instanceof(arr, Array));
console.log(_instanceof(arr, fn2));
image.png

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

繼承是指獲取類的屬性,類的方法
作用有
1.子類通過繼承了父類的屬性和方法驹尼,就不需要重復(fù)代碼了
2.子類可以重寫和擴(kuò)展父類的屬性和方法趣避,但是又不會影響父類

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

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

第一種寫法是:p1的內(nèi)部有name,sex屬性和printName方法扶欣,p1的 _ _ proto _ _ 指向People的prototype對象
第二種寫法是p1的內(nèi)部有name鹅巍,sex屬性,p1的 _ _ proto_ _指向People的prototype對象,printName方法存放在Person的prototype對象中

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

object.create()創(chuàng)建一個新對象骆捧,并且該對象的原型指向Object.create()的第一個參數(shù)對象澎羞。

var f={a:1,b:3};
var s=Object.create(f);
console.log(s.__proto__==f);
image.png

兼容性:

凡實(shí)現(xiàn)ECS5標(biāo)準(zhǔn)的瀏覽器,都能使用敛苇,IE9以上

問題14: hasOwnProperty有什么作用妆绞? 如何使用?

              hasOwnProperty是判斷一個屬性是否是對象自己所擁有的屬性而不是原型對象中的枫攀。
var buz = {
    fog: 'stack'
};

for (var name in buz) {
    if (buz.hasOwnProperty(name)) {
        alert("this is fog (" + name + ") for sure. Value: " + buz[name]);
    }
    else {
        alert(name); // toString or something else
    }
}

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

call作用是讓Male繼承Person的name括饶,sex屬性

問題16: 補(bǔ)全代碼,實(shí)現(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.printName();

修改代碼如下:

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

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

function Male(name, sex, age){
   Person.call(this,name,sex);
   this.age=age;
}
//將Male的原型對象指向Person来涨,使用create方法是創(chuàng)建一個新的對象图焰,且新函數(shù)的原型對象與Person的原型對象相同。這樣做的原因是為了防止
Male修改的時候影響父元素的原型對象蹦掐。
Male.prototype=Object.create(Person.prototype);

Male.prototype.constructor=Male;

Male.prototype.getAge = function(){
    console.log(this.age);
};

var ruoyu = new Male('若愚', '男', 27);
ruoyu.printName();
image.png

總結(jié):對于this的思考技羔,this就是call函數(shù)傳入的第一個參數(shù)。函數(shù)調(diào)用的時候引入call思考就會很任意的明白this的指向了卧抗。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末藤滥,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子社裆,更是在濱河造成了極大的恐慌拙绊,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,542評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件泳秀,死亡現(xiàn)場離奇詭異标沪,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)晶默,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,822評論 3 394
  • 文/潘曉璐 我一進(jìn)店門谨娜,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人磺陡,你說我怎么就攤上這事趴梢。” “怎么了币他?”我有些...
    開封第一講書人閱讀 163,912評論 0 354
  • 文/不壞的土叔 我叫張陵坞靶,是天一觀的道長。 經(jīng)常有香客問我蝴悉,道長彰阴,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,449評論 1 293
  • 正文 為了忘掉前任拍冠,我火速辦了婚禮尿这,結(jié)果婚禮上簇抵,老公的妹妹穿的比我還像新娘。我一直安慰自己射众,他們只是感情好碟摆,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,500評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著叨橱,像睡著了一般典蜕。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上罗洗,一...
    開封第一講書人閱讀 51,370評論 1 302
  • 那天愉舔,我揣著相機(jī)與錄音,去河邊找鬼伙菜。 笑死轩缤,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的贩绕。 我是一名探鬼主播典奉,決...
    沈念sama閱讀 40,193評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼丧叽!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起公你,我...
    開封第一講書人閱讀 39,074評論 0 276
  • 序言:老撾萬榮一對情侶失蹤踊淳,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后陕靠,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體迂尝,經(jīng)...
    沈念sama閱讀 45,505評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,722評論 3 335
  • 正文 我和宋清朗相戀三年剪芥,在試婚紗的時候發(fā)現(xiàn)自己被綠了垄开。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,841評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡税肪,死狀恐怖溉躲,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情益兄,我是刑警寧澤锻梳,帶...
    沈念sama閱讀 35,569評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站净捅,受9級特大地震影響疑枯,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜蛔六,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,168評論 3 328
  • 文/蒙蒙 一荆永、第九天 我趴在偏房一處隱蔽的房頂上張望废亭。 院中可真熱鬧,春花似錦具钥、人聲如沸豆村。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,783評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽你画。三九已至,卻和暖如春桃漾,著一層夾襖步出監(jiān)牢的瞬間坏匪,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,918評論 1 269
  • 我被黑心中介騙來泰國打工撬统, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留适滓,地道東北人。 一個月前我還...
    沈念sama閱讀 47,962評論 2 370
  • 正文 我出身青樓恋追,卻偏偏與公主長得像凭迹,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子苦囱,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,781評論 2 354

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

  • 1. apply嗅绸、call 、bind有什么作用撕彤,什么區(qū)別鱼鸠? call ,apply的作用:調(diào)用一個函數(shù),傳入函數(shù)...
    Rising_suns閱讀 395評論 0 0
  • apply羹铅、call 蚀狰、bind有什么作用,什么區(qū)別 apply:fn.apply( obj职员,])將fn函數(shù)里的t...
    邵志遠(yuǎn)閱讀 493評論 0 0
  • this 相關(guān)問題 問題1: apply麻蹋、call 有什么作用,什么區(qū)別 Javascript的每個Functio...
    Maggie_77閱讀 595評論 0 0
  • 一焊切、this 相關(guān)問題 知乎上關(guān)于this的解答 this 的值到底是什么扮授?一次說清楚 this 的工作原理在js...
    66dong66閱讀 552評論 0 0
  • 通過題目來熟悉this,原型鏈专肪,繼承 開胃菜----this 1. apply糙箍、call、bind有什么作用,有什...
    JunVincetHuo閱讀 382評論 0 0