-
Js中prototype、[[prototype]]和__proto__的区别和用法
2025-05-03 15:29:06
一.显式原型&隐式原型
显式原型：prototype 隐式原型：__proto__
1.1 Important
__proto__是每个对象都具有的属性prototype是Function独有的属性
1.2 Tips
对象的隐式原型的值为其对应构造函数的显式原型的值
fn.__proto__ === Function.prototype 函数的prototype属性是定义时自动添加的。默认为{}对象的__proto__属性是创建对象时自动添加的，默认值为其构造函数的prototypeObject.prototype.__proto__ === null
1.3 说了这么多和[[prototype]]有什么关系?
其实[[prototype]]和__proto__意义相同，均表示对象的内部属性，其值指向对象原型。前者在一些书籍、规范中表示一个对象的原型属性，后者则是在浏览器实现中指向对象原型。
二.作用
作用方面来讲当然是实现继承了。其中最经典的共享属性方法的原型链继承。其中必不可少的属性就是__protoo__和prototype。
我们举个栗子
function Son(){}
function Father(){}
Son.prototype = new Father();
如此即实现了继承 我们可以写代码进行验证
Foo.prototype.__proto__ === Bar.prototype //true
符合上述第三条规则，所以可以通过此方法完成函数的继承。 注意，此为原型链继承，其中的方法鱼属性为此链上的所有实例所共享
三.教你手撸原型链
原型链无非就是一堆继承关系：
我们只需要将儿子原型的__proto__属性指向父亲的prototype属性，构造函数的prototype属性的constructor属性指向其本身即可。不过需要注意的一点是，已经被实例化的对象__proto__属性指向其构造函数的prototype。另外一个特殊的对象Object。作为所有对象的父类他的原型的__proto__属性指向null
如此我们就可以看得懂那张经典的原型链图解啦
四.从原理讨论原型链的用处
4.1 typeof
typeof作为《JavaScript高级程序设计》中首推的判断类型方法无疑是大多数人的选择。不过令人烦恼的是我们发现当碰到Array、Function等类型时他均返回一个Object。这就有点气人了。所以机智的玩家们采取了Object.prototype.toString.call(obj)方法来识别对象类型。他会返回一个"[object Type]"的东西来告诉你所指对象的类型。
此处就用到了原型链必不可少的prototype。通过改变this指针指向将我们所要验证类型的对象。以完成类型的检验
4.2 instanceof
除去typeof外我们还有另一个方法：instanceof
看过我之前转载的关于typeof与instanceof原理的好兄弟估计会猜到我要说什么,不过我还是要继续BB。
instanceof这个方法用于判断某实例是否从属于某种类型，同时也可以判断一个实例是否是其父类型或者祖先类型的实例。举个栗子
function Son(){}
function Father(){}
Son.prototype = new Father();
var son = new Son();
son instanceof Son //true
son instanceof Father //true
看见没，只要你是这一家子的人（实例）那你无论走哪这祖宗祠堂（原型链上的老东西们）都认你。那么他们是如何判断你是不是这家的儿孙呢？当然是原型链。我们来试着写一串伪代码来进行验证
function new_instance_of(leftVaule, rightVaule) {
let rightProto = rightVaule.prototype; // 取右表达式的 prototype 值
leftVaule = leftVaule.__proto__; // 取左表达式的__proto__值
while (true) {
if (leftVaule === null) {
return false;
}
if (leftVaule === rightProto) {
return true;
}
leftVaule = leftVaule.__proto__
}
}
如此这般，通过原型链认祖归宗。咱们看看是否有用
new_instance_of(son, Son) // true
new_instance_of(son, Father) // true
今天的内容就这么多