JavaScript精煉---類(class)、構造函數(constructor)、原型(proto

zzbo 發布于2019-08-26 10:10 / 2780人閱讀

摘要：在討論構造器和原型方法前，我可以看看一種叫做工廠方式的仿造方法。因此，出現了構造函數方式，它的關鍵在于構造器概念的引入。

類 Class
類的概念應該是面向對象語言的一個特色，但是JavaScript并不像Java，C++等高級語言那樣擁有正式的類，而是多數通過構造器以及原型方式來仿造實現。在討論構造器和原型方法前，我可以看看一種叫做“工廠方式”的仿造方法。

function start() {

   alert("Bang!!");

}


function createCar(color, title) {

   var car = {};

   car.color = color;

   car.title = title;

   car.start = start;

   return car;

}

 

var car1 = createCar("red", "BMW");

var car2 = createCar("yellow", "VOIS");

這種方式顯然可以實現class的功能，但是外形上怎么也無法說它是個class以及class實例的創建過程。因此，出現了“構造函數方式”，它的關鍵在于構造器（Constructor）概念的引入。

構造器 Constructor
加粗文字
我們先來看“構造函數方式”的具體做法：

function start(){

   alert("Bang!!!");

}

 

//constructor

function Car(color, title){

   this.color = color;

   this.title = title;

   this.start = start;

}

 

var car1 = new Car("red", "BMW");

var car2 = new Car("yellow", "VOIS");

這個看起來有點類的樣子了吧（先不提那個難看的外置function）？我們發現，那個constructor其實就是一個簡單的function，它與“工廠方式”中的createCar()區別就在于：1、方法名大寫 2、沒有了空對象的創建和返回 3、使用this做引用。那原來的那個空對象的創建以及返回的步驟去哪了呢？這兩個步驟，現在都由創建實例時的“new”實現了。“new”這個操作符負責創建一個空對象，然后將那個叫做構造器的function添加到實例對象中并觸發它，這樣這個function實際上就是這個對象的一個method，function中的this指向的便是這個對象，最后將這個對象返回。根據如上分析，我們可以把這個過程簡單分解為如下代碼：

var obj = {};

obj.constructor = Car;

obj.constructor("red", "BMW");  //”this“ refers to obj

return obj;

GPU云服務器云服務器父類構造函數 php類構造函數 javascript原型 java中class類

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/105706.html

JavaScript繼承理解：ES5繼承方式+ES6Class繼承對比

摘要：寄生組合式繼承的繼承方式有多種主要有原型鏈繼承借用構造函數組合式繼承寄生式繼承和寄生組合式繼承。中利用定義類，實現類的繼承子類里調用父類構造函數實現實例屬性和方法的繼承子類原型繼承父類原型，實現原型對象上方法的繼承。 JavaScript中實現繼承 ??在JavaScript中實現繼承主要實現以下兩方面的屬性和方法的繼承，這兩方面相互互補，既有共享的屬性和方法，又有特有的屬性和方法。 ...

liaoyg8023 2019-08-26 12:09 評論0 收藏0
javascript的面向對象，原型鏈及繼承

摘要：也就是說，不必在構造函數中添加定義對象信息，而是可以直接將這些信息添加到原型中。子類的屬性，表示構造函數的繼承，總是指向父類。以前，這些原生構造函數是無法繼承的。面向對象 js是一門基于對象的語言。js中的一切皆對象; console.log(Object.prototype.toString.call(123)) //[object Number] console....

Xufc 2019-08-22 14:00 評論0 收藏0
JavaScript 五十問——從源碼分析 ES6 Class 的實現機制

摘要：防止類的構造函數以普通函數的方式調用。這個函數的主要作用是通過給類添加方法，其中將靜態方法添加到構造函數上，將非靜態的方法添加到構造函數的原型對象上。 Class是ES6中新加入的繼承機制，實際是Javascript關于原型繼承機制的語法糖，本質上是對原型繼承的封裝。本文將會討論：1、ES6 class的實現細2、相關Object API盤點3、Javascript中的繼承實現方案盤點...

LeexMuller 2019-08-23 14:38 評論0 收藏0
Javascript面向對象與繼承

摘要：眾所周知，是一門面向對象的語言，如果說針對面向對象來發問的話，我會想到兩個問題，在中，類與實例對象是如何創建的，類與實例對象又是如何實現繼承的。但是在中是指向的，因為每一個構造函數其實都是這個對象構造的，中子類的指向父類可以實現屬性的繼承。眾所周知，Javascript是一門面向對象的語言，如果說針對面向對象來發問的話，我會想到兩個問題，在js中，類與實例對象是如何創建的，類與實例對...

pcChao 2019-08-22 16:02 評論0 收藏0
ES6中class的使用

摘要：如果不指定一個構造函數方法則使用一個默認的構造函數。一個類中出現多次構造函數方法將會拋出一個錯誤。四關鍵字作為函數時，指向父類的構造函數。五類的屬性和屬性作為構造函數的語法糖，同時有屬性和屬性，因此同時存在兩條繼承鏈。一、class的定義與基本用法 1.class的定義 ECMAScript 2015 中引入的 JavaScript 類實質上是 JavaScript 現有的基于原型的...

用戶84 2019-08-23 18:34 評論0 收藏0