js中的原型到底是什么?

最新推荐文章于 2025-09-21 12:00:00 发布

原创最新推荐文章于 2025-09-21 12:00:00 发布 · 2.2k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#js #原型 #javascript #前端

js 专栏收录该内容

16 篇文章

订阅专栏

原型的概念
原型通常指的是prototype和__proto__这两个原型对象
其中前者叫做显式原型对象,后者叫做隐式原型对象
在js中所有的函数都有一个prototype对象,每一个对象都有__proto__,既然prototype是一个对象,那么他必然也有一个__proto__(在后面会详细解释)
__proto__与prototype之间的关系

__proto__等于其构造函数的prototype,即每个__proto__都指向其构造函数的prototype

		var obj =new Object();
        console.log(obj.__proto__===Object.prototype);//true

若在构造函数的prototype上添加方法或者书写,则其下的所有实例对象的__proto__都会添加对应的方法或属性
所有的方法都是由Function实例化而来的,比如Object,Array,Date等,且包括Function自身,所以Function的__proto__指向自身的prototype

原型链
原型链是实例对象与原型之间的连接
若要查找某个对象上的属性或者方法,过程中会先查找自身,再顺着原型链逐级查找,若没找到则返回undefined

		var Fn = function () {};
        var f = new Fn();
        Function.prototype.a = 1;
        Object.prototype.b = 2;
        
        console.log(Fn.a); //1			Fn--->Function--->a=1
        console.log(f.a); //undefined	f--->Object 未找到返回undefined
        console.log(f.b);//2			f--->Object--->b=2

上方代码创建了一个方法Fn和一个以Fn为构造函数的对象f
并为Function和Object的原型上分别添加了一个属性(Function和Object是方法和对象的构造函数)

上面说过所有的__proto__都指向其构造函数的prototype,所以Fn的__proto__会指向Function的prototype,f的__proto__会指向Object的prototype
在这里插入图片描述

练习题

		
		var F = function () {};
        Object.prototype.a = function () {
            console.log('a()');
        }
        Function.prototype.b = function () {
            console.log('b()');
        }
        var f = new F();
        
        //以下哪些函数可以正常运行
        f.a();		//yes		f--->Object--->a
        f.b();		//error		f--->Object--->b(未找到)
        F.a();		//yes		F--->Function--->Object--->a
        F.b();		/yes		F--->Function--->b