面向對象+閉包+三種對象的聲明方式(字面式、new Object、構造函數、工廠模式、原型模式、混合模式)

来源:https://www.cnblogs.com/chenyingying0/archive/2020/02/12/12301366.html
-Advertisement-
Play Games

面向對象: 對代碼的一種抽象,對外統一提供調用介面的編程思想 對象的屬性:事物自身擁有的東西 對象的方法:事物的功能 對象:事物的一個實例 對象的原型:.prototype -> 記憶體地址 -> 存儲了一個對象 function fn(){ return 1; } alert(fn.prototyp ...


面向對象:

對代碼的一種抽象,對外統一提供調用介面的編程思想


 

對象的屬性:事物自身擁有的東西

對象的方法:事物的功能

對象:事物的一個實例

對象的原型:.prototype -> 記憶體地址 -> 存儲了一個對象

    function fn(){
        return 1;
    }
    alert(fn.prototype);//[object Object]

通過new Function創建的對象是函數對象,其他的都是普通對象

var obj=new Function(n1,n2,n3,...functionBody());
//構造函數對象  前面是一系列參數,後面是自定義函數體
//不過構造器構造的對象,效率比較低
//參數順序不能改變,必須一一對應

var add=new Function("a","b","return a+b");
var sum=add(3,5);
alert(sum);//8

閉包

閉包是一個擁有許多變數和綁定了這些變數的環境的表達式(通常是一個函數)

全局變數在函數內部可以訪問

var n=100;
function fn(){
    alert(n);//100
}
fn();

函數內部的變數,在外部不能訪問

function fn(){
    var n=100;
}
fn();
alert(n);//報錯 n is not defined

有時需要在外部訪問函數內部的變數

解決方法:在函數內部再定義一個函數,輸出需要的變數,然後將該內部函數作為返回值

function fn(){
    var n=100;
    function fn2(){
        alert(++n);
    }
    return fn2;
}
fn()();//101

閉包:函數b在函數a內嵌套,函數a需要返回函數b

用途:1、讀取函數內部變數  2、讓函數內部變數保留在記憶體中,不隨著函數的執行結束而被銷毀

function fn(){
    var n=100;
    nAdd=function(){
        n++;
    }
    function fn2(){
        alert(n);
    }
    return fn2;
}
var res=fn();//將fn()賦值給變數後,內部變數不會在每次執行時被初始化
res();//100
nAdd();
res();//101

閉包的優缺點:

優點-有利用封裝,可以訪問局部變數

缺點-記憶體占用,容易產生記憶體泄漏

閉包可以使用,但要謹慎使用


 

在html中創建任意幾個li,利用閉包特性實現點擊li彈出它的索引值

var lis=document.querySelectorAll("li");

for(var i=0;i<lis.length;i++){
    (function(i){
        lis[i].onclick=function(){
            alert(i);
        }        
    })(i);
}

匿名函數自調用,傳入了for迴圈裡面的i值,保存每一次迴圈的i值

for迴圈會先執行完畢,然後形成多個作用域

每個i值會作為實參傳入函數中,當點擊li的時候,彈出的i值就是作用域中的i值

 

 字面式聲明對象-最基本的方式

//字面式
var person={
    name:"cyy",
    age:25,
    eat:function(food){
        alert("我在吃"+food);
    }
}
console.log(person.name);//cyy
person.eat("西瓜");//我在吃西瓜
console.log(person instanceof Object);//true

new Object() 構造函數

Object是所有對象的基類,所有javascript對象都是由object延伸的

//new Object()構造函數
var person=new Object();
person.name="cyy";
person.age=25;
person.infos=function(str){
    return this.name+" "+this.age+" "+str;//this指向當前對象
}
alert(person.infos("很可愛"));//cyy 25 很可愛

構造方法聲明對象

使用new來實例化

函數內部只能用this來訪問屬性和方法

//構造方法聲明對象
function Person(name,age){
    this.name=name;//this.name是屬性 name是參數
    this.age=age;
    this.show=function(){
        alert(this.name+" "+this.age);//this指向當前對象,不同的實例對象是獨立的
    }
}
var cyy=new Person("cyy",25);
cyy.show();//cyy 25

var cyy2=new Person("cyy2",18);
cyy2.show();//cyy2 18

工廠方式聲明對象:按照某種模式,可以不斷的創造對象

在一個函數內部使用 new Object() 創建一個對象,並且返回這個對象

//工廠模式
function person(name,age){
    var obj=new Object();
    obj.name=name;
    obj.age=age;
    obj.infos=function(){
        return this.name+" "+this.age+" 很可愛";//對象的方法中要調用屬性,必須使用this
    }
    return obj;
}
var cyy=person("cyy",25);
alert(cyy.infos());//cyy 25 很可愛

var cyy2=person("cyy2",25);
alert(cyy2.infos());//cyy2 25 很可愛

// cyy和cyy2兩者沒有聯繫

構造方式和工廠模式的區別:

構造方式不會創建出一個對象,也不會返回這個對象,將屬性賦值給this


 

原型模式聲明對象

任何js方法或者函數,都自帶prototype屬性,並且以對象方式存在

函數本身聲明為空內容,通過prototype聲明屬性和方法,最後new這個函數

//原型模式
function person(){

}
//alert(person.prototype);//[object Object]
person.prototype.name="cyy";
person.prototype.age=25;
person.prototype.infos=function(){
    return this.name+" "+this.age;
}

var p=new person();
alert(p.infos());//cyy 25

原型模式也可以以json數據的方式來定義屬性和方法

//原型模式
function person(){

}

//json數據格式
person.prototype={
    name:"cyy",
    age:25,
    infos:function(){
        alert(this.name+" "+this.age);
    }
}

var p=new person();
p.infos();//cyy 25

混合模式:構造模式+原型模式

//混合模式:構造+原型
function person(name,age){
    this.name=name;
    this.age=age;
}

person.prototype={
    addr:"China",
    infos:function(){
        alert(this.name+" "+this.age+" "+this.addr);
    }
}

var p=new person("cyy",25);//構造函數部分需要傳參,原型部分直接定義
p.infos();//cyy 25 China

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Android Studio 學習筆記(一)環境搭建、文件目錄等相關說明 引入 對APP開發而言,Android和iOS是兩大主流開發平臺,其中區別在於 Android用java語言,用Android Studio開發,Windows、Linux和蘋果系統都可以進行開發 。 iOS用object c ...
  • 02-11 21:21:45.669625 14804 14815 W Monkey : // java.lang.RuntimeException: lock buffer failed for format 0x23 02-11 21:21:45.669625 14804 14815 W Mon ...
  • 一、Text 組件 屬性 textAlign: TextAlign.left, 文本對齊方式 maxLines: 1, 顯示最大行 overflow: TextOverflow.clip, 文本溢出的處理方式 clip:直接切斷溢出的文字。 ellipsis:在後邊顯示省略號(...) 常用 fad ...
  • 什麼是 JavaScript 語言 Normal 0 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE JavaScript 是一種輕量級的腳本語言。所謂“腳本語言”,指的是它不具備開發操作系統的能力,而是只用來編寫控制其他大型應用程式(比如瀏覽器)的“腳 ...
  • 如果介紹HTML網頁基本標簽的嵌套規則,首先要說的就是元素的分類。元素可以劃分為塊級元素和行級元素,塊級元素是什麼?它可以獨占一行,可以設置寬高度,預設是100%;行級元素與之相反,它的內容決定它的寬高度,至於特殊字元就當成是文字來看!嵌套規則總結如下幾點:1.塊元素可以嵌套行元素2.行元素可以嵌套... ...
  • 什麼是網頁的佈局?網頁佈局就是我們在拿到設計稿後進行切片處理(所謂切圖),然後我們通過DIV+CSS佈局,書寫靜態頁面按照設計稿還原排列,把我們想要實現的功能與內容進行填充!早期的frameset佈局主要書寫管理後臺控制菜單的切換實現局部的刷新,至於頁面的嵌套則是通過iframe ...
  • Electron 和 Vue 都是幹啥的,就不做過多介紹了,可以去官網瞅瞅。下麵總結 Electron+Vue 創建項目,Electron + Vue 創建項目實際上相當於:創建Vue項目 + Electron封裝。 一、創建Vue項目 + Electron封裝 1、創建Vue項目 通過 Vue腳手 ...
  • <script language=javascript> window.onload=function(){ //刷新父頁面 window.opener.location.reload(); } </script> 相關連接 JS 彈出小視窗 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...