摘要:今年歲了調用私有方法實例化張三此時實例獲取不到方法追更感謝之染的評論,構造函數還可以通過來添加對象栗子實例化張三此時實例化后的對象擁有方法輸出張三關于構造函數的繼承可以看一下我的下一篇文章構造函數繼承方法及利弊
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構造函數(繼承方法及利弊)
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/95593.html
摘要:對象創建的三種方式字面量創建方式系統內置構造函數方式自定義構造函數構造函數原型實例之間的關系實例是由構造函數實例化創建的,每個函數在被創建的時候,都會默認有一個對象。 JS 對象創建的三種方式 //字面量創建方式 var person= { name:jack } //系統內置構造函數方式 var person= new Object(); person.name = jack; ...
首先明確兩個概念: 構造函數和 instance 分別是什么 構造函數JS 中并沒有在語法層面上面區分構造函數和普通函數, 唯一的區別是調用方式使用 new 調用的函數就是構造函數, 沒有則是普通函數. 實例new Constructor() 返回的對象稱為 Constructor 的一個實例 然后提出一個規則:在構造函數的原型上面附加的屬性或者方法, 可以被其所有的實例共用. 可以推導出: ...
摘要:在基于原型的面向對象方式中,對象則是依靠構造函數和原型構造出來的。來看下面的例子優點與單純使用構造函數不一樣,原型對象中的方法不會在實例中重新創建一次,節約內存。 我們所熟知的面向對象語言如 C++、Java 都有類的的概念,類是實例的類型模板,比如Student表示學生這種類型,而不表示任何具體的某個學生,而實例就是根據這個類型創建的一個具體的對象,比如zhangsan、lisi,由...
摘要:用對象字面量形式創建的對象,直接賦值給函數的原型對象,本質上完全重寫了其對象,因此屬性也就變成了新對象的屬性指向構造函數,不再指向函數。 【上一篇】:JavaScript對象內部屬性及其特性總結 showImg(https://segmentfault.com/img/bVbjYsc?w=839&h=489); 工廠模式(★★) 先在內部顯示地創建一個臨時對象,根據接收的參數來構建(賦...
摘要:構造函數的兩個特征函數內部使用了,指向所要生成的對象實例。將一個空對象的指向構造函數的屬性,這個對象就是要返回的實例對象。用面向對象開發時,把要生成的實例對象的特有屬性放到構造函數內,把共有的方法放到構造函數的里面。 JS中面向對象的概念 面向對象OOP是一種組織代碼結構、實現功能過程的思維方式。它將真實世界各種復雜的關系,抽象為一個個對象,然后由對象之間的分工與合作,完成對真實世界的...
閱讀 2984·2021-10-19 11:46
閱讀 979·2021-08-03 14:03
閱讀 2934·2021-06-11 18:08
閱讀 2905·2019-08-29 13:52
閱讀 2744·2019-08-29 12:49
閱讀 480·2019-08-26 13:56
閱讀 924·2019-08-26 13:41
閱讀 849·2019-08-26 13:35