关于一个原型链的误区

今天复习原型链的时候，发现有个误区（我自己的，不知道你们有没有），先看代码

function Fn() {
    this.test1 = function () {
      console.log('test1');
    }
  }

  console.log(Fn.prototype); 

  Fn.prototype.test2 = function () {
    console.log('test2');
  }

  var fn = new Fn();

  console.log(fn.__proto__);

1、首先先说 console.log(Fn.prototype); 。这条语句的输出如下：

看到这里输出当时觉得很奇怪，因为我认为应该 还有个 test1: f () ，但是这里只有 test2: f ()

重新再看一遍代码，发现问题所在，注意Fn函数里面的代码

this.test1 = function () {
console.log(‘test1’);
}

这里的代码我一开始理解为往Fn的原型对象上添加一个test1属性（不知道你是不是也这样认为，或者你理解为是设置（添加）Fn的原型对象的test1属性）。
其实不是，这里的代码意思是 设置Fn的实例对象的属性test1 或者理解为 往Fn的实例对象添加一个test1属性 （Fn的实例对象，也就是用 Fn函数 new出来的对象，以上代码中，fn就是Fn的实例对象，fn是被Fn函数new 出来的）。
你可以这样认为，Fn函数里面的代码是让Fn函数有了 往Fn的实例对象添加一个test1属性 这样一个功能，影响的是Fn的实例对象，不会对Fn函数的属性、原型对象做改变，所以没有输出 test1: f ()

再看这段代码

Fn.prototype.test2 = function () {
console.log(‘test2’);
}

这就是往Fn的原型对象上添加（设置）了一个 test2 属性，所以会打印出 test2

可能你又会有疑问，按照JS从上到下执行代码，不应该输出test2，因为输出语句在设置test2属性语句上面，这是因为 打印的是Fn最新的结果

2、再来看 console.log(fn.__proto__); 这条语句输出的结果

看到这里的输出结果，我又懵逼了，不应该还打印出 test1： f () 吗？？

这里就要说到原型链的属性问题了。

1. 读取对象属性值时，会自动到原型链中查找
2. 设置对象的属性值时，不会查找原型链，如果当前对象没有此属性，直接添加此属性并设置值
3. 方法一般定义在原型中，属性一般通过构造函数定义在对象身上

上面我说了，Fn函数内部的代码是 往Fn的实例对象添加一个test1属性 ，那么现在你再看一下关于原型链属性问题的描述，是不是明白了？？
这里没有test1，是因为设置对象的属性值不会查找原型链，而是直接给对象添加test1属性，而不是添加到原型链

还不明白？？
那么 我们在代码的末尾再添加一条语句，输出 fn

console.log { fn };

打印一下结果

这样你是不是明白了？
往Fn的实例对象添加一个test1属性，是直接给对象加一个 test1属性，而不是给对象的原型对象加test1属性

【如果还不明白评论，我看到了就回复你】