面向對象+閉包+三種對象的聲明方式(字面式、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
  • 前言 在我們開發過程中基本上不可或缺的用到一些敏感機密數據,比如SQL伺服器的連接串或者是OAuth2的Secret等,這些敏感數據在代碼中是不太安全的,我們不應該在源代碼中存儲密碼和其他的敏感數據,一種推薦的方式是通過Asp.Net Core的機密管理器。 機密管理器 在 ASP.NET Core ...
  • 新改進提供的Taurus Rpc 功能,可以簡化微服務間的調用,同時可以不用再手動輸出模塊名稱,或調用路徑,包括負載均衡,這一切,由框架實現並提供了。新的Taurus Rpc 功能,將使得服務間的調用,更加輕鬆、簡約、高效。 ...
  • 順序棧的介面程式 目錄順序棧的介面程式頭文件創建順序棧入棧出棧利用棧將10進位轉16進位數驗證 頭文件 #include <stdio.h> #include <stdbool.h> #include <stdlib.h> 創建順序棧 // 指的是順序棧中的元素的數據類型,用戶可以根據需要進行修改 ...
  • 前言 整理這個官方翻譯的系列,原因是網上大部分的 tomcat 版本比較舊,此版本為 v11 最新的版本。 開源項目 從零手寫實現 tomcat minicat 別稱【嗅虎】心有猛虎,輕嗅薔薇。 系列文章 web server apache tomcat11-01-官方文檔入門介紹 web serv ...
  • C總結與剖析:關鍵字篇 -- <<C語言深度解剖>> 目錄C總結與剖析:關鍵字篇 -- <<C語言深度解剖>>程式的本質:二進位文件變數1.變數:記憶體上的某個位置開闢的空間2.變數的初始化3.為什麼要有變數4.局部變數與全局變數5.變數的大小由類型決定6.任何一個變數,記憶體賦值都是從低地址開始往高地 ...
  • 如果讓你來做一個有狀態流式應用的故障恢復,你會如何來做呢? 單機和多機會遇到什麼不同的問題? Flink Checkpoint 是做什麼用的?原理是什麼? ...
  • C++ 多級繼承 多級繼承是一種面向對象編程(OOP)特性,允許一個類從多個基類繼承屬性和方法。它使代碼更易於組織和維護,並促進代碼重用。 多級繼承的語法 在 C++ 中,使用 : 符號來指定繼承關係。多級繼承的語法如下: class DerivedClass : public BaseClass1 ...
  • 前言 什麼是SpringCloud? Spring Cloud 是一系列框架的有序集合,它利用 Spring Boot 的開發便利性簡化了分散式系統的開發,比如服務註冊、服務發現、網關、路由、鏈路追蹤等。Spring Cloud 並不是重覆造輪子,而是將市面上開發得比較好的模塊集成進去,進行封裝,從 ...
  • class_template 類模板和函數模板的定義和使用類似,我們已經進行了介紹。有時,有兩個或多個類,其功能是相同的,僅僅是數據類型不同。類模板用於實現類所需數據的類型參數化 template<class NameType, class AgeType> class Person { publi ...
  • 目錄system v IPC簡介共用記憶體需要用到的函數介面shmget函數--獲取對象IDshmat函數--獲得映射空間shmctl函數--釋放資源共用記憶體實現思路註意 system v IPC簡介 消息隊列、共用記憶體和信號量統稱為system v IPC(進程間通信機制),V是羅馬數字5,是UNI ...