javascript中的面向?qū)ο?/h1>

 更新時(shí)間：2017年03月30日 09:26:44   作者：閣主乄  

本文主要介紹了javascript中面向?qū)ο蟮南嚓P(guān)知識。具有很好的參考價(jià)值，下面跟著小編一起來看下吧

相信大家對javascript中的面向?qū)ο髮懛ǘ疾荒吧沁€記得有幾種創(chuàng)建對象的寫法嗎？相信大家除了自己常寫的都有點(diǎn)模糊了，那接下來就由我來幫大家回憶回憶吧！

1. 構(gòu)造函數(shù)模式

通過創(chuàng)建自定義的構(gòu)造函數(shù)，來定義自定義對象類型的屬性和方法。

function cons(name,age){
 this.name = name;
 this.age = age;
 this.getMes = function(){
  console.log(`my name is ${this.name},this year ${this.age}`);
 }
}
var mesge = new cons('will',21);
mesge.getMes();

2. 工廠模式

該模式抽象了創(chuàng)建具體對象的過程，用函數(shù)來封裝以特定接口創(chuàng)建對象的細(xì)節(jié)

function cons(name,age){
 var obj = new Object();
 obj.name = name;
 obj.age = age;
 obj.getMes = function(){
  console.log(`my name is ${this.name},this year ${this.age}`);
 }
 return obj;
}
var mesge = cons('will',21);
mesge.getMes();

3. 字面量模式

字面量可以用來創(chuàng)建單個(gè)對象，但如果要?jiǎng)?chuàng)建多個(gè)對象，會產(chǎn)生大量的重復(fù)代碼

var cons = {
 name: 'will',
 age : 21,
 getMes: function(){
  console.log(`my name is ${this.name},this year ${this.age}`);
 }
}
cons.getMes();

4. 原型模式

使用原型對象，可以讓所有實(shí)例共享它的屬性和方法

function cons(){
 cons.prototype.name = "will";
 cons.prototype.age = 21;
 cons.prototype.getMes = function(){
  console.log(`my name is ${this.name},this year ${this.age}`);
 }
}

var mesge = new cons();
mesge.getMes();

var mesge1 = new cons();
mesge1.getMes();
console.log(mesge.sayName == mesge1.sayName);//true

5. 組合模式

最常見的方式。構(gòu)造函數(shù)模式用于定義實(shí)例屬性，而原型模式用于定義方法和共享的屬性，這種組合模式還支持向構(gòu)造函數(shù)傳遞參數(shù)。實(shí)例對象都有自己的一份實(shí)例屬性的副本，同時(shí)又共享對方法的引用，最大限度地節(jié)省了內(nèi)存。該模式是目前使用最廣泛、認(rèn)同度最高的一種創(chuàng)建自定義對象的模式

function cons(name,age){
 this.name = name;
 this.age = age;
 this.friends = ["arr","all"];
}
cons.prototype = {
 getMes : function(){
  console.log(`my name is ${this.name},this year ${this.age}`);
 }
}
var mesge = new cons("will",21);
var mesge1 = new cons("jalo",21);
console.log(mesge.friends);
mesge.friends.push('wc'); //還可以操作數(shù)組哈O(∩_∩)O！
console.log(mesge.friends);
console.log(mesge1.friends);
mesge.getMes();
mesge1.getMes();
console.log(mesge.friends === mesge1.friends);
console.log(mesge.sayName === mesge1.sayName);

最后在告訴你個(gè)秘密，ES6引入了類（Class），讓對象的創(chuàng)建、繼承更加直觀了

// 定義類

class Cons{
 constructor(name,age){
  this.name = name;
  this.age = age;
 }
 getMes(){
  console.log(`hello ${this.name} !`);
 }
}
let mesge = new Cons('啦啦啦~',21);
mesge.getMes();

在上面的代碼片段里，先是定義了一個(gè)Cons類，里面還有一個(gè)constructor函數(shù)，這就是構(gòu)造函數(shù)。而this關(guān)鍵字則代表實(shí)例對象。

而繼承可以通過extends關(guān)鍵字實(shí)現(xiàn)。

class Ctrn extends Cons{
 constructor(name,anu){

  super(name); //等同于super.constructor(x)
  this.anu = anu;
 }
 ingo(){
  console.log(`my name is ${this.name},this year ${this.anu}`);
 }
}
let ster = new Ctrn('will',21);
ster.ingo();
ster.getMes();

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

• js中的面向?qū)ο笕腴T
• JS基于面向?qū)ο髮?shí)現(xiàn)的拖拽功能示例
• Javascript之面向?qū)ο?-封裝
• 歸納下js面向?qū)ο蟮膸追N常見寫法總結(jié)
• JavaScript面向?qū)ο缶帉戀徫镘嚬δ?/a>
• Javascript 面向?qū)ο螅ㄒ唬?共有方法，私有方法，特權(quán)方法)
• JS面向?qū)ο蠡A(chǔ)講解(工廠模式、構(gòu)造函數(shù)模式、原型模式、混合模式、動態(tài)原型模式)
• JS 面向?qū)ο笾衿娴膒rototype
• 面向?qū)ο蟮腏avascript之二(接口實(shí)現(xiàn)介紹)
• JS面向?qū)ο缶幊讨畬ο笫褂梅治?/a>
• javascript面向?qū)ο笕腴T基礎(chǔ)詳細(xì)介紹

• javascript
• 面向?qū)ο?/a>

相關(guān)文章

• 

  JavaScript利用img實(shí)現(xiàn)前端頁面埋點(diǎn)功能

  做數(shù)據(jù)分析的時(shí)候需要獲取足量的有效數(shù)據(jù)，這個(gè)時(shí)候就需要我們在前端頁面埋點(diǎn)。如何來實(shí)現(xiàn)一個(gè)前端埋點(diǎn)功能，本文就帶你上手試試

  2022-06-06
• 

  JavaScript實(shí)現(xiàn)點(diǎn)擊單選按鈕改變輸入框中文本域內(nèi)容的方法

  這篇文章主要介紹了JavaScript實(shí)現(xiàn)點(diǎn)擊單選按鈕改變輸入框中文本域內(nèi)容的方法,涉及javascript單選按鈕控制頁面元素樣式的相關(guān)技巧,非常簡單實(shí)用,需要的朋友可以參考下

  2015-08-08
• 

  原生JS+HTML5實(shí)現(xiàn)的可調(diào)節(jié)寫字板功能示例

  這篇文章主要介紹了原生JS+HTML5實(shí)現(xiàn)的可調(diào)節(jié)寫字板功能,涉及javascript結(jié)合HTML5屬性動態(tài)操作頁面元素實(shí)現(xiàn)繪圖功能相關(guān)技巧,需要的朋友可以參考下

  2018-08-08
• 

  js操作checkbox遇到的問題解決

  這篇文章介紹了js操作checkbox遇到的問題解決，有需要的朋友可以參考一下

  2013-06-06
• 

  JS實(shí)現(xiàn)公告上線滾動效果

  這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)公告上線滾動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

  2021-01-01
• 

  推薦幾個(gè)不錯(cuò)的console調(diào)試技巧實(shí)現(xiàn)

  這篇文章主要介紹了推薦幾個(gè)不錯(cuò)的console調(diào)試技巧實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

  2019-12-12
• 

  javascript文本框內(nèi)輸入文字倒計(jì)數(shù)的方法

  這篇文章主要介紹了javascript文本框內(nèi)輸入文字倒計(jì)數(shù)的方法,涉及javascript針對鍵盤事件的操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

  2015-02-02
• 

  如何從JavaScript數(shù)組中刪除空對象

  JS中數(shù)組是我們較為常用的一種數(shù)據(jù)結(jié)構(gòu),下面這篇文章主要給大家介紹了關(guān)于如何從JavaScript數(shù)組中刪除空對象的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

  2023-05-05
• 

  JavaScript生成隨機(jī)字符串的方法

  這篇文章主要介紹了JavaScript生成隨機(jī)字符串的方法,涉及javascript中random的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下

  2015-03-03
• 

  JS實(shí)現(xiàn)屏蔽網(wǎng)頁右鍵復(fù)制及ctrl+c復(fù)制的方法【2種方法】

  這篇文章主要介紹了JS實(shí)現(xiàn)屏蔽網(wǎng)頁右鍵復(fù)制及ctrl+c復(fù)制的方法,結(jié)合實(shí)例形式分析了2種比較常用的屏蔽復(fù)制功能的技巧,需要的朋友可以參考下

  2016-09-09

最新評論