1. 程式人生 > >【慕課網】JavaScript中OOP(上)

【慕課網】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;    
    };
}