js面試題知識點全解(一原型和原型鏈1)

標籤：沒有   object   color   隱式   原型鏈   typeof   架構   如何使用   程式   

1.如何準確判斷一個變數是數群組類型
2.寫一個原型鏈繼承的例子
3.描述new一個對象的過程
4.zepto（或其他架構）源碼中如何使用原型鏈
知識點:
1.建構函式
2.建構函式-擴充
3.原型規則和樣本
4.原型鏈
5.instanceof

講解:

建構函式:一般函數為大寫字母開頭的都是建構函式,如下:

function Foo(name,age){    this.name=name    this.age=age    //return this}
var f = new Foo(‘L‘,20) ; //建構函式形成執行個體，可以建立多個對象;f是一個Null 物件，原型是Foo

var a={}其實是var a=new Object()的文法糖
var a=[]其實是var a=new Array()的文法糖
function Foo(){}其實是var Foo=new Function()

instanceof用於判斷參考型別屬於哪個建構函式的方法

f instanceof Foo //判斷f這個參考型別是否屬於Foo建構函式，判斷邏輯:f的_proto_一層一層往上，能否對應到Foo.prototype

判斷一個變數是否為"數組"：變數名 instanceof Array，如下代碼：

var arr=[];arr instanceof Array //truetypeof arr //object, typeof是無法判斷是否是數組的

原型規則和樣本：

1.所有的參考型別(數組、對象、函數)，都具有對象特性，即可自由擴充屬性(除了"null"對象以外)
2.所有參考型別都有一個_proto_(隱式原型)屬性，屬性值是一個普通的對象
3.所有函數都有一個prototype(顯示原型)屬性,屬性值也是一個普通對象

var obj={};obj.a=100;function fn(){}fn.a=100;console.log(obj._proto_); //隱式原型，都具有可擴充屬性原則console.log(fn.prototype); //顯示原型

4.所有的參考型別，_proto_屬性值指向它的建構函式的"prototype"屬性值

console.log(obj._proto_===Object.prototype) //obj的建構函式為new Object(),所以obj的隱式原型屬性就指向Object的顯示原型屬性

5.當試圖得到一個對象的某個屬性時，如果這個對象本身沒有這個屬性，那麼它會去它的_proto_(即它的建構函式的prototype)中尋找

 1 //建構函式 2 function Foo(name,age){ 3     this.name = name 4 } 5 Foo.prototype.alertName= function(){ 6     alert(this.name+"killua"); 7 } 8 //建立樣本 9 var f = new Foo("L");10 f.lastName = function(){11     console.log(this.name)12 }13 f.lastName(); //"L",自身屬性14 f.alertName(); //"Lkillua"，原型屬性15 //以上函數中，f共有3個屬性，f自身的屬性有2個(name屬性和lastName屬性),還有一個alertName是原型屬性16 f.firstName();//這裡f自身屬性中沒有firstName屬性，它的原型Foo函數中也麼有這個屬性，所以要再往上一層Foo的原型上去找這個屬性，這種有多層原型的函數就是原型鏈，直到null為止結束原型鏈17 var item;18 for(item in f){19     // 進階瀏覽器已經在 for in 中屏蔽了來自原型的屬性，但是這裡建議加上這個判斷，保證程式的健壯性20     if(f.hasOwnProperty(item)){  //迴圈遍曆f函數，如果f函數有它自身的屬性item,則列印出item屬性21         console.log(item)22     }23 }

寫一個原型鏈繼承的例子：

　　簡單易懂的例子：

 1 function Name(){ 2     this.name=function(){ 3         console.log("killua") 4     } 5 } 6 function Firstname(){ 7     this.firstname=function(){ 8         console.log("L") 9     }10 }11 Name.prototype = new Firstname();12 var he = new Name();13 console.log(he.name); //"killua"14 console.log(he.firstname); //"L"

　　稍複雜點的例子(建議面試用)：

 1 function Elem(id){ 2     this.elem = document.getElementById(id) 3 } 4 Elem.prototype.html = function(val){ 5     var elem = this.elem 6     if(val){ 7         elem.innerHTML = val 8         return this //鏈式操作 9     }else{10         return elem.innerHTML11     }12 }13 Elem.prototype.on = function(type, fn){14     var elem = this.elem15     elem.addEventListener(type, fn) //addEventListener() 方法用於向指定元素添加事件控制代碼16 }17 var div1 = new Elem(‘div1‘)18 //console.log(div1.html())19 div1.html(‘<p>hello killua</p>‘).on(‘click‘,function(){20     alert(‘clicked‘)21 }).html(‘<p>javascript</p>‘)

 

js面試題知識點全解(一原型和原型鏈1)