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

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是一個空對象，原型是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 //true
typeof 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.innerHTML
11     }
12 }
13 Elem.prototype.on = function(type, fn){
14     var elem = this.elem
15     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>')