原型原型鏈 面試題

//測試題1

var A=function(){}

A.prototype.n=1

var b=new A()

A.prototype={

n:2,

m:3

}

var c=new A()

console.log(b.n,b.m,c.n,c.m)//1,undefined,2,3

 

//測試題2

var F=function(){};

Object.prototype.a=function(){

console.log('a()')

};

Function.prototype.b=function(){

console.log('b()')

}

var f=new F();

f.a()//a()

f.b()//報錯找不到b這個函數

F.a()//a()

F.b()//b()

若有不懂請認真分析以下(圖解):

1、題目

一、如何準確判斷一個變量是數組類型？

 

var array=[];
console.log(array instanceof Array);//true 判斷引用類型的具體類型要用instanceof
console.log(typeof array);//Object

二、寫一個原型鏈繼承的的例子

 

//封裝一個DOM查詢實例
function Elem(id){
    this.elem=document.getElementById(id);
}
Elem.prototype.html=function(val){
    var elem=this.elem;
    if(val){
        elem.innerHTML=val;
    }else{
        return elem.innerHTML;
    }
}
Elem.prototype.on=function(type,fn){
    var elem=this.elem;
    elem.addEventListener(type,fn);
    return this;
}
var dev=new Elem('dev1');
console.log(dev.html('<p>hello world!</p>'));
dev.on('click',function(){
    alert('clicked');
})

三、描述new一個對象的過程
（1）建立一個新對象
（2）this指向這個新對象
（3）執行代碼，即對this進行賦值

（4）返回this

 

//建立構造函數
function  Foo(name,age){
    //var this={};
    this.name=name;
   // return this;
}
Foo.prototype.alertName=function(){
    console.log(this.name);
}
//建立示例
var f=new Foo('zahngshan');
f.printName=function(){
    console.log(this.name);
};
//測試
f.printName();
f.alertName();

四、zepto(或其餘框架)源碼中如何使用原型鏈
（1）閱讀源碼是高效提升技能的方式
（2）但不能‘埋頭苦鑽’有技巧在其中
（3）慕課網搜索‘zepto設計和源碼分析’
2、知識點
一、構造函數
構造函數有個特色，函數名首字母大寫，構造函數就相似於一個模板，能夠new出來多個實例
二、構造函數-擴展

（1）var a={}實際上是var a=new Object()的語法糖

（2）var a=[]實際上是var a=new Array()的語法糖

（3）function Foo(){}實際上是var Foo=new Function(...)

（4）使用instanceof判斷一個函數是不是一個變量的構造函數
三、原型規則和示例
（1）全部的引用類型（數組，對象，函數），都具備對象特徵，即自由擴展屬性（除了null之外），以下代碼所示，均可以自由擴展屬性a

 

var obj = {};
obj.a = 100;
var arr = [];
arr.a = 100;
function fn() {
};
var f1=new fn();
fn.a = 100;

（2）全部的引用類型（數組，對象，函數），都有一個__proto__屬性，屬性值是一個普通的對象,以下代碼所示：

 

var obj = {};
obj.a = 100;
var arr = [];
arr.a = 100;
function fn() {
};
var f1=new fn();
fn.a = 100;
console.log(obj.__proto__);
console.log(arr.__proto__);
console.log(fn.__proto__);

（3）全部的函數，都有一個prototype屬性，屬性值也是一個普通的對象

 

function fn() {
};
var f1=new fn();
fn.a = 100;
console.log(fn.__proto__);
console.log(fn.prototype);

（4）全部的引用類型（數組，對象，函數），__proto__屬性值指向他的構造函數的「prototype」屬性值

 

var obj = {};
obj.a = 100;
var arr = [];
arr.a = 100;
function fn() {
};
var f1=new 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
console.log(fn.__proto__ === fn.prototype);//true

（5）當試圖獲得一個對象的某個屬性時，若是這個對象自己沒有這個屬性，那麼會去它的__proto__(即它的構造函數的prototype)中尋找，即console.log(obj.__proto__ === Object.prototype);
四、原型鏈