慕課網(wǎng)《前端JavaScript面試技巧》學(xué)習(xí)筆記(2)-原型和原型鏈

1.如何準(zhǔn)確判斷一個變量是數(shù)組類型
2.寫一個原型鏈繼承的例子
3.描述new一個對象的過程

知識點#####
  • 構(gòu)造函數(shù)
function Foo(name,age){
    this.name=name
    this.age=age
    this.class='class-1'
  //return this  //默認(rèn)有這一行
}
var f=new Foo('zhangsan',20)
//var f1=new Foo('lisi',22) //創(chuàng)建多個對象
  • 構(gòu)造函數(shù)-擴(kuò)展
var a={} //其實是var a=new Object()的語法糖
var b=[] //其實是var b=new Array()的語法糖
function Foo(){...} //其實是var Foo=new Function(...)
//使用instanceof判斷一個函數(shù)是否是一個變量的構(gòu)造函數(shù)

所有的引用類型(對象、數(shù)組、函數(shù))都有構(gòu)造函數(shù),a的構(gòu)造函數(shù)是Object(),b的構(gòu)造函數(shù)是Array(),F(xiàn)oo的構(gòu)造函數(shù)是Function()。所以假如想要判斷一個變量是否為數(shù)組就可以使用

var a={}
a instanceof Array   //false
  • 原型規(guī)則和實例
    • 所有的引用類型都具有對象特性,即可自由擴(kuò)展屬性(null除外)

    • 所有引用類型都有一個__proto__ //隱式原型屬性,屬性值是一個普通的對象

    • 所有函數(shù)都有一個prototype //顯示原型屬性,屬性值也是一個普通的對象

    • 所有引用類型的__proto__屬性值指向它的構(gòu)造函數(shù)prototype的屬性值

    • 當(dāng)試圖得到一個引用類型的某個屬性時,如果這個對象本身沒有這個屬性,那么會去它的__proto__(即它構(gòu)造函數(shù)的prototype)中尋找

      var obj={};obj.a=100;
      var arr=[];arr.a=100;
      function fn(){}
      fn.a=100
      
      console.log(obj.__proto__)
      console.log(arr.__proto__)
      console.log(fn.__proto__)
      
      console.log(fn.prototype)
      
      console.log(obj.__proto__===Object.prototype)     //true
      
//構(gòu)造函數(shù)
function Foo(name,age){
    this.name=name
}
Foo.prototype.alertName=function(){    //由于prototype是一個普通對象,所以也可以擴(kuò)展屬性
    alert(this.name)   
}    
//創(chuàng)建實例
var f=new Foo('zhangsan')
f.printName=function(){
console.log(this.name)
}
//測試
f.printName()    //zhangsan
f.alertName()    //f沒有alertName屬性,于是去f._proto_即Foo.prototype中查找

由對象調(diào)用原型中的方法,this指向?qū)ο?/em>

//循環(huán)對象自身的屬性
var item
for(item in f){
    //高級瀏覽器已在for in中屏蔽了來自原型的屬性
    //但是這里建議還是加上這個判斷以保證程序的健壯性
    if(f.hasOwnProperty(item)){
        console.log(item)
    }
}
  • 原型鏈
//在剛剛的代碼中加入
f.toString()    //要去f.__proto__.__proto__中查找

所有的引用類型都有__proto__屬性,且__proto__屬性值指向它的構(gòu)造函數(shù)prototype的屬性值,所以當(dāng)f不存在toString時,便會在f.__proto__Foo.prototype中查詢,而Foo.prototype中也沒有找到toString。由于Foo.prototype也是一個對象,所以它隱式原型__proto__的屬性值便指向它的構(gòu)造函數(shù)Object的prototype的屬性值。

//試一試
console.log(Object.prototype) 
console.log(Object.prototype.__proto__)    //為了避免死循環(huán),所以此處輸出null
原型鏈
  • instanceof
    用于判斷引用類型屬于哪個構(gòu)造函數(shù)的方法
    f instanceof Foo的判斷邏輯是f__proto__一層層向上能否對應(yīng)到Foo.prototype,再試著判斷f instanceof Object
解題#####

1.如何準(zhǔn)確判斷一個變量是數(shù)組類型
使用instanceof

var arr=[]
arr instanceof Array    //true
typeof arr    //object    typeof無法準(zhǔn)確判斷是否是數(shù)組

2.寫一個原型鏈繼承的例子

//簡單示例,比較low,下面有更貼近實戰(zhàn)的例子
//動物
function Animal(){
    this.eat=function(){
        console.log('Animal eat')
    }
}
//狗
function Dog(){
    this.bark=function(){
        console.log('Dog bark')
    }
}
Dog.prototype=new Animal()
//哈士奇
var hashiqi=new Dog()
//封裝一個DOM查詢
function Elem(id){
    this.elem=document.getElementById(id)
}
Elem.prototype.html=function(val){
    var elem=this.elem
    if(val){
        elem.innerHTML=val
        return this    //鏈?zhǔn)讲僮?    }else{
        return elem.innerHTML
    }
}

Elem.prototype.on=function(type,fn){
  var elem=this.elem
  elem.addEventListener(type,fn)
  return this   //鏈?zhǔn)讲僮?}

var div1=new Elem('div1')
// console.log(div1.html());
// div1.html('<p>Hello</p>');
// div1.on('click',function(){
//   alert('clicked')
// });
div1.on('click',function(){alert('clicked')}).html('<p>鏈?zhǔn)讲僮?lt;/p>')
//在之前的函數(shù)中增加了return this,由div1調(diào)用時便會返回當(dāng)前對象,即div1,便可以實現(xiàn)鏈?zhǔn)讲僮?

3.描述new一個對象的過程

function Foo(name,age){
 // this={}
    this.name=name
    this.age=age
    this.class='class-1'
  //return this
}
var f=new Foo('zhangsan',20)
//var f1=new Foo('lisi',22) //創(chuàng)建多個對象

創(chuàng)建一個新對象
this指向這個新對象 this={}
執(zhí)行代碼,即對this賦值 this.xxx=xxx
返回this return this

最后編輯于
?著作權(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)容

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