Javascript原型繼承是指對象的實例可以通過繼承原型鏈上的屬性和方法實現代碼的復用。原型繼承不僅是Javascript面向對象編程中重要的概念,也是語言核心的一部分。在本文中,我們將討論Javascript原型繼承的相關知識。
首先,我們來創建一個對象,并讓另一個對象繼承它。假設我們有以下一個基本對象,它有一個屬性"type"和一個方法"greet":
let Person = function (name) { this.name = name; } Person.prototype.type = "Human"; Person.prototype.greet = function () { return "Hello, my name is " + this.name + " and I am a " + this.type; }現在,我們可以創建一個"Student"對象并讓它繼承"Person"。為了實現繼承,我們需要使用"Object.create()"方法,并將"Person.prototype"作為參數。
let Student = function (name, grade) { Person.call(this, name); this.grade = grade; } Student.prototype = Object.create(Person.prototype); Student.prototype.constructor = Student; Student.prototype.type = "Student"; Student.prototype.getGrade = function () { return this.grade; }在以上代碼中,我們使用"call()"方法來調用"Person"構造函數,在"Student"構造函數中設置"name"屬性以及新的"grade"屬性。我們還將"Student.prototype"對象指向一個新的對象,它是"Person.prototype"對象的副本,并設置構造函數為"Student"。然后我們可以在"Student.prototype"中添加"getGrade()"方法和"type"屬性。現在我們可以測試這兩個類:
let john = new Person("John"); let jane = new Student("Jane", 9); console.log(john.greet()); // "Hello, my name is John and I am a Human" console.log(jane.greet()); // "Hello, my name is Jane and I am a Student" console.log(jane.getGrade()); // 9在上面的代碼中,我們首先創建了一個"Person"對象"john"和一個"Student"對象"jane",然后調用它們的"greet()"方法和"getGrade()"方法來輸出它們的屬性。我們可以看到,"jane"繼承了"Person"的"greet()"方法,同時添加了自己的"getGrade()"方法。此外,我們還可以看到,"jane"重寫了"type"屬性。這是因為"Student.prototype"繼承了"Person.prototype"的"type"屬性,但它的值已被修改。 除了使用"Object.create()"方法,還可以使用"Object.setPrototypeOf()"方法將一個對象的原型設置為另一個對象。例如:
let Person = function (name) { this.name = name; } Person.prototype.type = "Human"; Person.prototype.greet = function () { return "Hello, my name is " + this.name + " and I am a " + this.type; } let Student = function (name, grade) { Person.call(this, name); this.grade = grade; } Student.prototype.getGrade = function () { return this.grade; } let jane = new Student("Jane", 9); Object.setPrototypeOf(Student.prototype, Person.prototype); console.log(jane.greet()); // "Hello, my name is Jane and I am a Human" console.log(jane.getGrade()); // 9在上面的代碼中,我們首先創建了一個"Person"對象并添加了"type"屬性和"greet()"方法。然后創建了一個"Student"對象并在它的原型上添加"getGrade()"方法。最后,我們將"Student.prototype"的原型設置為"Person.prototype"。我們可以看到,"jane"現在可以使用"Person"的"greet()"方法。 在Javascript中,對象可以繼承多個原型。例如:
let Person = function (name) { this.name = name; } Person.prototype.greet = function () { return "Hello, my name is " + this.name; } let Athlete = function () {} Athlete.prototype.run = function () { return this.name + " is running"; } let Student = function (name, grade) { Person.call(this, name); this.grade = grade; } Object.setPrototypeOf(Student.prototype, Person.prototype); Object.setPrototypeOf(Student.prototype, Athlete.prototype); let jane = new Student("Jane", 9); console.log(jane.greet()); // "Hello, my name is Jane" console.log(jane.run()); // "Jane is running"在上面的代碼中,我們創建了一個"Person"對象和一個"Athlete"對象,并分別制定了它們的"greet()"方法和"run()"方法。然后我們創建了一個"Student"對象并使它同時繼承"Person"和"Athlete"原型。最后,我們測試了"jane"對象,可以看到它可以使用"Person"的"greet()"方法和"Athlete"的"run()"方法。 總之,Javascript原型繼承是一種非常強大和靈活的方式,可以讓我們避免重復代碼并提高代碼復用性。但是,我們需要理解它的工作原理,并遵循良好的代碼開發實踐,以保持代碼的可讀性和可維護性。
上一篇html php資源
下一篇php inodb