原型鏈、繼承

問題7:有如下代碼,解釋Person、 prototype、proto、p、constructor之間的關聯。

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

p是Person的實例,所以 p.__proto__=== Person.prototypePerson.prototype.constructor=== Person。當調用p.sayName 的時候p先查找自己的屬性中有沒有,沒有就在原型鏈中查找,p.__proto__指向的和Person.prototype一樣,Person.prototype下面有sayName這個函數。原型圖如下:

QQ截圖20170124162437.jpg

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

2.jpg

輸入p.toString的查找順序,p -> p.__proto__ ->Person.prototype.__proto__->Object.prototype.toString
就像圖中通過__proto__連接起來的鏈就叫做原型鏈。

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

 function getMostOften(str){
    var obj={};
    for(var i=0;i<str.length;i++){
        var char=str[i];
        if(obj[char]){
            obj[char]++;
        }else{
            obj[char]=1;
        }
    }
    console.log(obj);
    var max=0;
    var maxChar=null;
    for(var key in obj){
        if(max<obj[key]){
            max=obj[key];
            maxChar=key;
        }
    }
    console.log('最多的字符是'+maxChar);
    console.log('出現的次數是'+max);
 }
3.jpg

問題10: instanceOf有什么作用?內部邏輯是如何實現的?

instanceof 是一個運算符。A instancrof B用于判斷A 是否是B 的一個實例,或者是A是否是以B為父類型的一個實例。
在上面類Person創建實例p的這個例子中:

 p instanceof Person  //true
 Person instanceof Object  //true
 p instanceof Object   //true
 p.__proto__.__proto__===Object.prototype //ture

其內部邏輯是判斷A和B是否處在同一條原型鏈上。代碼如下:

function InstanceOf(a,b){
    var proto=a.__proto__;
   do{
    if(proto === b.prototype){
        return true;
    }else{
        proto=proto.__proto__;
    }
   }
   while(proto)
    return false;
}

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

繼承可以使一個對象直接使用另一個對象的方法和屬性。

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

//方法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中p1的下面有屬性name和sex,還有方法printName。
  • 在方法2中p1下面只有屬性name和sex,printName綁定在其父類Person的prototype屬性下,p1可以繼承父類的屬性和方法,所以仍然可以調用p1.printName
    4.jpg

    5.jpg

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

Object.create創建一個具有指定原型且可選擇性地包含指定屬性的對象。可以通過Object.create()方法實現類式繼承,如:

Male.prototype = Object.create(Person.prototype);

通過Object.create()clone了一個新的prototype,使Male.prototype指向這個新的prototype,而不是直接將Person.prototype賦值給它,這樣做可以避免當我修改Male.prototype的時候不會將它的父類Person.prototype也修改了。
兼容性

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

hasOwnPerperty是Object.prototype的一個方法,可以判斷一個對象是否包含自定義屬性而不是原型鏈上的屬性,hasOwnProperty是JavaScript中唯一一個處理屬性但是不查找原型鏈的函數。

問題15:如下代碼中call的作用是什么?

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

call()方法可以將傳入的第一個參數設置為this對象。代碼中在Male這個類下面執行另一個類Person可以把Person的屬性 賦值到Male上,但是需要在執行的時候通過call來把環境改到自己的作用域下。

問題16: 補全代碼,實現繼承

function Person(name, sex){
    this.name=name;
    this.sex=sex;
    this.printName=function(){
        console.log('Hello, '+name);
    }
}

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

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

function inherit(superType, subType){
    var _prototype  = Object.create(superType.prototype);
    _prototype.constructor = subType;
    subType.prototype = _prototype;
}
inherit(Person, Male);

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

var ruoyu = new Male('若愚', '男', 27);
ruoyu.printName();
ruoyu.getName();
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,836評論 6 540
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,275評論 3 428
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,904評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,633評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,368評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,736評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,740評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,919評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,481評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,235評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,427評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,968評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,656評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,055評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,348評論 1 294
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,160評論 3 398
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,380評論 2 379

推薦閱讀更多精彩內容