Javascript 物件導向程式設計(三)

你的好友上線了發表於2018-06-14
JavaScript物件程式設計

理解什麼是繼承

方法和屬性從一個類傳遞到另一個類的過程

為什麼需要繼承機制

  funtion Person(firstName, lastName) {
    this.firstName = firstName
    this.lastName = lastName
  }
  Person.prototype.sayHi = function() {
    return "Hi" + this.firstName + " " + this.lastName;
  }

  function Student(firstName, lastName){
    return Person.apply(this, arguments);
}

Student.prototype.sayHi = function(){
    return "Hi " + this.firstName + " " + this.lastName;
}
複製程式碼

我們真的需要在學生身上重新定義sayHi嗎?這似乎重複…… 那怎麼辦？

function Person(firstName, lastName){
    this.firstName = firstName;
    this.lastName = lastName;
}

Person.prototype.sayHi = function(){
    return "Hi " + this.firstName + " " + this.lastName;
}
複製程式碼

將一個物件的原型屬性指定為另一個物件的原型屬性!

function Student(firstName, lastName){
    return Person.apply(this, arguments);
}

Student.prototype = Person.prototype;

var s1 = new Student('李','哈')
s1.sayHi() // "Hi 李 哈"
複製程式碼

有用:)!

繼續看看 在Student prototype物件上新增一些別的

  Student.prototype.status = function(){
    return 'I am currently a student'
  }
複製程式碼

讓我們用Person建立一個物件

  var p1 = new Person('下','啦')
  p1.status() // 'I am currently a student'
複製程式碼

哦哦……為什麼Person原型有student原型的屬性?學生繼承的是人，而不是人。

問題

  • 我們不能將一個物件分配給另一個物件——它只會建立一個引用!
  • 如果我們改變Student.prototype，會影響Person.prototype
  • 我們仍然需要來自父類原型的所有方法和屬性，但是我們想要兩個完全獨立的物件——而不是引用!

一個更好的選擇Object.create

建立一個全新的函式並接受它的第一個引數，即新建立物件的原型物件。

function Student(firstName, lastName){
    return Person.apply(this, arguments);
}

Student.prototype = Object.create(Person.prototype);
Student.prototype.status = function(){
    return "I am currently a student!"
}
var p1 = new Person('李', '哈');
p1.status; // undefined 
複製程式碼

Student.prototype 不會影響 Person.prototype !

思考為什麼不是new?

function Student(firstName, lastName){
    return Person.apply(this, arguments);
}

Student.prototype = new Person();
// 1. Person被執行了兩次
// 2. 程式碼重複，增加了多餘的不需要的屬性在Student的原型物件上面
複製程式碼

優化一下

function Student(firstName, lastName){
    return Person.apply(this, arguments);
}

Student.prototype.sayHi = function(){
    return "Hello " + this.firstName + " " + this.lastName;
}

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor; // Person
Student.prototype.constructor = Student;
複製程式碼

繼承的兩個要點

  • 將原型設定為使用另一個原型建立的物件
  • 重置建構函式屬性

總結

  • 每次使用new關鍵字時，在建立的物件和建構函式的prototype屬性之間建立一個連結——可以使用__proto__訪問這個連結
  • prototype物件包含一個名為建構函式的屬性，該屬性指向建構函式
  • 為了共享由建構函式建立的物件的屬性和方法，將它們放在原型中，因為它是最有效的。
  • 要將方法和屬性從一個原型物件傳遞到另一個原型物件，我們可以使用繼承，其中包括使用物件將prototype屬性設定為新建立的物件。建立並重新設定建構函式屬性

相關文章