首頁 > 文章 > web前端 > JS物件導向程式設計中封裝的解析

JS物件導向程式設計中封裝的解析

不言原創: 2018-08-01 16:07:372091瀏覽

這篇文章要跟大家介紹的內容是關於JS物件導向程式設計中封裝的解析，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

我們所熟知的物件導向語言如C 、Java 都有類別的概念，類別是實例的類型模板，例如Student表示學生這種類型，而不表示任何具體的某個學生，而實例就是根據這個類型創建的一個具體的對象，比如zhangsan、lisi，由類別生成對象體現了抽像模板到具體化的過程，這叫做基於類別的物件導向方式，而JavaScript 沒有類別的概念，是基於原型的物件導向方式（雖然Es6 增加了class，實質是對原型方式的封裝）。總結起來就是以下兩點：

在基於類別的物件導向方式中，物件（object）依賴類別（class）來產生。
在基於原型的物件導向方式中，物件（object）則是依賴建構子（constructor）和原型（prototype）建構出來的。

物件導向語言的第一個特性毫無疑問是封裝，在JS 中，封裝的過程就是把一些屬性和方法放到物件中「包裹」起來，那麼我們要怎麼去封裝屬性和方法，或者說怎麼去創建物件呢（後文統一說創建物件）？以下用逐步推進的方式闡述：

物件字面量--> 工廠模式--> 建構子--> 原型模式--> 建構子原型模

物件字面量

JS中建立物件最原始的方式有兩種：

物件字面量

var  person = {
    name: "leon",
    age: "20",

    greeting: function() {
      alert('Hi!');
    }
}

為

實例新增屬性方法

var person = new Object();
person.name = "leon";
person.age = "20";

person.greeting = function() {
  alert('Hi!');
};

工廠模式

function createPerson(name, age) {
  var person = new Object();
  person.name = name;
  person.age = age;

  person.greeting = function() {
    alert('Hi!');
  };
}

var person1 = createPerson("leon", "20");

建構子JS 中建構子與其他函數的唯一區別，就在於調用它的方式不同。任何函數，只要透過

new

操作符來調用，那它就可以作為建構函數。來看下面的範例：<pre class="brush:php;toolbar:false">function Person(name, age) { this.name = name; this.age = age; this.greeting = function() { alert('Hi!'); }; // return this; } var person1 = new Person("leon", "20"); var person2 = new Person("jack", "21");</pre>透過建構子

new

將建構子內的
this
傳回新物件（JS 引擎會預設新增
return this;

而透過建構函式所建立的物件都有一個

constructor

屬性，它是一個指向建構函式本身的指針，因此就可以偵測物件的型別啦。：

alert(person1.constructor === Person) //true
alert(person1 instanceof Person) // true

但是仍然存在問題：<pre class="brush:php;toolbar:false">alert(person1.greeting == person2.greeting) //false</pre>同一個建構子中定義了

greeting()

原型模式終於講到了原型模式，JS 中每個建構函式都有一個prototype<em>屬性，這個屬性是一個指標，指向原型對象，而這個原型對象包含了這個建構子所有實例共享的屬性和方法。而實例物件中有一個</em>proto屬性，它指向原型對象，也就是建構子.prototype = = 原型物件== 物件._proto_，那麼對象就可以取得到原型物件中的屬性和方法啦。同時，所有物件中都有一個constructor屬性，原型物件的

constructor###指向其對應的建構子。 ###

使用原型，就意味着我们可以把希望实例共享的属性和方法放到原型对象中去，而不是放在构造函数中，这样每一次通过构造函数new一个实例，原型对象中定义的方法都不会重新创建一次。来看下面的例子：

function Person() {
}

Person.prototype.name = "leon";
Person.prototype.age = "20";
Person.prototype.greeting = function() {
  alert('Hi!');
};

var person1 = new Person();
var person2 = new Person();
alert(person1.name); //"leon"
alert(person2.name); //"leon"
alert(person1.greeting == person2.greeting); //true

优点：与单纯使用构造函数不一样，原型对象中的方法不会在实例中重新创建一次，节约内存。
缺点：使用空构造函数，实例 person1 和 person2 的 name都一样了，我们显然不希望所有实例属性方法都一样，它们还是要有自己独有的属性方法。
解决办法：构造函数+原型模式组合使用。

另外 JS 中还定义了一些与原型相关的属性，这里罗列一下：

Object.getPrototypeOf()，取得实例的原型对象。

Object.getPrototypeOf(person1);

isPrototypeOf()，判断是不是一个实例的原型对象。

Person.prototype.isPrototypeOf(person1);

hasOwnProperty()，检测一个属性是否存在于实例中

person1.hasOwnProperty("name");

in，判断一个属性是否存在于实例和原型中。

"name" in person1;

构造函数+原型模式

最后一种方式就是组合使用构造函数和原型模式，构造函数用于定义实例属性，而共享属性和方法定义在原型对象中。这样每个实例都有自己独有的属性，同时又有对共享方法的引用，节省内存。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype = {
  constructor: Person,
  nationality: "China",
  greeting: function() {
    alert(this.name);
  }
}

var person1 = new Person("leon", "20");
var person2 = new Person("jack", "21");
alert(person1.greeting == person2.greeting) //true

上面代码中用对象字面量的形式重写了原型对象，这样相当于创建了一个新的对象，那么它的constructor属性就会指向Object，这里为了让它继续指向构造函数，显示的写上了constructor: Person

这种构造函数与原型模式混成的模式，是目前在 JS 中使用最为广泛的一种创建对象的方法。

JS物件導向程式設計中封裝的解析

物件字面量

构造函数+原型模式

相關文章