javascript原型链

本文详细解释了JavaScript中的__proto__属性及其作用,包括如何通过它访问对象的原型链,以及如何理解其指向最高级原型Object.prototype的过程。文章还提供了实例解析和引申,帮助读者掌握如何利用__proto__属性进行对象继承和方法调用。

__proto__属性

__proto__:每个对象都有一个__proto__属性,相当于一个指针,可以指向某原型对象,并且引用其属性及方法。(有些浏览器没有)

var a = { 
x: 10, 
calculate: function (z) { 
return this.x + this.y + z 
} 
}; 
var b = { 
y: 20, 
__proto__: a 
}; 

var c = { 
y: 30, 
__proto__: a 
}; 
b.calculate(30); // 60

图片描述

__proto__的默认指向

它指向的是最高级的Object.prototype,而Object.prototype的__proto__为空

var d = {};
d.__proto__//Object {}
d.__proto__ === Object.prototype//true
Object.prototype.__proto__//null

prototype属性

原理说明

创建构造函数foo时,同时创建了一个原型对象foo {}并将其存储于foo.prototype中(FunctionName.prototype相当于一个原型对象),a是foo的一个实例可以通过a.__proto__访问到构造函数foo的原型对象。同时,此原型对象又有名为constructor的属性,它反过来引用函数本身。

function foo(){}
var a = new foo()
a.__proto__//foo {}
a.__proto__ === foo.prototype//true
foo.prototype.constructor//function foo(){}

实例解析

function Foo(y){ 
this.y = y ; 
} 
Foo.prototype.x = 10; 
Foo.prototype.calculate = function(z){ 
return this.x+this.y+z; 
}; 
var b = new Foo(20); 
console.log(b.calculate(30));//60

图片描述

引申

所以,在构造函数原型对象没有改写的情况下,我们可以通过constructor属性判断某个实例的构造函数是谁。

例1.function foo(){};
    var a = new foo();
    a.constructor//function foo(){}
例2.var b = {};
    b.constructor//function Object() { [native code] }
    Object.prototype//Object {}
    Object.prototype.constructor//function Object() { [native code] }

总结

实例的__proto__属性指向其构造函数的prototype属性里的原型对象

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值