ES6 Class 與 ES5 建構函式對比

user類被編譯以後轉化為建構函式。被編譯後生成了_classcallcheck,_instanceof方法。

class

user
const user =
newuser()
;console.
log(user)
;// {}
//↑↑↑↑↑↑↑↑↑↑↑↑↑ es6 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑
//↓↓↓↓↓↓↓↓↓↓↓↓↓ es5 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓
"use strict"
;function
_instanceof
(left, right)
else
}function
_classcallcheck
(instance, constructor)
}var
user
=function
user()
;var user =
newuser()
;console.
log(user)
;// {}

雖然與address賦值方式不一樣，但是最終的效果是一致的。

注意：name、age不是定義在原型上的屬性

class

user
}const user =
newuser()
;console.
log(user);//
//↑↑↑↑↑↑↑↑↑↑↑↑↑ es6 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑
//↓↓↓↓↓↓↓↓↓↓↓↓↓ es5 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓
function
_defineproperty
(obj, key, value));
}else
return obj;
}var
user
=function
user()
;

sayname函式在建構函式的原型上

呼叫了_defineproperties(constructor.prototype, protoprops);

class

user
}const user =
newuser()
;user.
sayname()
//↑↑↑↑↑↑↑↑↑↑↑↑↑ es6 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑
//↓↓↓↓↓↓↓↓↓↓↓↓↓ es5 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓
function
_defineproperties
(target, props)
}function
_createclass
(constructor, protoprops, staticprops)
var user =
(function()
_createclass
(user,[}
]);return user;})
();var user =
newuser()
;user.
sayname
()

class

user
}//↑↑↑↑↑↑↑↑↑↑↑↑↑ es6 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑
//↓↓↓↓↓↓↓↓↓↓↓↓↓ es5 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓
varuser
=function
user()
);};

class

user
//↑↑↑↑↑↑↑↑↑↑↑↑↑ es6 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑
//↓↓↓↓↓↓↓↓↓↓↓↓↓ es5 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓
varuser
=function
user()
;//省略_defineproperty方法原始碼
//靜態屬性 被編譯後 第乙個引數是user，而普通屬性則是this
_defineproperty
(user,
"name"
,"jason"
);

class

user
}//↑↑↑↑↑↑↑↑↑↑↑↑↑ es6 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑
//↓↓↓↓↓↓↓↓↓↓↓↓↓ es5 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓
function
_defineproperties
(target, props)
}function
_createclass
(constructor, protoprops, staticprops)
var user =
/*#__pure__*/
function()
//靜態函式編譯後，第二個引數設定為null
_createclass
(user,
null,[
}]);
return user;}(
);

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

在說建構函式之前，我們先講一講物件導向程式設計。所謂的物件導向程式設計,是一種程式設計思想和書寫方式方法，它是將程式封裝在物件內，並給物件設定屬性和屬性值。而這個封裝程式的物件我們稱之為例項化物件，而生成例項化物件的函式就是建構函式。一般情況下，為了和普通函式區別，我們將建構函式的首字母大寫。接下來...

ES5與ES6建構函式

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

ES5建構函式與ES6類

es5的建構函式 function f name f.prototype.writecss function f.writejs function 定義在類上的靜態屬性 let f new f f.writecss f.writejs es6的類 class f writecss static wr...