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

    科技2022-08-07  121

    一、原型

    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的实例

    Processed: 0.011, SQL: 8