JS中的原型和原型链

332 阅读2分钟

js是基于原型的语言(prototype-based language),基于原型是面向对象的一种流派。所谓原型就是自身相关属性作为模板为新对象所使用,js有以原型为核心的树状层级结构。原型和原型链也是深入学习js的过程中必须了解的知识点。

prototype和__proto__

prototype

先祟随便写一个函数

    var f=function(){}
    console.log(f);

运行,发现它有一个prototype属性:

不仅这个函数,所有的函数包括构造器Array、Fuction......都会有这个 prototype属性,

prototype就是原型,每一个函数都有prototype,prototype的值是一个对象

constructor

还是刚才的例子,我们会发现这个函数的prototype里有一个constructor方法

所有函数都有这个constructor方法,constructor方法指向这个函数本身。

__proto__

还是先整一段代码,随便搞一个对象

    let a={
        b:1,
        c:2
    }
    console.log(a)

运行,发现它有一个__proto__属性:

__proto__是隐式原型,不仅是这个对象,js中所有的对象都有__proto__属性。对象的隐式原型属性指向创建这个对象的函数的prototype。

值得一提的是,因为函数也是对象,所以函数既有prototype也有__proto__

原型链

当我们在js中访问某一个对象某个属性时,会先在对象中寻找,如果找不到,就去原型对象上找,如果还找不到,就在原型对象的原型对象上找,以此类推,这样就构成了人体蜈蚣(?什么玩意)一般的原型链。原型链有点类似于继承的感觉。

举个例子:

    function F(){}
    var f=new F;
    console.info(f);
    console.info(f.__proto__);
    console.info(f.__proto__.__proto__);
    console.info(f.__proto__.__proto__.__proto__);

运行结果:

这个例子能呈现一层又一层的原型链,可见原型链的顶层是null,所谓万物皆虚是也(笑)。

因为js是基于原型的编程语言,所以不建议随意更改构造器的prototype属性,不然会影响到所有是由该构造器创造的元素。

结束

这篇文是对原型和原型链的皮毛概述,是我学习过程中的小小总结,希望有所帮助。