Javascript 基础之原型链

构造函数、构造函数实例、构造函数原型

function Student (name) {
    this.name = name;
}
Student.prototype.getName = function() {
    console.log(this.name);
};
var student = new Student("Spursyy");
student.getName();

function Student (name) { } - 这是构造函数
var student = new Student("Spursyy") - 这是构造函数实例

Page 1

Page 1, highlight 部分即为构造函数原型

Page 2

根据Page 1 与 Page 2, 可以归纳出构造函数，构造函数原型与构造函数实例之间的关系图谱如下，

Page 3

原型链

function Student (age) {
    this.age = age;
}
Student.prototype.getAge = function() {
    console.log(this.age);
};

function People(name) {
    this.name = name;
}
People.prototype = new Student("18");
People.prototype.getName = function() {
    console.log(this.name);
};
var people = new People("Spursyy"); 
people.getName();       //  Spursyy
people.getAge();          //  18

观察上面代码，把Student构造函数实例化对象赋值给People构造函数原型，
这样Student 的构造函数原型上的getAge()， 就传递给People构造函数原型。

Page 4

原形链问题

var person = {
    name: "Spursy",
    age: 15
}
var student = Object.create(person);
student.name = "YY";

console.log(`person name: ${person.name}`);   // YY
console.log(`student name: ${student.name}`);   // Spursy

var animal = {
    catagory: {
        dogA: "small dogs"
    }
}
var dog = Object.create(animal);
dog.catagory = {
    dogB: "big dogs"
}
console.log(`animal catagory: ${JSON.stringify(dog.catagory)}`);     // {dogA: "small dogs"}
console.log(`animal catagory: ${JSON.stringify(animal.catagory)}`);      // {dogB: "big dogs"}

为什么后面的代码修改的是原型链上的属性呢？

这个问题主要的原因是由于基本类型与引用类型的区别，构造函数的animal 的属性catagory 是个对象（引用数据类型），系统会为这个对象单独开辟一个空间，dog 作为animal 构造函数的子对象，自然会共享catagory 这个引用数据类型。故在子对象上修改catagory就是在修改内存中的catogory， 因此父的catagory 对象也是会被修改。