原型式继承怎么理解

Question

如何理解原型式继承？这里截取js高程3里的代码，对其中的原理不是很了解，希望能理解更透彻一些。

function object (o) {
    function F() {}
    F.prototype = o;
    return new F();
}
var person = {
    name: "Nicholas",
    friends: ["shelby","Count","Van"]
}
var person1 = object (person);
person1.name = "Gerg";
person1.friends.push("Job");
console.log(person1.name);
console.log(person1.friends);

var person2 = object(person);
console.log(person2.name);
console.log(person2.friends);

F prototype 和 o 的关系是怎样的？再补充一张图片

Answer 1

function object (o) {
    function F() {}
    F.prototype = o;
    return new F();
}
var person = {
    name: "Nicholas",
    friends: ["shelby","Count","Van"]
}
var person1 = object (person);
person1.name = "Gerg";
person1.friends.push("Job");
//此时，person1这个对象中并没有friends这个私有变量！
//所以 person1.friends -> person1.__proto__.friends; 
//或者说 person1.friends -> F.prototype.friends;
//注1，此时并没有F，F是私有变量，这么写只是为了方便看
//注2，此时的person1.friends只是个引用，真正指向了F.prototype.friends，即全局变量person.friends。   person1.friedns.push("Job")就是person.push("Job");
console.log(person1.name);  // Gerg应该没什么疑惑
console.log(person1.friends);//前两行push过了，打印出四个人名

var person2 = object(person);
console.log(person2.name);//person2并没有私有变量name,所以打印出person2.__proto__.name，即F.prototype.name，即person.name
console.log(person2.friends);//person2并没有私有变量friends,所以打印出person2.__proto__.friends，即F.prototype.friends，即person.friends

Answer 2

http://m.jb51.net/article/40964.htm

js之前的版本没有和其他编程语言一样的class类的概念，想实现继承只能把一个对象挂到另一个构造函数，当js运行的时候把用到的属性先从现有的对象中查找，找不到的话会到挂到prototype的对象去查找，找不到的话再到挂到这个protptype的对象的protptype去查找，直到到了没有prototype的bject

现在有了es6的class，继承你可以不用prototype，直接用class，学学es6吧

Answer 3

关于原型的回答，sf上挺多的了，譬如相似问题的那里面的好几个，你看一遍就差不多了。
解释一下代码吧：

object函数就是改变构造函数的prototype对象的，比如说你要继承person中的属性，那么就写一个空函数，把空函数的prototype对象修改成person。
然后new 这个空函数，产生实例，譬如说上面的person1，person1中如果定义了name属性，那么访问器访问的时候就返回person1中定义的name
如果没有实例中没有定义name就去产生这个实例的构造函数的prototype对象上找，person2就是为了说明这个意思。

上面的是通俗说法，省略了一些细节，你看几篇长文章就可以了解的更详细。

//补充你后来的问题

F.prototype 就是指向o的，再上面的例子中就是指向person的

Answer 4

在 Chrome 的控制台打印一下 person1 可以更清楚 person1 的原型链：

name: "Gerg"
[[Prototype]]: Object
  friends: (4) ['shelby', 'Count', 'Van', 'Job']
  name: "Nicholas"
  [[Prototype]]: Object
    constructor: ƒ Object()
    hasOwnProperty: ƒ hasOwnProperty()
    isPrototypeOf: ƒ isPrototypeOf()
    propertyIsEnumerable: ƒ propertyIsEnumerable()
    toLocaleString: ƒ toLocaleString()
    toString: ƒ toString()
    valueOf: ƒ valueOf()
    ...