ES6建構函式class 和 ES5建構函式語法

2021-10-05 04:56:33 字數 1413 閱讀 6579

在說建構函式之前,我們先講一講物件導向程式設計。所謂的物件導向程式設計,是一種程式設計思想和書寫方式方法,它是將程式封裝在物件內,並給物件設定屬性和屬性值。而這個封裝程式的物件我們稱之為例項化物件,而生成例項化物件的函式就是建構函式。

一般情況下,為了和普通函式區別,我們將建構函式的首字母大寫。

接下來我們說說定義建構函式,在函式內,定義例項化物件的方法,通過的是this來指定定義例項化物件的屬性:this.屬性=屬性值。而方法,我們設定在prototype中。在es5中,我們定義方法是通過:建構函式.prototype.函式方法名 = function(){} 來定義。我們來看下面的**。

function

fun1

(name,age,***)

fun1.prototype.f1=

function()

這是乙個簡單的建構函式,當我們呼叫這段**時會生成乙個例項化物件:

const obj1 =

newfun1

('張三',18

,'男');

obj1.f1(

);

我們來看一看執行結果

總結一下:es5的建構函式就是將我們需要的資料儲存在物件的屬性中,然後將方法儲存在建構函式的prototype中,當我們呼叫資料時通過例項化物件的屬性獲取,呼叫方法時,物件中沒有的方法會去例項化物件中尋找__proto__,而在__proto__中儲存著建構函式的prototype中的方法,因此我們直接使用「例項化物件.方法」就可以呼叫我們提前設定好的函式。

es5中的建構函式有一些小問題,它的prototype屬性是定義在函式外面的,那麼我們呼叫建構函式就需要在定義prototype的語句之後進行呼叫,否則我們生成的例項化物件中就只有屬性而沒有函式方法。而在es6中,新增了語法形式:class類,這是一種新的定義函式的語法,它的原理和es5的原理完全相同,區別只是格式不同。

接下來我們使用es6寫出和上面相同的效果:

class

fun2f2(

)}

在es6中,我們將所有的建構函式都寫在class中,在constructor中寫入我們需要的資料,然後直接在下面寫入需要的方法函式即可,它的功能與es5相同,最終效果也相同。

const obj2 =

newfun2

('李四',19

,'女');

很顯然,es6的語法更簡潔,推薦大家使用es6的語法格式。

ES6建構函式

es6 提供了更接近傳統語言的寫法,引入了 class 類 這個概念,作為物件的模板。通過class關鍵字,可以定義類。基本上,es6 的class可以看作只是乙個語法糖,它的絕大部分功能,es5 都可以做到,新的class寫法只是讓物件原型的寫法更加清晰 更像物件導向程式設計的語法而已。傳統的es...

ES6的class和繼承

二.class 的繼承 function myfun x,y myfun.prototype.function var a newmyfun 1 2 class myfun 類的內部所有定義的方法,都是不可列舉的 object.keys myfun.prototype 1.所有的類都有乙個const...

ES5與ES6建構函式

function 函式名 引數 函式名.prototype.方法名 function class 類名 方法名稱 1.定義建構函式 es5 function 函式名定義 es6 class 類名定義 注 class建構函式類名後沒有 2.定義例項化物件屬性和屬性值 es5 function 函式中定...