JS高级--原型以及原型链

一、原型

1.什么是原型？

原型是JS中继承的基础，JS的继承就是基于原型的继承。

2.几个基本定义

（1）每个函数都有一个prototype属性，它默认指向一个空的Object对象（称为原型对象）

（2）原型对象里面有一个constructor属性，它指向函数对象

代码展示：
在这里插入图片描述

（3）图示：

注：函数名叫Type ，prototype是其属性，Type.prototype指向的是Type的原型对象，原型对象里面有constructor属性constructor又指向的是Type。构造函数和函数对象之间是相互引用的关系。

二、显式原型与隐式原型

1.每个函数function都有一个prototype即显式原型属性

2.每个实例对象都有一个隐式原型属性

3.对象的隐式原型的值为其对应构造函数的显式原型的值

  //1、每个函数function都有一个prototype，称为显式原型属性 默认指向一个空的object对象
        console.log(Fn.prototype); //函数对象定义时添加此属性

        //2、每个实例对象都有一个_proto_可称为隐式原型（属性）
        //创建实例对象
        const fn = new Fn();  // this.__proto__ = Fn.prototype
        console.log(fn.__proto__);  //创建对象添加此属性


        //3、对象的隐式原型的值为其对应构造函数的显式原型的值
        console.log(Fn.prototype === fn.__proto__);

        //4、给原型添加方法
        Fn.prototype.test = function(){
    
    
            console.log("test()");
        };
        //通过实例对象调用原型的方法
        fn.test();

代码原型图示：

    function Fn(){
    
    

    }
    var fn = new Fn();

    Fn.prototype.test = function(){
    
    
        console.log("test()");
    };
    fn.text();

在这里插入图片描述
总结：
函数的prototype属性：

在定义函数时自动添加的，默认值是一个空Object对象。
对象的_proto_属性：创建对象时自动添加的，默认值为构造函数的prototype属性值。
显式原型可以直接操作，隐式原型不能直接操作。

三、原型链

访问一个对象属性时现在自身属性中查找，找到返回。

如果没有再沿着_proto_这条链向上查找，找到返回。

如果最终没有找到，返回undefined

别名：隐式原型链

代码：

        function Fn(){
    
    
            this.test1 = function(){
    
    
                console.log("test1()");
            };
            console.log(this);
        }

        Fn.prototype.test2 = function(){
    
    
            console.log('test2()');
        };

//创建一个实例对象
        var fn = new Fn();
        console.log(fn);

        console.log(fn.__proto__);

原型链图示：
在这里插入图片描述
注：原型链的尽头是Object的隐式原型属性为null,原型链是隐式原型链。
原型链的作用：查找对象的属性。
作用域链：查找变量。

四、总结：

1.所有函数都有两个属性一个隐式原型，一个显式原型。因为所有的函数都是大写Function的实例对象。下面两行代码是等价的

function foo(){
    
    
}
var foo = new Function();

2.实例对象的隐式原型等于其构造函数的显式原型

3.所有函数的隐式原型对象都相等，因为都等于大写Function的显式原型

4.所有函数的显式原型都指向一个空的Object对象但是Object除外

5.Object也是大写Function的实例

在这里插入图片描述