js屬性,封裝性,prototype綜合解析

来源:https://www.cnblogs.com/sogeisetsu/archive/2019/11/01/11776950.html
-Advertisement-
Play Games

原創作品,轉載請註明來源, "sogeisetsu" ,我的csdn上也有這篇文章 "csdn" js屬性,封裝性,prototype綜合解析 用實例來解釋以下js的公有屬性,靜態屬性,實例屬性,prototype和封裝性 下麵是我在寫博客的源代碼,您可以先不要看他,先看下麵的文字部分 先搞清楚原型 ...


原創作品,轉載請註明來源,sogeisetsu,我的csdn上也有這篇文章csdn

js屬性,封裝性,prototype綜合解析


用實例來解釋以下js的公有屬性,靜態屬性,實例屬性,prototype和封裝性


下麵是我在寫博客的源代碼,您可以先不要看他,先看下麵的文字部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js屬性</title>
    <script>
        //先構造一個函數
        //先搞清楚原型鏈
        function qust() {
            this.name="university";//這是公有屬性
            this.age=12;
            //這是共有方法
            this.run=function () {
                console.log("have ran");
            };
            let age="12";//這是私有屬性
            //這是私有方法
            function go() {
                console.log("have gone");
            }
        }
        //先創建一個實例對象
        let shili=new qust();
        //構造函數的原型對象通過prototype來調用
        console.log(qust.prototype);//列印原型對象,列印結果是object
        //註意,這個時候還沒有改變原型對象
        console.log(qust.prototype.constructor);//列印原型對象的constructor
        /*列印結果是如下
        ƒ qust() {
            this.name="university";//這是公有屬性
            this.age=12;
            //這是共有方法
            this.run=function () {
                console.log("have ran");
            };
         …
        * */
        console.log(qust);//列印構造函數
        /*結果如下
        * ƒ qust() {
            this.name="university";//這是公有屬性
            this.age=12;
            //這是共有方法
            this.run=function () {
                console.log("have ran");
            };
         …*/
        console.log(qust === qust.prototype.constructor);//true,原型對象的constructor指向構造函數
        //但是,如果我們修改了qust.prototype(原型對象),qust.prototype.constructor還指向構造函數嗎?
        qust.prototype={//prototype保存一些構造函數共有的屬性,來節省記憶體
            type:"人類",
            typerun:function () {
                console.log('人類');
            }
        };
        console.log(qust === qust.prototype.constructor);//false,不相等了。
        // 註意點: 為了不破壞原有的關係, 在給prototype賦值的時候, 需要在自定義的對象中手動的添加constructor屬性, 手動的指定需要指向誰
        qust.prototype={//prototype保存一些構造函數共有的屬性,來節省記憶體
            constructor:qust,//不帶括弧
            setype:"人類",
            typerun:function () {
                console.log('人類');
            }
        };
        console.log(qust === qust.prototype.constructor);//true
        /*
        1.對象中__proto__組成的鏈條我們稱之為原型鏈
        2.對象在查找屬性和方法的時候, 會先在當前對象查找
          如果當前對象中找不到想要的, 會依次去上一級原型對象中查找
          如果找到Object原型對象都沒有找到, 就會報錯
         */
        // 放個圖就明白了
        let shi=new qust();//由於修改了一些東西,所以新創建一個對象
        console.log(shi.setype);//列印在原型對象中定義的值,結果是人類
        shi.setype="新人類";
        console.log(shi.setype);//新人類
        console.log(shi.__proto__);/*{setype: "人類", constructor: ƒ, typerun: ƒ}*/
        console.log(shi.__proto__.setype);//人類
        console.log(qust.prototype.setype);//人類
        console.log(shi.__proto__===qust.prototype);//true
        // 註意點: 在給一個對象不存在的屬性設置值的時候, 不會去原型對象中查找, 如果當前對象沒有就會給當前對象新增一個不存在的屬性
        /*
                1.在JavaScript中屬性和方法分類兩類
                1.1實例屬性/實例方法
                在企業開發中通過實例對象訪問的屬性, 我們就稱之為實例屬性
                在企業開發中通過實例對象調用的方法, 我們就稱之為實例方法
                1.2靜態屬性/靜態方法
                在企業開發中通過構造函數訪問的屬性, 我們就稱之為靜態屬性
                在企業開發中通過構造函數調用的方法, 我們就稱之為靜態方法
                */
        //先看一下原先設置的qust
        /*function qust() {
            this.name="university";//這是公有屬性
            this.age=12;
            //這是共有方法
            this.run=function () {
                console.log("have ran");
            };
            let age="12";//這是私有屬性
            //這是私有方法
            function go() {
                console.log("have gone");
            }
        }
        * */
        //上面的屬性或方法都是通過創建實例對象才能訪問或調用,所以我們叫他實例屬性或實例方法
        qust.school="qust";//這是一個靜態屬性,通過構造函數來訪問
        console.log(qust.school);//qust
        //定義一個方法
        qust.getschool=function () {
            console.log("qust is my school");
        }//這是通過構造函數訪問的方法,我們稱其為靜態方法
        qust.getschool()//調用靜態方法
        //qust is my school
        //封裝性
        //防止混亂構造一個新函數newqust
        function newqust() {
            this.name="university";//這是公有屬性
            this.age=12;
            //以下是修改內容
            let myage=19;//設置一個私有年齡,這是在函數外面無法修改的
            this.setnewage=function (newage) {
              if(newage>=0){
                  myage=newage;
              }
            };
            //我們還需要一個來調用年齡
            this.getage=function () {
              return myage;
            };
            //這是共有方法
            this.run=function () {
                console.log("have ran");
            };
            let age="12";//這是私有屬性,只能在該函數里訪問,在外無法訪問,這就為我們的封裝性提供了可能
            //這是私有方法
            function go() {
                console.log("have gone");
            }
        }
        //試一下調用私有屬性
        console.log(newqust.age);//undefined
        /*
        * 假設一個場景,讓用戶設置自己的年齡,年齡嗎肯定大於零的,但是通過公有屬性卻而已隨意設置*/
        let newshili=new newqust();
        newshili.age=-2;
        console.log(newshili.age);//-2,這是荒誕的
        //所以需要修改
        newshili.setnewage(15);
        console.log(newshili.getage());//15

    </script>
</head>
<body>

</body>
</html>

先搞清楚原型鏈,prototype

先構造一個函數

function qust() {
            this.name="university";//這是公有屬性
            this.age=12;
            //這是共有方法
            this.run=function () {
                console.log("have ran");
            };
            let age="12";//這是私有屬性
            //這是私有方法
            function go() {
                console.log("have gone");
            }
        }

先創建一個實例對象來調用構造函數中的屬性

 let shili=new qust();

構造函數的原型對象通過prototype來調用

console.log(qust.prototype);//列印原型對象,列印結果是object

註意,這個時候還沒有改變原型對象

console.log(qust.prototype.constructor);//列印原型對象的constructor

qust.prototype.constructor是指向構造函數qust的。

所以

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

-Advertisement-
Play Games
更多相關文章
  • 數組的基礎方法, 將有序數組進行隨機排序. 主要應用於視頻的隨機展示 ...
  • [toc] 前言 “迴流(重排)”和“重繪”基本上算是前端的高頻詞之一,你可以在各個文章及面試題中見到,我們在討論這個詞的時候,其實討論的是瀏覽器的渲染流程。 所以在討論“迴流重繪”之前,我們還需要掌握一些知識;在它之中,我們還需要更深入一點;在這之後,我們還要懂得怎麼去把理論結合到項目實踐中去。 ...
  • 1、安裝庫 npm install typings echarts --global npm install ngx-echarts --save npm install @types/echarts --save 2、app.module引入 import { BrowserModule } fr ...
  • 遞歸和閉包作為js中很重要的一環,幾乎在前端的面試中都會涉及,特別閉包。今天前端組的組長冷不丁的問了我一下,粗略的回答了一下,感覺不太滿足,於是重新學習了一下,寫下本篇。 在說這個兩個概念之前,我們先回顧一下函數表達式。 function實際上是一種引用對象,和其他引用類型一樣,都有屬性和方法。定義 ...
  • 為什麼我想要使用redux? 前段時間初步上手了react,最近在使用react的過程中發現對於組件之間通信的需求比較迫切,尤其是在axios非同步請求後端數據的時候,這樣的需求是特別強烈的!舉個例子: // 廠家報告到貨 class ReportArrivalGoods extends React. ...
  • 本文由葡萄城技術團隊於博客園原創並首發 轉載請註明出處:葡萄城官網,葡萄城為開發者提供專業的開發工具、解決方案和服務,賦能開發者。 前端技術的發展日新月異,過一段時間就會出現新的框架、工具、插件,伴隨著十幾年的發展,前端領域已經告別了野蠻生長的時期,越發表現出成熟和現代化,引領了整個技術行業的潮流, ...
  • 網上查了很多圖片懶載入的內容, 但基本上都是jQuery實現的, 沒有說清楚其原理, 所以研究了一下 多的不說, 上代碼, 看不明白的建議看下我的上一篇文章<1. 圖解瀏覽器和用戶設備的寬高等屬性> HTML部分(圖片地址自己隨意) JS部分 雖然比較啰嗦, 但是內容詳細. 希望能幫到大家 最終效果 ...
  • 有一個單選下拉框要改成多選,裡面還有一個全部選項,當選擇全部時要全部勾選上,類似於樹形下拉框。效果如下: 傳到後臺的數據就根據自己的需要做修改了,當選擇全部時就只傳全部這一個值,但後臺查出來的數據是要滿足所有項的,當然取消全部時在查詢的時候也還是要滿足所有項。代碼如下: 添加fSelect.css, ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...