快捷導(dǎo)航

JavaScript原型與原型鏈深入探究使用方法

更新時(shí)間：2022年11月07日 16:03:56 作者：亦世凡華、

js中的原型與原型鏈應(yīng)該是老生常談的話題了，在前端面試中基本都是必問的一個(gè)問題，但是很多人還是稀里糊涂的，只知道其表層含義。本文將帶大家深入了解JavaScript中的原型與原型鏈，感興趣的可以學(xué)習(xí)一下

原型(prototype)

每一個(gè)函數(shù)都有一個(gè) prototype 屬性，它默認(rèn)指向一個(gè)Object空對(duì)象(即稱為：原型對(duì)象)。

<script>
    console.log(Date.prototype, typeof Date.prototype);
    function fun(){
    }
    fun.prototype.test = function(){ //給原型對(duì)象添加一個(gè)方法
        console.log('test()');
    }
    console.log(fun.prototype); // 默認(rèn)指向一個(gè)Object空對(duì)象(沒有我們的屬性)
</script>

原型對(duì)象中有一個(gè)屬性 constructor ，它指向函數(shù)對(duì)象。

<script>
    function fun(){
    }
    console.log(Date.prototype.constructor === Date);
    console.log(fun.prototype.constructor === fun);
</script>

給原型對(duì)象添加屬性(一般是方法) ===> 實(shí)例對(duì)象可以訪問。

有的時(shí)候我們想要在所有已經(jīng)存在的對(duì)象添加新的屬性或方法。

另外，有時(shí)候我們想要在對(duì)象的構(gòu)造函數(shù)中添加屬性或方法。

使用 prototype 屬性就可以給對(duì)象的構(gòu)造函數(shù)添加新的屬性：

<script>
    function fun(){
    }
    fun.prototype.test = function(){//給原型對(duì)象添加方法(屬性)
        console.log('test()');
    }
    var fn = new fun()//函數(shù)的所有實(shí)例對(duì)象自動(dòng)擁有原型中的方法(屬性)
    fn.test()
</script>

顯示原型與隱式原型

每一個(gè)函數(shù) function 都有一個(gè) prototype，即顯示原型。默認(rèn)指向一個(gè)空的 Object 對(duì)象。

<script>
    function fun(){
    }
    console.log(fun.prototype);
</script>

每個(gè)實(shí)例對(duì)象都有一個(gè) __proto__ ，可稱為隱式原型。

<script>
    function fun(){
    }
    var fn = new fun()
    console.log(fn.__proto__);
</script>

對(duì)象的隱式原型的值為其對(duì)應(yīng) 構(gòu)造函數(shù)的顯示原型的值。

<script>
    function fun(){
    }
    // console.log(fun.prototype);
    var fn = new fun()
    // console.log(fn.__proto__);
    console.log(fun.prototype === fn.__proto__); //結(jié)果是 true
</script>

總結(jié)：

函數(shù)的 prototype 屬性：在定義函數(shù)時(shí)自動(dòng)添加的，默認(rèn)值是一個(gè)空的 Object 對(duì)象。

對(duì)象的 __proto__ 屬性：創(chuàng)建對(duì)象時(shí)自動(dòng)添加的，默認(rèn)值為構(gòu)造函數(shù)的 prototype 屬性值。

程序員能直接操作顯示原型，但不能直接操作隱式原型(ES6之前)。

原型鏈

原型鏈(本質(zhì)為：隱式原型鏈，作用：查找對(duì)象的屬性或方法)，訪問一個(gè)對(duì)象的屬性時(shí)，先在自身屬性中查找，找到返回；如果沒有，再沿著 __proto__ 這條鏈向上查找，找到返回；如果最終沒找到，返回 undefined。

<script>
    console.log(Object.prototype.__proto__);
    function Fun(){
        this.test1 = function(){
            console.log('test1()');
        }
    }
    console.log(Fun.prototype);
    Fun.prototype.test2 = function(){
        console.log('test2()');
    }
    var fun = new Fun()
    fun.test1()
    fun.test2()
    console.log(fun.toString())
    fun.test3()
</script>

總結(jié)：

JavaScript 對(duì)象有一個(gè)指向一個(gè)原型對(duì)象的鏈。當(dāng)試圖訪問一個(gè)對(duì)象的屬性時(shí)，它不僅僅在該對(duì)象上搜尋，還會(huì)搜尋該對(duì)象的原型，以及該對(duì)象的原型的原型，依次層層向上搜索，直到找到一個(gè)名字匹配的屬性或到達(dá)原型鏈的末尾。

<script>
    function Fun(){
    }
    //函數(shù)的顯示原型指向的對(duì)象默認(rèn)是空 Object 實(shí)例對(duì)象(但 Object 不滿足)
    console.log(Fun.prototype instanceof Object); 
    console.log(Object.prototype instanceof Object); 
    console.log(Function.prototype instanceof Object); 
    //所有函數(shù)都是 Function 的實(shí)例(包括 Function)
    console.log(Function.__proto__ === Function.prototype); 
    // Object 的原型對(duì)象是原型鏈的盡頭
    console.log(Object.prototype.__proto__); 
</script>

原型鏈屬性問題

讀取對(duì)象的屬性值時(shí)：會(huì)自動(dòng)查找到原型鏈中查找；設(shè)置對(duì)象屬性時(shí)：不會(huì)查找原型鏈，如果當(dāng)前對(duì)象中沒有此屬性，直接添加此屬性值并設(shè)置其值；方法一般定義在原型中，屬性一般通過構(gòu)造函數(shù)定義在對(duì)象本身上。

<script>
    function Fun(){
    }
    Fun.prototype.a = 'xxx'
    var fun = new Fun()
    console.log(fun.a,fun);
    var fun1 = new Fun()
    fun1.a = 'yyy'
    console.log(fun.a,fun1.a,fun1);
    function Person(name,age){
        this.name = name
        this.age = age
    }
    Person.prototype.setName = function(name){
        this.name = name
    }
    var p1 = new Person('Tom',12)
    p1.setName('Bob')
    console.log(p1);
    var p2 = new Person('Jack',12)
    p2.setName('andy')
    console.log(p2);
    console.log(p1.__proto__ === p2.__proto__);
</script>

原型鏈 instanceof 使用

表達(dá)式：A instanceof B ；如果B函數(shù)的顯示原型對(duì)象在A對(duì)象的原型鏈中，返回true，否則返回false；Function是通過new自己產(chǎn)生的實(shí)例。

<script>
    function Fun(){}
    var fn = new Fun()
    console.log(fn instanceof Fun); 
    console.log(fn instanceof Object);
    console.log(Object instanceof Function);
    console.log(Object instanceof Object);
    console.log(Function instanceof Function);
    console.log(Function instanceof Object);
    function Foo(){}
    console.log(Object instanceof Foo);
</script>

練習(xí)

<script>
    function A(){}
    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);
</script>

其實(shí)現(xiàn)原理如下圖所示（圖有點(diǎn)草，湊合看吧哈哈）

<script>
    function F(){}
    Object.prototype.a = function(){
        console.log('a()');
    }
    Function.prototype.b = function(){
        console.log('b()');
    }
    var f = new F()
    f.a()
    F.a()
    F.b()
    console.log(f);
    console.log(Object.prototype);
    console.log(Function.prototype);
</script>