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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js中的prototype屬性簡單理解js的prototype屬性從prototype.js中學習到的js封裝 js中Prototype屬性解釋及常用方法 js中Prototype屬性解釋及常用方法 js原型和原型鏈，以及__proto__、prototype屬性 PathFinding.js – 綜合性的 JavaScript 路徑查找庫 ts 如何添加prototype 屬性 js中__proto__, property, prototype, 對象自身屬性方法和原型中的屬性方法的區別 JS常見的API擴展形式（prototype、jquery、vue插件封裝）以及怎樣設計出易擴展的表單驗證功能？