欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript中的面向?qū)ο?/h1>
 更新時(shí)間:2017年03月30日 09:26:44   作者:閣主乄  
本文主要介紹了javascript中面向?qū)ο蟮南嚓P(guān)知識(shí)。具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧

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

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

通過(guò)創(chuàng)建自定義的構(gòu)造函數(shù),來(lái)定義自定義對(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ì)象的過(guò)程,用函數(shù)來(lái)封裝以特定接口創(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. 字面量模式

字面量可以用來(lái)創(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. 組合模式

最常見(jiàn)的方式。構(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ì)象。

而繼承可以通過(guò)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í)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!

相關(guān)文章

  • js前端實(shí)現(xiàn)圖片懶加載(lazyload)的兩種方式

    js前端實(shí)現(xiàn)圖片懶加載(lazyload)的兩種方式

    本篇文章主要介紹了js前端實(shí)現(xiàn)圖片懶加載(lazyload)的兩種方式 ,使用圖片懶加載可以提高網(wǎng)頁(yè)運(yùn)行速度,有興趣的可以了解一下。
    2017-04-04
  • 深入理解requireJS-實(shí)現(xiàn)一個(gè)簡(jiǎn)單的模塊加載器

    深入理解requireJS-實(shí)現(xiàn)一個(gè)簡(jiǎn)單的模塊加載器

    本篇文章主要介紹了深入理解requireJS-實(shí)現(xiàn)一個(gè)簡(jiǎn)單的模塊加載器,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-01-01
  • 微信小程序地理定位功能實(shí)現(xiàn)

    微信小程序地理定位功能實(shí)現(xiàn)

    小程序地理定位是指通過(guò)小程序開發(fā)平臺(tái)提供的?API,來(lái)獲取用戶的地理位置信息,用戶在使用小程序時(shí),可以授權(quán)小程序獲取自己的地理位置信息,下面通過(guò)本文給大家分享微信小程序地理定位功能實(shí)現(xiàn),感興趣的朋友一起看看吧
    2024-05-05
  • 淺談JavaScript for循環(huán) 閉包

    淺談JavaScript for循環(huán) 閉包

    下面小編就為大家?guī)?lái)一篇淺談JavaScript for循環(huán) 閉包。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-06-06
  • JavaScript實(shí)現(xiàn)手寫promise的示例代碼

    JavaScript實(shí)現(xiàn)手寫promise的示例代碼

    promise?作為前端開發(fā)中常用的函數(shù),解決了?js?處理異步時(shí)回調(diào)地獄的問(wèn)題,大家應(yīng)該也不陌生了,今天來(lái)學(xué)習(xí)一下?promise?的實(shí)現(xiàn)過(guò)程吧
    2023-04-04
  • js異步之a(chǎn)sync和await實(shí)現(xiàn)同步寫法

    js異步之a(chǎn)sync和await實(shí)現(xiàn)同步寫法

    本文主要介紹了js異步之a(chǎn)sync和await實(shí)現(xiàn)同步寫法,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • 一文了解TypeScript數(shù)據(jù)類型

    一文了解TypeScript數(shù)據(jù)類型

    本文主要介紹了TypeScript數(shù)據(jù)類型,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2021-07-07
  • 微信小程序textarea層級(jí)過(guò)高的解決方法

    微信小程序textarea層級(jí)過(guò)高的解決方法

    這篇文章主要給大家介紹了關(guān)于微信小程序textarea層級(jí)過(guò)高問(wèn)題的解決方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-03-03
  • 關(guān)于Google發(fā)布的JavaScript代碼規(guī)范你要知道哪些

    關(guān)于Google發(fā)布的JavaScript代碼規(guī)范你要知道哪些

    代碼規(guī)范并不是一種編寫正確JavaScript代碼的規(guī)則,而是為了保持源代碼編寫模式一致的一種選擇。這篇文章給大家介紹了關(guān)于Google發(fā)布的JavaScript代碼規(guī)范你要知道哪些,感興趣的朋友一起看看吧
    2018-04-04
  • 快速掌握WordPress中加載JavaScript腳本的方法

    快速掌握WordPress中加載JavaScript腳本的方法

    這篇文章主要介紹了快速掌握WordPress中加載JavaScript腳本的方法,以及響應(yīng)的CSS樣式加載方法的簡(jiǎn)介,需要的朋友可以參考下
    2015-12-12

最新評(píng)論