每个JavaScript对象都有个”原型”,对象可以通过原型为自己增加属性和方法,并可以访问原型上的属性和方法。这是怎么实现的呢?通过调试一段程序看一下。
1、写一段JavaScript源码,程序定义了两个对象man01和man02,同时调用了Object.setPrototypeOf原型函数。将代码放入html,用谷歌浏览器运行html文件。
<script type="text/javascript">
man01 = {eye: true};
man02 = {ear: true};
Object.setPrototypeOf(man01, man02);
if("ear" in man01)
console.log("man01 has ear")
</script>
2、按F12调出调试界面,在“Sources”页签为代码设断点,如【图-1】,刷新页面,代码将执行到断点行停下,在“Watch”中添加对象man01,可以看到man01有两个属性:
(1)eye:true
(2)proto:………
图中箭头指的proto就是原型。
【图-1】
3、单步执行到【图-2】,可以看“Watch”中出现了两个原型,
(1)第一个原型是man01的proto,它指向对象man02,所以包含了属性ear
(2)第二个原型是man02的proto
【图-2】
4、执行完程序,打开【图-3】的“Console”界面,可以看到输出结果,原先man01没有ear属性,现在有ear属性了,这就是通过对象的原型实现的。
【图-3】
5、执行后两个对象原型的关系可以用【图-4】表示,man01的原型指向man02。这样man01的原型和man02的原型就形成了一条“原型链”
【图-4】