原型鏈 this 繼承

this 相關(guān)問題

apply、call 、bind有什么作用，什么區(qū)別

  • apply:call() 方法調(diào)用一個函數(shù)，將函數(shù)的this值指定為第一個參數(shù)，第二個參數(shù)為一個數(shù)組，代表向函數(shù)內(nèi)的傳參。
  • call:call() 方法調(diào)用一個函數(shù)，將函數(shù)的this值指定為第一個參數(shù)，后面的參數(shù)為函數(shù)的傳參。
  • bind:bind()返回一個新函數(shù)，并且使函數(shù)內(nèi)部的this為傳入的第一個參數(shù)。
  • 區(qū)別：apply和call的區(qū)別是call是像函數(shù)內(nèi)一個一個傳遞參數(shù)而apply是將參數(shù)整合成一個數(shù)組傳入。bind和前兩者的區(qū)別是前兩者改變函數(shù)執(zhí)行上下文，并不會根據(jù)原函數(shù)拷貝一個新的函數(shù)，而bind()會根據(jù)原函數(shù)拷貝一個新函數(shù)返回，將this值指地位其第一個參數(shù)。

以下代碼輸出什么?

var john = { 
  firstName: "John" 
}
function func() { 
  alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()//彈出John:hi!對話框
//在對象內(nèi)部作為一個方法調(diào)用，this值為該對象。

下面代碼輸出什么，為什么

func() 
function func() { 
  alert(this)
}//彈出object:window對話。
//直接調(diào)用函數(shù)，this值代表window對象。

下面代碼輸出什么

document.addEventListener('click', function(e){
    console.log(this);
    setTimeout(function(){
        console.log(this);
    }, 200);
}, false);//第一個this是document,第二個this是window。
//綁定事件執(zhí)行之時，這里的this指向document,定時器執(zhí)行時，this指向window,嚴(yán)格模式下undefined.

下面代碼輸出什么，why

var john = { 
  firstName: "John" 
}

function func() { 
  alert( this.firstName )
}
func.call(john)//彈出John對話框，call將func中的this替換成了john

以下代碼有什么問題，如何修改

var module= {
  bind: function(){
    $btn.on('click', function(){
      console.log(this) //這里的this指的是$btn,這里面并沒有showMsg對象
      this.showMsg();
    })
  },
  
  showMsg: function(){
    console.log('饑人谷');
  }
}

修改后

var module= {
  bind: function(){
    var _this = this //這里的this指的是module，將this保存到_this變量中
    $btn.on('click', function(){
      console.log(this) 
      _this.showMsg();
    })
  },
  
  showMsg: function(){
    console.log('饑人谷');
  }
}

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

有如下代碼，解釋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.prototype === p.__proto__  //Person為構(gòu)造函數(shù)，有prototype屬性，p是Person的一個實例，所以p.__proto__指向Person的prototype屬性。
Person === Person.prototype.constructor//protype屬性中有constructor屬性，他指向函數(shù)本身
Person.prototype.__proto__  === Object.prototype //Person.prototype是由Object創(chuàng)造的一個實例，所以同理Person.prototype.__proto__指向Object.prototype

上例中，對對象 p可以這樣調(diào)用 p.toString()。toString是哪里來的? 畫出原型圖?并解釋什么是原型鏈。

  • toString是來自于Object.prototype的方法，p是一個Object實例，他的原型最終都會指向Object.prototype,所以能使用Object的方法。原型圖：


    Y_KH}@XJ(QH}~X@Q1D@FI`O.png
  • 原型鏈：每個對象都有一個指向它的原型（prototype）對象的內(nèi)部鏈接。這個原型對象又有自己的原型，直到某個對象的原型為 null 為止（也就是不再有原型指向），組成這條鏈的最后一環(huán)。這種一級一級的鏈結(jié)構(gòu)就稱為原型鏈（prototype chain）。

對String做擴(kuò)展，實現(xiàn)如下方式獲取字符串中頻率最高的字符

String.prototype.getMostOften = function(){
    var index = {};
    var maxNum=0,
        maxValue;
    for(var i = 0;i < this.length;i++){
        if(index[this[i]]){
            index[this[i]]++;
        }else{
            index[this[i]]=1;
        }
    }
    for(k in index){
        if(index[k]>maxNum){
            maxNum = index[k];
            maxValue = k;
        }
    }
    return maxValue;
}  
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因為d 出現(xiàn)了5次

instanceOf有什么作用？內(nèi)部邏輯是如何實現(xiàn)的？

  • instanceof 運算符用來測試一個對象在其原型鏈中是否存在一個構(gòu)造函數(shù)的 prototype 屬性。
  • 語法：a instanceof b
  • 內(nèi)部邏輯：at對象可以通過他自己的proto屬性，指向他父類的prototype屬性，通過層層向上尋找，判斷b對象的prototype屬性是否存在于這條原型鏈上，是則代表a是b的實例，返回true,反之則返回false.

繼承相關(guān)問題

繼承有什么作用?

  • 繼承是指一個對象直接使用另一對象的屬性和方法。
  • 作用：可以讓代碼的復(fù)用性提高以及減少內(nèi)存的使用。

下面兩種寫法有什么區(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方法是直接寫在函數(shù)內(nèi)部，每次重新創(chuàng)造一個實例的時候便會重新寫一次printName，此方法較為占據(jù)內(nèi)存。方法二則是寫在函數(shù)的原形對象中，每次創(chuàng)造一個實例的時候都會從原形中找尋，不需要重新寫一次，較為節(jié)省內(nèi)存和性能，推薦方法二。

Object.create 有什么作用？兼容性如何？

  • Object.create() 方法會使用指定的原型對象及其屬性去創(chuàng)建一個新的對象。IE9以上的版本可以兼容。

hasOwnProperty有什么作用？ 如何使用？

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

如下代碼中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將Person內(nèi)部的this值更改成了他的第一個參數(shù)，在Male里的this值指向Male本身，使得Male可以使用Person的方法。

補全代碼，實現(xiàn)繼承

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

Person.prototype.getName = function(){
    console.log("我叫" + this.name + "性別" + this.sex);
};    

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

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

Male.prototype.getAge = function(){
    console.log(this.age + "歲")
};
Male.prototype.printName = function(){
    this.getName();
    this.getAge();
}
var ruoyu = new Male('若愚', '男', 27);
ruoyu.printName();
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 官方中文版原文鏈接 感謝社區(qū)中各位的大力支持，譯者再次奉上一點點福利：阿里云產(chǎn)品券，享受所有官網(wǎng)優(yōu)惠，并抽取幸運大...
    HetfieldJoe閱讀 3,081評論 4贊 14
  • 博客內(nèi)容：什么是面向?qū)ο鬄槭裁匆嫦驅(qū)ο竺嫦驅(qū)ο缶幊痰奶匦院驮瓌t理解對象屬性創(chuàng)建對象繼承 什么是面向?qū)ο?面向?qū)ο?..
    _Dot912閱讀 1,536評論 3贊 12
  • 原型鏈?zhǔn)且环N機制，指的是 JavaScript 每個對象都有一個內(nèi)置的 __proto__ 屬性指向創(chuàng)建它的構(gòu)造函...
    劼哥stone閱讀 4,570評論 15贊 80
  • 前言# 在文章的開頭我么還是要重申一下table這個庫中的函數(shù)針對的幾乎都是數(shù)組類型的table，也就是說tabl...
    AlbertS閱讀 49,938評論 3贊 5
  • 醫(yī)院 潔白莊重的大樓 整齊肅穆的房間 在這無人愿常來的地方 總伴隨者初生的驚喜與死別的悲傷 門廳的一側(cè)傳出醫(yī)生的囑...
    竹林醉翁閱讀 218評論 0贊 0

友情鏈接更多精彩內(nèi)容