構(gòu)造函數(shù)、構(gòu)造函數(shù)實例神帅、構(gòu)造函數(shù)原型
function Student (name) {
this.name = name;
}
Student.prototype.getName = function() {
console.log(this.name);
};
var student = new Student("Spursyy");
student.getName();
function Student (name) { } - 這是構(gòu)造函數(shù)
var student = new Student("Spursyy") - 這是構(gòu)造函數(shù)實例
Page 1, highlight 部分即為構(gòu)造函數(shù)原型
根據(jù)Page 1 與 Page 2, 可以歸納出構(gòu)造函數(shù)下硕,構(gòu)造函數(shù)原型與構(gòu)造函數(shù)實例之間的關(guān)系圖譜如下,
原型鏈
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構(gòu)造函數(shù)實例化對象賦值給People構(gòu)造函數(shù)原型贩汉,
這樣Student 的構(gòu)造函數(shù)原型上的getAge(), 就傳遞給People構(gòu)造函數(shù)原型革屠。
原形鏈問題
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"}
為什么后面的代碼修改的是原型鏈上的屬性呢猎拨?
這個問題主要的原因是由于基本類型與引用類型的區(qū)別,構(gòu)造函數(shù)的animal 的屬性catagory 是個對象(引用數(shù)據(jù)類型)屠阻,系統(tǒng)會為這個對象單獨開辟一個空間,dog 作為animal 構(gòu)造函數(shù)的子對象额各,自然會共享catagory 這個引用數(shù)據(jù)類型国觉。故在子對象上修改catagory就是在修改內(nèi)存中的catogory, 因此父的catagory 對象也是會被修改虾啦。