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

bzt820801發表於2017-08-23
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>')

 

相關文章