js組織函數
媒介:之前看過公司大神的代碼,發現有許多組織函數,相似Java和C#的 new 要領來實例化一個對象,覺得非常受教,恰好近來在用es6,發現了用class來完成組織函數,因而總結了一下,也是回憶和進步的歷程,因為本人也是前端小白,文章可能有許多毛病,迎接列位大神批評指正~~
傳統ES5語法
// 通例要領一
function Persion(name, age) {
this.name = name; // this.key 賦值,則直接掛載到Persion實例
this.age = age;
this.getInfo = function() {
return {
name: this.name,
age: this.age
}
}
}
// 挪用
var persion = new Persion('張三', 15);
// 此時的persion實例具有name、age、getInfo()三個屬性及要領
// 通例要領二
function Persion(name, age) {
var name = name;
var age = age;
var getInfo = function() {
return {
name: name,
age: age,
}
}
return { // 經由過程return將元素暴露給實例對象
name: name,
age: age,
getInfo: getInfo,
}
}
// 挪用
var persion = new Persion('張三', 15);
// 此時的persion實例具有name、age、getInfo()三個屬性及要領
ES6
class Persion {
constructor(name, age) { // 一個類必須有constructor要領, 假如沒有顯式定義, 一個空的constructor要領會被默許增加。
this.name = name;
this.age = age;
}
getInfo() {
return {
name: this.name,
age: this.age,
}
}
}
// 挪用
const persion = new Persion('張三', 17);
// 此時的persion實例具有name、age、getInfo()三個屬性及要領
注:ES6 class 聲明組織函數會將一切內部元素暴露出來,但有的時刻我們願望這些要領只在內部聲明時運用,並不暴露給實例對象,在ES5中我們能夠很輕易的做到,以下栗子:
// ES5 完成私有要領
// 計劃一
function Persion(name, age) {
this.name = name;
this.age = age;
var print = function(){
return name + '本年' + age + '歲了!';
}
this.setName = function(newName){
this.name = newName;
}
this.setAge = function(newAge){
this.age = newAge;
}
this.getInfo = function(){
{
name: name,
age: age,
}
}
this.printInfo = function(){
console.log(print());
}
}
// 實例化
var persion = newPersion('張三', 15);
// 計劃二
function Persion(name, age) {
var name = name,
age = age;
// print作為私有要領,只在內部用於天生輸出字符串,並不須要暴露到外部
var print = function(){
return name + '本年' + age + '歲了!';
}
var setName = function(newName){
name = newName;
}
var setAge = function(newAge){
age = newAge;
}
var getInfo = function(){
{
name: name,
age: age,
}
}
var printInfo = function(){
console.log(print());
}
return {
name: name,
age: age,
setName: setName,
setAge: setAge,
getInfo: getInfo,
printInfo: printInfo,
}
}
// 實例化
var persion = newPersion('張三', 15);
// 此時實例化的persion 將不會暴露出print要領,我個人更傾向於計劃二的要領,能夠清晰的看出哪些屬性和要領須要暴露出來,也輕易修正須要暴露的接口。
那末在ES6中我們要怎樣完成私有的要領和屬性呢?實在要領許多,但都很不友好,我只總結了三種,假如有什麼好的要領迎接人人給我留言,不勝感激:)
// 私有要領 變通計劃
// 計劃一 (實在並不算一個要領。。。)
class Persion {
constructor(name, age) {
this.name = name;
this.age = age;
}
_print() { // 通常以“_”開首定名的要領為內部私有要領
return name + '本年' + age + '歲了!';
}
setName(newName) {
this.name = newName;
}
setName(newAge) {
this.age= newAge;
}
printInfo() {
console.log(_print());
}
getInfo() {
return {
name: this.name,
name: this.age,
}
}
}
// 實例化
const persion = new Persion('張三', 15);
// 此時persion實例依然能獵取到_print要領,只能用來辨別私用和公有要領罷了;
// 計劃二
// 注重若運用ES6箭頭函數則this指向的是該要領自身,而非挪用它的對象,
function _print() { // 外部聲明_print 要領,在內部挪用,此時_print 成為Persion類的私有要領
return this.name + '本年' + this.age + '歲了!';
}
class Persion {
constructor(name, age) {
this.name = name;
this.age = age;
}
setName(newName) {
this.name = newName;
}
setName(newAge) {
this.age= newAge;
}
printInfo() {
console.log(_print());
}
getInfo() {
return {
name: this.name,
name: this.age,
}
}
}
// 實例化
const persion = new Persion('張三', 15);
// 此時persion實例獵取不到_print要領;
// 計劃三
const print = Symbol('print'); // 聲明一個Symbol值,用來做為私有要領的名字
class Persion {
constructor(name, age) {
this.name = name;
this.age = age;
}
setName(newName) {
this.name = newName;
}
setName(newAge) {
this.age= newAge;
}
[bar]() { // 將私有要領的名字定名為一個Symbol值。
return this.name + '本年' + this.age + '歲了!';
}
printInfo() {
console.log([bar]()); // 挪用私有要領
}
getInfo() {
return {
name: this.name,
name: this.age,
}
}
}
// 實例化
const persion = new Persion('張三', 15);
// 此時persion實例獵取不到[bar]要領;
# 追更
謝謝 @黒之染 的批評, 組織函數還能夠經由過程prototype來增加對象
栗子:
```
function Persion(name, age){
this.name = name,
this.age = age,
}
Persion.prototype.getInfo = function(){
return {
name: this.name,
age: this.name,
}
}
// 實例化
var persion = new Persion('張三');
// 此時實例化后的對象persion具有getInfo()要領
persion.getInfo() // 輸出{name: '張三'}
```
關於js組織函數的繼續能夠看一下我的下一篇文章js組織函數(繼續要領及利害)