javascript中的面向?qū)ο?/h1>
更新時(shí)間:2017年03月30日 09:26:44 作者:閣主乄
本文主要介紹了javascript中面向?qū)ο蟮南嚓P(guān)知識(shí)。具有很好的參考價(jià)值,下面跟著小編一起來看下吧
相信大家對(duì)javascript中的面向?qū)ο髮懛ǘ疾荒吧沁€記得有幾種創(chuàng)建對(duì)象的寫法嗎?相信大家除了自己常寫的都有點(diǎn)模糊了,那接下來就由我來幫大家回憶回憶吧!
1. 構(gòu)造函數(shù)模式
通過創(chuàng)建自定義的構(gòu)造函數(shù),來定義自定義對(duì)象類型的屬性和方法。
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)建具體對(duì)象的過程,用函數(shù)來封裝以特定接口創(chuàng)建對(duì)象的細(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è)對(duì)象,但如果要?jiǎng)?chuàng)建多個(gè)對(duì)象,會(huì)產(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. 原型模式
使用原型對(duì)象,可以讓所有實(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í)例對(duì)象都有自己的一份實(shí)例屬性的副本,同時(shí)又共享對(duì)方法的引用,最大限度地節(jié)省了內(nèi)存。該模式是目前使用最廣泛、認(rèn)同度最高的一種創(chuàng)建自定義對(duì)象的模式
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),讓對(duì)象的創(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í)例對(duì)象。
而繼承可以通過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();
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時(shí)也希望多多支持腳本之家!
您可能感興趣的文章:- js中的面向?qū)ο笕腴T
- JS基于面向?qū)ο髮?shí)現(xiàn)的拖拽功能示例
- Javascript之面向?qū)ο?-封裝
- 歸納下js面向?qū)ο蟮膸追N常見寫法總結(jié)
- JavaScript面向?qū)ο缶帉戀?gòu)物車功能
- Javascript 面向?qū)ο螅ㄒ唬?共有方法,私有方法,特權(quán)方法)
- JS面向?qū)ο蠡A(chǔ)講解(工廠模式、構(gòu)造函數(shù)模式、原型模式、混合模式、動(dòng)態(tài)原型模式)
- JS 面向?qū)ο笾衿娴膒rototype
- 面向?qū)ο蟮腏avascript之二(接口實(shí)現(xiàn)介紹)
- JS面向?qū)ο缶幊讨畬?duì)象使用分析
- javascript面向?qū)ο笕腴T基礎(chǔ)詳細(xì)介紹
相關(guān)文章
-
JavaScript利用img實(shí)現(xiàn)前端頁(yè)面埋點(diǎn)功能
做數(shù)據(jù)分析的時(shí)候需要獲取足量的有效數(shù)據(jù),這個(gè)時(shí)候就需要我們?cè)谇岸隧?yè)面埋點(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單選按鈕控制頁(yè)面元素樣式的相關(guān)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下 2015-08-08
-
原生JS+HTML5實(shí)現(xiàn)的可調(diào)節(jié)寫字板功能示例
這篇文章主要介紹了原生JS+HTML5實(shí)現(xiàn)的可調(diào)節(jié)寫字板功能,涉及javascript結(jié)合HTML5屬性動(dòng)態(tài)操作頁(yè)面元素實(shí)現(xiàn)繪圖功能相關(guān)技巧,需要的朋友可以參考下 2018-08-08
-
推薦幾個(gè)不錯(cuò)的console調(diào)試技巧實(shí)現(xiàn)
這篇文章主要介紹了推薦幾個(gè)不錯(cuò)的console調(diào)試技巧實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧 2019-12-12
-
javascript文本框內(nèi)輸入文字倒計(jì)數(shù)的方法
這篇文章主要介紹了javascript文本框內(nèi)輸入文字倒計(jì)數(shù)的方法,涉及javascript針對(duì)鍵盤事件的操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下 2015-02-02
-
如何從JavaScript數(shù)組中刪除空對(duì)象
JS中數(shù)組是我們較為常用的一種數(shù)據(jù)結(jié)構(gòu),下面這篇文章主要給大家介紹了關(guān)于如何從JavaScript數(shù)組中刪除空對(duì)象的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下 2023-05-05
-
JS實(shí)現(xiàn)屏蔽網(wǎng)頁(yè)右鍵復(fù)制及ctrl+c復(fù)制的方法【2種方法】
這篇文章主要介紹了JS實(shí)現(xiàn)屏蔽網(wǎng)頁(yè)右鍵復(fù)制及ctrl+c復(fù)制的方法,結(jié)合實(shí)例形式分析了2種比較常用的屏蔽復(fù)制功能的技巧,需要的朋友可以參考下 2016-09-09
最新評(píng)論
相信大家對(duì)javascript中的面向?qū)ο髮懛ǘ疾荒吧沁€記得有幾種創(chuàng)建對(duì)象的寫法嗎?相信大家除了自己常寫的都有點(diǎn)模糊了,那接下來就由我來幫大家回憶回憶吧!
1. 構(gòu)造函數(shù)模式
通過創(chuàng)建自定義的構(gòu)造函數(shù),來定義自定義對(duì)象類型的屬性和方法。
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)建具體對(duì)象的過程,用函數(shù)來封裝以特定接口創(chuàng)建對(duì)象的細(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è)對(duì)象,但如果要?jiǎng)?chuàng)建多個(gè)對(duì)象,會(huì)產(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. 原型模式
使用原型對(duì)象,可以讓所有實(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í)例對(duì)象都有自己的一份實(shí)例屬性的副本,同時(shí)又共享對(duì)方法的引用,最大限度地節(jié)省了內(nèi)存。該模式是目前使用最廣泛、認(rèn)同度最高的一種創(chuàng)建自定義對(duì)象的模式
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),讓對(duì)象的創(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í)例對(duì)象。
而繼承可以通過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();
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時(shí)也希望多多支持腳本之家!
- js中的面向?qū)ο笕腴T
- JS基于面向?qū)ο髮?shí)現(xiàn)的拖拽功能示例
- Javascript之面向?qū)ο?-封裝
- 歸納下js面向?qū)ο蟮膸追N常見寫法總結(jié)
- JavaScript面向?qū)ο缶帉戀?gòu)物車功能
- Javascript 面向?qū)ο螅ㄒ唬?共有方法,私有方法,特權(quán)方法)
- JS面向?qū)ο蠡A(chǔ)講解(工廠模式、構(gòu)造函數(shù)模式、原型模式、混合模式、動(dòng)態(tài)原型模式)
- JS 面向?qū)ο笾衿娴膒rototype
- 面向?qū)ο蟮腏avascript之二(接口實(shí)現(xiàn)介紹)
- JS面向?qū)ο缶幊讨畬?duì)象使用分析
- javascript面向?qū)ο笕腴T基礎(chǔ)詳細(xì)介紹
相關(guān)文章
JavaScript利用img實(shí)現(xiàn)前端頁(yè)面埋點(diǎn)功能
做數(shù)據(jù)分析的時(shí)候需要獲取足量的有效數(shù)據(jù),這個(gè)時(shí)候就需要我們?cè)谇岸隧?yè)面埋點(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單選按鈕控制頁(yè)面元素樣式的相關(guān)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-08-08
原生JS+HTML5實(shí)現(xiàn)的可調(diào)節(jié)寫字板功能示例
這篇文章主要介紹了原生JS+HTML5實(shí)現(xiàn)的可調(diào)節(jié)寫字板功能,涉及javascript結(jié)合HTML5屬性動(dòng)態(tài)操作頁(yè)面元素實(shí)現(xiàn)繪圖功能相關(guān)技巧,需要的朋友可以參考下2018-08-08
推薦幾個(gè)不錯(cuò)的console調(diào)試技巧實(shí)現(xiàn)
這篇文章主要介紹了推薦幾個(gè)不錯(cuò)的console調(diào)試技巧實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
javascript文本框內(nèi)輸入文字倒計(jì)數(shù)的方法
這篇文章主要介紹了javascript文本框內(nèi)輸入文字倒計(jì)數(shù)的方法,涉及javascript針對(duì)鍵盤事件的操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
如何從JavaScript數(shù)組中刪除空對(duì)象
JS中數(shù)組是我們較為常用的一種數(shù)據(jù)結(jié)構(gòu),下面這篇文章主要給大家介紹了關(guān)于如何從JavaScript數(shù)組中刪除空對(duì)象的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
JS實(shí)現(xiàn)屏蔽網(wǎng)頁(yè)右鍵復(fù)制及ctrl+c復(fù)制的方法【2種方法】
這篇文章主要介紹了JS實(shí)現(xiàn)屏蔽網(wǎng)頁(yè)右鍵復(fù)制及ctrl+c復(fù)制的方法,結(jié)合實(shí)例形式分析了2種比較常用的屏蔽復(fù)制功能的技巧,需要的朋友可以參考下2016-09-09

