前言

在學(xué)習(xí)JS中的原型，原型鏈，繼承這些知識(shí)之前，我們先學(xué)習(xí)下基礎(chǔ)知識(shí)：函數(shù)和對(duì)象的關(guān)系。

我們一直都知道，函數(shù)也是對(duì)象的一種，因?yàn)橥ㄟ^(guò)instanceof就可以判斷出來(lái)。但是函數(shù)和對(duì)象的關(guān)系并不是簡(jiǎn)單的包含和被包含的關(guān)系，這兩者之間的關(guān)系還是有點(diǎn)復(fù)雜的。接下來(lái)我們就來(lái)捋一捋。



首先，闡述一點(diǎn)，對(duì)象都是通過(guò)函數(shù)創(chuàng)建的

對(duì)于下面這種類型的代碼，一般叫做“語(yǔ)法糖”

var obj = {a:10,b:20};
var arr = [5, 'x', true];

但是，其實(shí)上面這段代碼的實(shí)質(zhì)是下面這樣的：

//var obj = { a: 10, b: 20 };
//var arr = [5, 'x', true];

 var obj = new Object();
 obj.a = 10;
 obj.b = 20;

 var arr = new Array();
 arr[0] = 5;
 arr[1] = 'x';
 arr[2] = true;

而Object和Array都是函數(shù)，可以自己用typeof函數(shù)進(jìn)行驗(yàn)證。
所以，可以得出：對(duì)象都是通過(guò)函數(shù)創(chuàng)建的

正文
說(shuō)完了前言，接下來(lái)我們進(jìn)入正題。

原型prototype
在前言中，我們說(shuō)了函數(shù)也是一種對(duì)象，所以函數(shù)也是屬性的集合，同時(shí)，也可以對(duì)函數(shù)進(jìn)行自定義屬性。
每個(gè)函數(shù)都有一個(gè)屬性——prototype。這個(gè)prototype的屬性值是一個(gè)對(duì)象（屬性的集合），默認(rèn)只有一個(gè)叫做constructor的屬性，指向這個(gè)函數(shù)本身.

“隱式原型”proto
我們先看一段非常常見(jiàn)的代碼：

function Fn() { }
   Fn.prototype.name = '張三';
    Fn.prototype.getAge = function () {
       return 12;
};
   var fn = new Fn();
   console.log(fn.name);
   console.log(fn.getAge ());

即，F(xiàn)n是一個(gè)函數(shù)，fn對(duì)象是從Fn函數(shù)new出來(lái)的，這樣fn對(duì)象就可以調(diào)用Fn.prototype中的屬性。

但是，因?yàn)槊總€(gè)對(duì)象都有一個(gè)隱藏的屬性——“proto”，這個(gè)屬性引用了創(chuàng)建這個(gè)對(duì)象的函數(shù)的prototype。即：fn.proto === Fn.prototype
那么，這里的_proto_到底是什么呢？

其實(shí)，這個(gè)__proto__是一個(gè)隱藏的屬性，javascript不希望開(kāi)發(fā)者用到這個(gè)屬性值，有的低版本瀏覽器甚至不支持這個(gè)屬性值。

var obj = {};
console.log(obj.__proto__);

每個(gè)對(duì)象都有一個(gè)_proto_屬性，指向創(chuàng)建該對(duì)象的函數(shù)的prototype。

構(gòu)造函數(shù)、原型、實(shí)例之間的關(guān)系
實(shí)例，原型對(duì)象，構(gòu)造函數(shù)，三者之間的關(guān)系：

(1) 實(shí)例有__proto__屬性指向原型對(duì)象

(2) 原型對(duì)象有constructor指針指向構(gòu)造函數(shù)

(3)構(gòu)造函數(shù)又有prototype屬性指向原型對(duì)象

實(shí)例和原型關(guān)系檢測(cè)

isPrototypeOf()函數(shù)，用于檢測(cè)兩個(gè)對(duì)象之間似乎否存在原型關(guān)系，使用方法如下：

  // 查看 Fn 的 prototype 對(duì)象，是否是 f 原型
  Fn.prototype.isPrototypeOf(f);   

 //// 查看 f 對(duì)象是否是構(gòu)造函數(shù) Fn 的實(shí)例
 //console.log(f instanceof Fn); 
 //// 查看 f 對(duì)象是否是構(gòu)造函數(shù) Fn 的實(shí)例    
 //console.log(f instanceof Object); 

    function Fn(){}
    function Fun(){}
    var f = new Fn();
    console.log( f.__proto__ === Fn.prototype );            // t

    console.log( Fn.prototype.isPrototypeOf(f) );           // t
    console.log( Fun.prototype.isPrototypeOf(f) );          // f
    console.log( Object.prototype.isPrototypeOf(f) );       // t

    console.log( f instanceof Fn );         // t
    console.log( f instanceof Fun );        // f
    console.log( f instanceof Object );     // t
//兩種使用，如果是返回ture，如果不是返回false;
//注意：instanceof運(yùn)算符右側(cè)為構(gòu)造函數(shù)，并且js中所有原型都來(lái)自O(shè)bject構(gòu)造函數(shù)。

JS解析器訪問(wèn)屬性順序
當(dāng)訪問(wèn)實(shí)例 f 的屬性或方法時(shí)，會(huì)先在當(dāng)前實(shí)例對(duì)象 f 中查找，如果沒(méi)有，則沿著__proto__繼續(xù)向上尋找，如果找到最頂頭的Object還是找不到，則會(huì)拋出undefined。如果在實(shí)例中找到，或某層原型中找到，就會(huì)讀取并使用，同時(shí)停止向上找尋。
由此可見(jiàn)，解析器的解析順序遵循就近原則，如果在最近的位置發(fā)現(xiàn)屬性存在，便不會(huì)繼續(xù)向上找尋。

原型的應(yīng)用
數(shù)組去重：

Array.prototype.noRepeat = function(){
    var m = [];
    for(var i=0;i<this.length;i++){
        if(m.indexOf(this[i]) == -1){
            m.push(this[i]);
        }
    }
    return m;
}
var arr = [3,4,5,6,7,6,5,4,3,2,1];
var res = arr.noRepeat();
console.log(res);

var arr1 = ["a","b","c","b","a"];
var res1 = arr1.noRepeat();
console.log(res1);

function Parent(){

}
Parent.prototype.show = function(){
    console.log("哈哈哈");
}

function Child(){

}
for(var i in Parent.prototype){
    Child.prototype[i] = Parent.prototype[i];
}
Child.prototype.show = function(){
    console.log("hello");
}

var p = new Parent();
p.show();
console.log(p.name);

var c = new Child();
c.show();
console.log(c.name);

————————————————
版權(quán)聲明：本文為CSDN博主「zyfacd」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/zyfacd/article/details/104909948