【慕課網】JavaScript中OOP(上)
1.概念與繼承
面向物件程式設計(Object-oriented programming,OOP)是一種程式設計範型,同時也是一種程式開發的方法。物件指的是類的例項。它將物件作為程式的基本單元,將程式和資料封裝其中,以提高軟體的重用性、靈活性和擴充套件性。
面向物件特點:繼承、封裝、多型、抽象。
prototype是JavaScript屬性。
prototype 屬性使您有能力向物件新增屬性和方法。
object.prototype.name=value
function Foo(){ this.y = 2; } typeof Foo.prototype; // "object" Foo.prototype.x = 1; var obj3 = new Foo(); obj3.y; // 2 obj3.x; //1
prototype屬性與原型
Foo.prototype屬性與原型,prototype是物件上的一個基本屬性,Foo的原型則是這個基本屬性結構上的_proto_屬性指向(一般為object),new Foo()出來的物件原型指向Foo.prototype。
函式原型繼承例項
Person(name,age) 構造一個物件
person.prototype.hi=function(){} 為物件建立一個例項共享的方法
用new Person去例項化一個物件,構造器裡的this指標就指向了構造物件的prototype物件。
子類用 Person.call(this,name,age)來繼承父類
Student.prototype = Object.create(Person.prototype); //Objcet.create: 建立一個空物件,並且物件原型指向它的引數。要用這句話的原因是,如果不用Object.create,那麼,為學生類建立一個prototype屬性時,也同時會賦給了Person.
Student.prototype.constructor = Student; //這個不設定,那麼這個constructor會指向Person
2.再談原型鏈
針對上面程式碼示例的示意圖:
3.prototype屬性
Student.prototype.x = 101; bosn.x; //101 Student.prototype = {y:2}; bosn.y; // undefined bosn.x; //101 var nunnly = new Student('Nunnly',3,'Class LOL KengB'); nunnly.x; //undefined nunnly.y; //2
增加或刪除Student.prototype上的屬性會影響它所建立的例項bosn;但如果直接修改Student.prototype(Student.prototype = {y:2};)不會影響修改之前已經建立的例項bosn.但是Student.prototype = {y:2};會影響後續在Student基礎上新建的例項。
修改物件的原型不會影響已經建立過的例項,但是會影響後續建立的例項。
動態改變原型的屬性值,會影響已經存在例項化物件的屬性值。動態改變原型的屬性,相應已經例項化物件的對應屬性值並不會改變。新例項化物件對應屬性值會改變。
內建構造器的prototype
因為第二個設定不可列舉,所以結果就是輸出不了key值。
建立物件-new/原型鏈
4.instanceof
new Object() instanceof Array === false //new Object()的原型鏈是null,所以為false
[1,2] instanceof Array === true
右邊構造器的prototype屬性是否出現在左邊的物件的原型鏈上
右邊必須是函式(不是函式會報錯),左邊是物件(不是的話,直接返回false)
!!!不同window或iframe間的物件型別檢測不能使用instanceof
原型鏈上有的,用instanceof就能返回true。
5.實現繼承的方式
實現繼承的方式:
function Person() {}
function Student() {}
Student.prototype = Person.prototype;//!!!不可以這麼賦值,會相互影響
Student.prototype = new Person();//會有Person原型,但是還是會有問題,只是類還沒有例項化
Student.prototype = Object.create(Person.prototype);// 新建立一個物件,物件的原型指向Person
ES5之才支援
ES5之前
if(!Object.create){
Object.create = function(proto){
function F() {}
F.prototype = proto;
return new F;
};
}