什么是JavaScript原型,什么是JavaScript原型链

2020-06-16 作者:提刀少年

每个JavaScript对象都有个”原型”,对象可以通过原型为自己增加属性和方法,并可以访问原型上的属性和方法。这是怎么实现的呢?通过调试一段程序看一下。

1、写一段JavaScript源码,程序定义了两个对象man01和man02,同时调用了Object.setPrototypeOf原型函数。将代码放入html,用谷歌浏览器运行html文件。

  1. <script type="text/javascript">
  2. man01 = {eye: true};
  3. man02 = {ear: true};
  4. Object.setPrototypeOf(man01, man02);
  5. if("ear" in man01)
  6. console.log("man01 has ear")
  7. </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】