原創作品，轉載請注明來源，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的，

所以??

console.log(qust === qust.prototype.constructor);//true

但是，如果我們修改了qust.prototype(原型物件)，qust.prototype.constructor還指向建構式嗎？

修改qust.prototype

 qust.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

我們之前設定了一個物件shili，還記得嗎？

我們是這樣設定的，??

 let shili=new qust();

shili是一個實體物件
實體物件的__proto__指向建構式的原型物件qust.prototype

console.log(shili.__proto__===qust.prototype);//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");
            }
        }

??上面的屬性或方法都是通過創建實體物件才能訪問或呼叫，所以我們叫他實體屬性或實體方法

就像這樣

 let shi=new qust();//由于修改了一些東西，所以新創建一個物件
        console.log(shi.setype);//列印在原型物件中定義的值，結果是人類

先設定一個靜態屬性
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;
            //這是共有方法
            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,這是荒誕的

所以需要修改,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");
            }
        }

可以修改年齡

newshili.setnewage(15);
        console.log(newshili.getage());//15

如果將年齡設定成負值呢？

 newshili.setnewage(-5);
        console.log(newshili.getage());//回傳19

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/177549.html

標籤：JavaScript

上一篇：使用 Angular RouteReuseStrategy 快取（路由）組件

下一篇：2.原生js實作圖片懶加載