JS原型链相关知识点的整理

推荐阅读地址(关于原型链讲解的很详细):http://blog.****.net/sinat_21274091/article/details/52741788

阅读了上面链接的知识点之后,可以尝试做下面的测试题:

测试题一:

function A () {
  }
  A.prototype.n = 1;
  var b = new A();
  A.prototype = {
    n: 2,
    m: 3
  }
  var c = new A();
  console.log(b.n, b.m, c.n, c.m);

答案:1 undefined 2 3

答案详解:

JS原型链相关知识点的整理A()函数对象中,属性被重新设置

JS原型链相关知识点的整理




在第二个测试题,之前先理解一个东西:

一、/*所有函数对象的proto都指向Function.prototype,它是一个空函数(Empty function)*/

下图详细的表达了,Function,Object,之间的关系

JS原型链相关知识点的整理JS原型链相关知识点的整理

测试题二

 function F (){}
  Object.prototype.a = function(){
    console.log('a()')
  }
  Function.prototype.b = function(){
    console.log('b()')
  }
  var f = new F()
  f.a();//a()
  f.b();//报错,找不到b
  F.a();//b()
  F.b();
  console.log(f);
  console.log(Object.prototype);
  console.log(Function.prototype);//function() {}

 解析:

(1)  f.a();//a()

JS原型链相关知识点的整理













(2)  f.b();//报错,找不到b

JS原型链相关知识点的整理JS原型链相关知识点的整理解析:b存在Function.prototype中,f沿着隐式原型链,查找到object.prototype.__proto__=null结束,找不到Function.prototype,如下图所示:

JS原型链相关知识点的整理













  (3)F.a();//b()

解析:a放在了object的原型对象上,object.prototype把F看做实例对象

JS原型链相关知识点的整理













  (4)F.b();//F

解析:console.log(Function.prototype);//function() {},Function.prototype里面的内容看不到,所以F.b()结果为F

JS原型链相关知识点的整理