1. 程式人生 > >javascript物件繼承中的問題

javascript物件繼承中的問題

新建立的對像屬性值一樣

建立如下所示的javascript物件,並執行程式碼:

    function Person(name ,age ,sex ,weight){
    	this.name = name;
    	this.age = age;
    	this.sex = sex;
    	this.weight = weight;
    }
    Person.prototype.sayHi(){
    	console.log('你好');
    }
    function Student(score){
    	this.score = score;
    }
Student.prototype = new Person('小明',10,'男','50kg'); var stu1 = new Student(100); console.log(stu1.name,stu1.age,stu1.sex,stu1.weight,stu1.score); var stu2 = new Student(200); console.log(stu2.name,stu2.age,stu2.sex,stu2.weight,stu2.score); var stu3 = new Student(300); console.log
(stu3.name,stu3.age,stu3.sex,stu3.weight,stu3.score);

在這裡插入圖片描述 從執行結果,可以發現以下問題: 因為改變原型指向的同時實現繼承,直接初始化了屬性,繼承過來的屬性的值都是一樣的了,所以這就是問題。 解決方法:

function Person(name ,age ,sex ,weight){
     this.name = name;
     this.age = age;
     this.sex = sex;
     this.weight = weight;
}
Person.prototype.sayHi(){
     console.
log('你好'); } function Student(name,age,sex,weight,score){ //借用建構函式 Person.call(this,name,age,sex,weight); this.score = score; } var stu1 = new Student('小明',20,'男','50kg',100); console.log(stu1.name,stu1.age,stu1.sex,stu1.weight,stu1.score); var stu2 = new Student('小紅',21,'女','45kg',90); console.log(stu2.name,stu2.age,stu2.sex,stu2.weight,stu2.score); var stu3 = new Student('小李',23,'男','60kg',98); console.log(stu3.name,stu3.age,stu3.sex,stu3.weight,stu3.score);

在這裡插入圖片描述

可以發現,物件的屬性問題已經解決了,但是 person 物件的方法sayHi並沒由繼承過來。終極解決方案如(組合繼承)下

function Person(name ,age ,sex ,weight){
     this.name = name;
     this.age = age;
     this.sex = sex;
     this.weight = weight;
}
Person.prototype.sayHi(){
     console.log('你好');
}
function Student(name,age,sex,weight,score){
     //借用建構函式
     Person.call(this,name,age,sex,weight);
     this.score = score;
}
Student.prototype = new Person();
var stu1 = new Student('小明',20,'男','50kg',100);
console.log(stu1.name,stu1.age,stu1.sex,stu1.weight,stu1.score);
stu1.sayHi();
var stu2 = new Student('小紅',21,'女','45kg',90);
console.log(stu2.name,stu2.age,stu2.sex,stu2.weight,stu2.score);
stu2.sayHi();
var stu3 = new Student('小李',23,'男','60kg',98);
console.log(stu3.name,stu3.age,stu3.sex,stu3.weight,stu3.score);
stu3.sayHi();

在這裡插入圖片描述