web前端-深入(2)-this_原型鏈_繼承

this 相關(guān)問題

問題1： apply、call 炬称、bind有什么作用汁果，什么區(qū)別

bind:返回一個(gè)函數(shù)，傳入第一個(gè)參數(shù)作為函數(shù)的this玲躯，第二個(gè)開始作為函數(shù)的參數(shù)

var obj1 = {
    name: 'Byron',
    fn : function(){
        console.log(this);
    }
};
obj3={a: 3};
var fn3=obj1.fn.bind(obj3);
fn3();  //obj3,this被替換了obj3

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

call:調(diào)用一個(gè)函數(shù)据德，傳入第一個(gè)參數(shù)作為函數(shù)的this鳄乏，隨后的參數(shù)作為argumenst傳入

var value=100;
function fn(a,b){
  console.log(this.value+a+b);
}
var obj={
  value:200
}
fn(3,5);   //108
fn.call(obj,3,5);   //208

apply:調(diào)用一個(gè)函數(shù)，傳入第一個(gè)參數(shù)作為函數(shù)的this棘利，第二個(gè)參數(shù)為一個(gè)數(shù)組橱野，數(shù)組內(nèi)為要傳入的參數(shù)

var value=100;
function fn(a,b){
  console.log(this.value+a+b);
}
var obj={
  value:200
}
fn(3,5);   //108
fn.apply(obj,[3,6]);  //209

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

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

問題3：下面代碼輸出什么，為什么

func() 
function func() { 
  alert(this)
}
//輸出window對(duì)象赡译，func()相當(dāng)于window.func(),this指向的是window對(duì)象

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

document.addEventListener('click', function(e){
    console.log(this);
    setTimeout(function(){
        console.log(this);
    }, 200);
}, false);
//->  #document
//綁定 document 之后仲吏，事件發(fā)生運(yùn)行的函數(shù)里的 this 指向綁定的對(duì)象

//-> [object Window]
//setTimeout不铆，setInterval中的延遲執(zhí)行代碼中的 this 永遠(yuǎn)都指向 window

問題5：下面代碼輸出什么蝌焚，why

var john = { 
  firstName: "John" 
}

function func() { 
  alert( this.firstName )
}
func.call(john)   //John
//本來(lái)函數(shù)里面的this指向的是window,但是函數(shù)調(diào)用了call()函數(shù)，函數(shù)里的this指向了john

問題6：以下代碼有什么問題誓斥，如何修改

var module= {
  bind: function(){
    $btn.on('click', function(){
      console.log(this) //this指什么
      this.showMsg();
    })
  },
  
  showMsg: function(){
    console.log('Ethan');
  }
}
//因?yàn)閠his在$btn綁定事件函數(shù)中只洒，所以this指向了$btn對(duì)象

//修改
var module= {
  bind: function(){
    $btn.on('click', function(){
      console.log(this)
      this.showMsg();
    }.bind(this))
  },
  
  showMsg: function(){
    console.log('Ethan');
  }
}

原型鏈相關(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的實(shí)例
//Person.prototype是Person構(gòu)造函數(shù)的原型對(duì)象
//Person.prototype里的constructor屬性指向Person
Person.prototype.constructor===Person   //true
//_proto_是p實(shí)例里的屬性框仔，指向Person.prototype
p._proto_===Person.prototype   //true

問題8：上例中舀武，對(duì)對(duì)象 p可以這樣調(diào)用 p.toString()。toString是哪里來(lái)的? 畫出原型圖?并解釋什么是原型鏈离斩。

原型鏈：對(duì)象的屬性和方法银舱，有可能是定義在自身，也有可能是定義在它的原型對(duì)象跛梗。由于原型對(duì)象本身也是對(duì)象寻馏，也有自己的原型，依次類推核偿，形成了一條原型鏈（prototype chain）诚欠。
如果一層層地上溯，所有對(duì)象的原型最終都可以上溯到Object.prototype漾岳，即Object構(gòu)造函數(shù)的prototype屬性指向的那個(gè)對(duì)象聂薪。Object.prototype對(duì)象的原型為null，而null沒有原型對(duì)象
「原型鏈」的作用是蝗羊，讀取對(duì)象的某個(gè)屬性時(shí)藏澳，JavaScript 引擎先尋找對(duì)象本身的屬性，如果找不到耀找，就到它的原型去找翔悠，如果還是找不到业崖，就到原型的原型去找。如果直到最頂層的Object.prototype還是找不到蓄愁，則返回undefined

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

var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因?yàn)閐 出現(xiàn)了5次
String.prototype.getMostOften=function(){
  var obj={};
  for(var i=0;i<this.length;i++){
    if(obj[this[i]]) {
      obj[this[i]]++;
    }
    else obj[this[i]]=1;
  }
  var num=0; str1='';
  for(var key in obj){
    if(obj[key]>num) {
      num=obj[key]; str1=key;
    }
  }
  return str1;
}

問題10： instanceOf有什么作用？?jī)?nèi)部邏輯是如何實(shí)現(xiàn)的撮抓？

//instanceOf 的作用是用來(lái)判斷對(duì)象是否是另一個(gè)對(duì)象的實(shí)例妇斤，并返回布爾值。
function _instanceOf(obj,fn){
    var proto=obj.__proto__;
    do{
        if(proto===fn.prototype){
            return true;
        }else{
            proto=proto.__proto__
        }
    }while(proto)
    return false;
}
var arr=[1,2,3];
_instanceOf(arr,Array);//true
_instanceOf(arr,Object)//true

繼承相關(guān)問題

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

子類擁有父類的屬性和方法丹拯，不需要重復(fù)寫代碼站超，修改時(shí)也只需修改一份代碼
可以重寫和擴(kuò)展父類的屬性和代碼，又不影響父類本身

問題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);
//方法一：將 printName 方法定義在構(gòu)造函數(shù) People 內(nèi)乖酬，每次new一個(gè)實(shí)例出來(lái)死相，都會(huì)先聲明一個(gè)函數(shù)，
//把函數(shù)放入printName屬性中咬像，雖然不會(huì)報(bào)錯(cuò)算撮，但是每次聲明的都是一樣的函數(shù)，增加了代碼量县昂。

//方法二：將 printName 方法定義在 Person 的原型對(duì)象內(nèi)肮柜，這樣new一個(gè)實(shí)例出來(lái)，
//即使內(nèi)部沒有定義倒彰，還是能夠通過原型鏈得到此方法审洞，節(jié)約了內(nèi)存。

問題13： Object.create 有什么作用狸驳？兼容性如何预明？

Object.create() 方法創(chuàng)建一個(gè)擁有指定原型和若干個(gè)指定屬性的對(duì)象。
Object.create(proto, [ propertiesObject ]):第一個(gè)參數(shù)必選耙箍，是一個(gè)對(duì)象的原型撰糠，第二個(gè)開始參數(shù)可選，為屬性對(duì)象
Object.create是 ES5 中規(guī)定的辩昆，IE9 以下無(wú)效阅酪。

function grandfather(name) {
    this.name = name;
};

grandfather.prototype.say = function() {
    console.log('My name is ' + this.name);
};

function father(name) {
    grandfather.call(this,name);  //調(diào)用grandfather,并把函數(shù)內(nèi)的this替換了
};

father.prototype = Object.create(grandfather.prototype);  //把father.prototype._proto_指向了grandfather.prototype
father.prototype.constructor = father;  //設(shè)置father.prototype.constructor

var p1 = new father('Ethan');

問題14： hasOwnProperty有什么作用？如何使用汁针？

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

function P(name){this.name=name;}
P.prototype.say=function(){console.log(this.name);}
var obj=new P("Ethan");
obj. hasOwnProperty("name");  //true
obj. hasOwnProperty("say");  //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;
}
//call的作用：調(diào)用Person函數(shù)辉词，并將Male的this傳入，并且傳入name和sex兩個(gè)參數(shù)

問題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.getName = function(){
    console.log(this.name);
};    

function Male(name, sex, age){
   this.age=age;
  Person.call(this,name,sex);  //這個(gè)必須有瑞躺，不然實(shí)例對(duì)象沒有sex和name屬性
}

Male.prototype=Object.create(Person.prototype);
Male.prototype.constructor=Male;
Male.prototype.getAge = function(){
    console.log(this.age);
};
Male.prototype.printName=function(){
  console.log(this.name);
}
var ruoyu = new Male('若愚', '男', 27);
ruoyu.printName();

筆記

1敷搪、this

全局下this

console.log(this);  //window

內(nèi)部函數(shù)this

function fn(){
  funciton fn1(){
    console.log(this);
  }
}
fn();   //window,在當(dāng)前作用域下找不到this，直接往父作用域找幢哨，直到找到為止

setTimeout(),setInterval()的this特殊性

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

構(gòu)造函數(shù)

function Person(name){
  this.name=name;
}
Person.prototype.print=function(){
  console.log(this.name);
}
var person1=new Person("Ethan");
//1赡勘、創(chuàng)建了一個(gè)空對(duì)象作為this
//2、this.proto指向構(gòu)造函數(shù)的prototype
//3捞镰、運(yùn)行構(gòu)造函數(shù)
//4闸与、返回this（如果構(gòu)造函數(shù)里沒有return，若存在return引用類型岸售，則返回return后的值）

作為對(duì)象方法調(diào)用

//初始
var obj1 = {
    name: 'Byron',
    fn : function(){
        console.log(this);
    }
};
obj1.fn();   //obj1
//演變1
var obj1 = {
    name: 'Byron',
    obj2:{
      fn:function(){
          console.log(this);
      }
    }
};
obj1.obj2.fn();    //obj2
//演變2
var obj1 = {
    name: 'Byron',
    fn : function(){
        console.log(this);
    }
};
var fn2=obj1.fn;
fn2();    //window,相當(dāng)于window.fn2();

轉(zhuǎn)換this方法

//Function.prototype.bind();替換this,但是不會(huì)執(zhí)行函數(shù)
var obj1 = {
    name: 'Byron',
    fn : function(){
        console.log(this);
    }
};
obj3={a: 3};
var fn3=obj1.fn.bind(obj3);
fn3();  //obj3,this被替換了obj3

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

//call(arg1,arg2,arg3...);第一個(gè)參數(shù)為替換this践樱，第二個(gè)開始是傳給函數(shù)的參數(shù)，并執(zhí)行函數(shù)
//apply(arg1,[arg2,arg3...]);第一個(gè)參數(shù)為替換this冰评，第二個(gè)開始是數(shù)組阳堕，數(shù)組里的值傳給函數(shù)的參數(shù)攀芯，并執(zhí)行函數(shù)
var value=100;
function fn(a,b){
  console.log(this.value+a+b);
}
var obj={
  value:200
}
fn(3,5);   //108
fn.call(obj,3,5);   //208
fn.apply(obj,[3,6]);  //209

var arr=[1,3,9,7,4];
//Math.max(1,3,9,7,4);
console.log(Math.max.apply(null,arr));   //利用apply函數(shù)把數(shù)組里的值取出并傳遞給Math.max(),使得函數(shù)可以執(zhí)行

function joinStr(){
  //arguments.join("-");不能這么用，因?yàn)閍rguments為對(duì)象萎馅，沒有join方法
  var str=Array.prototype.join.call(arguments, "-"); 
  var temp=Array.prototype.join.bind(arguments);
  var str2=temp("-");
  console.log(str);
  console.log(typeof str);
 console.log(str2);
  console.log(typeof str2);
}
joinStr(1,2,"a");

三種變量

//實(shí)例變量：（this）類的實(shí)例才能訪問到的變量
//靜態(tài)變量：（屬性）直接類型對(duì)象能訪問到的變量
//私有變量：（局部變量）當(dāng)前作用域內(nèi)有效的變量
function ClassA(){
    var a = 1; //私有變量坑填，只有函數(shù)內(nèi)部可以訪問
    this.b = 2; //實(shí)例變量抛人，只有實(shí)例可以訪問
}
ClassA.c = 3; // 靜態(tài)變量，也就是屬性脐瑰，類型訪問
console.log(a); // error
console.log(ClassA.b) // undefined
console.log(ClassA.c) //3

var classa = new ClassA();
console.log(classa.a);//undefined
console.log(classa.b);// 2
console.log(classa.c);//undefined

最后編輯于：2017.12.10 00:09:23

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末妖枚，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子苍在，更是在濱河造成了極大的恐慌绝页，老刑警劉巖，帶你破解...
沈念sama閱讀 217,277評(píng)論 6贊 503
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件寂恬，死亡現(xiàn)場(chǎng)離奇詭異续誉，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)初肉，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,689評(píng)論 3贊 393
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門酷鸦，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人牙咏，你說我怎么就攤上這事臼隔。” “怎么了妄壶？”我有些...
開封第一講書人閱讀 163,624評(píng)論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵摔握，是天一觀的道長(zhǎng)。經(jīng)常有香客問我丁寄，道長(zhǎng)氨淌，這世上最難降的妖魔是什么例嘱？我笑而不...
開封第一講書人閱讀 58,356評(píng)論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮宁舰，結(jié)果婚禮上拼卵，老公的妹妹穿的比我還像新娘。我一直安慰自己蛮艰，他們只是感情好腋腮，可當(dāng)我...
茶點(diǎn)故事閱讀 67,402評(píng)論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開白布。她就那樣靜靜地躺著壤蚜，像睡著了一般即寡。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上袜刷，一...
開封第一講書人閱讀 51,292評(píng)論 1贊 301
城市分裂傳說
那天聪富，我揣著相機(jī)與錄音，去河邊找鬼著蟹。笑死墩蔓，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的萧豆。我是一名探鬼主播奸披，決...
沈念sama閱讀 40,135評(píng)論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼涮雷！你這毒婦竟也來(lái)了阵面？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 38,992評(píng)論 0贊 275
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤洪鸭，失蹤者是張志新（化名）和其女友劉穎样刷，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體览爵，經(jīng)...
沈念sama閱讀 45,429評(píng)論 1贊 314
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡置鼻，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,636評(píng)論 3贊 334
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了拾枣。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片沃疮。...
茶點(diǎn)故事閱讀 39,785評(píng)論 1贊 348
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖梅肤，靈堂內(nèi)的尸體忽然破棺而出司蔬，到底是詐尸還是另有隱情，我是刑警寧澤姨蝴，帶...
沈念sama閱讀 35,492評(píng)論 5贊 345
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布俊啼，位于F島的核電站，受9級(jí)特大地震影響左医，放射性物質(zhì)發(fā)生泄漏授帕。R本人自食惡果不足惜同木，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,092評(píng)論 3贊 328
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望跛十。院中可真熱鬧彤路，春花似錦、人聲如沸芥映。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,723評(píng)論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)奈偏。三九已至坞嘀，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間惊来，已是汗流浹背丽涩。一陣腳步聲響...
開封第一講書人閱讀 32,858評(píng)論 1贊 269
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留裁蚁，地道東北人矢渊。一個(gè)月前我還...
沈念sama閱讀 47,891評(píng)論 2贊 370
代替公主和親
正文我出身青樓，卻偏偏與公主長(zhǎng)得像厘擂，于是被迫代替她去往敵國(guó)和親昆淡。傳聞我的和親對(duì)象是個(gè)殘疾皇子锰瘸，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,713評(píng)論 2贊 354