深入理解 Javascript 之 JS的封裝

張漢慶發布于2019-08-23 10:55 / 3108人閱讀

摘要：封裝常見的封裝類中的共有和私有執行結果如下原因是調用的時候，指向的其實是，因此沒有輸出解決辦法更改指向工廠函數也有對于程序員來說這三個關鍵字應該是很熟悉的哈，但是在中，并沒有類似于這樣的關鍵字，但是我們又希望我們定義的屬性和方法有一定的訪問

封裝

常見的封裝

function Person (name,age,sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
}
 
Pserson.prototype = {
    constructor:Person,
    sayHello:function(){
        console.log("hello");
    }
}

類中的共有和私有

function Person(pname){
    var age = 10;
    function pm(){
        console.log(this.name)
    }
    
    this.name = pname;
    this.test: function(){
        console.log("public methods");
        pm();
    }
}

執行結果如下：

（原因是調用pm的時候，this指向的其實是window，因此沒有輸出）

解決辦法

function Person(pname){
    var age = 10;
    function pm(){
        console.log(this.name)
    }
    
    this.name = pname;
    this.test: function(){
        console.log("public methods");
        pm.call(this); // 【】更改this指向
        // pm();
    }
}

工廠函數

function Person(name){
    function pm(){
        console.log(self.name);
    }    
    var self = {
        name: name,
        test: function(){
            pm();
        }
    }
    
    return self;
}

javascript也有private public protected

對于java程序員來說private public protected這三個關鍵字應該是很熟悉的哈，但是在js中，并沒有類似于private public protected這樣的關鍵字，但是我們又希望我們定義的屬性和方法有一定的訪問限制，于是我們就可以模擬private public protected這些訪問權限。

上栗子

var Book = function (id, name, price) {
      // private(在函數內部定義，函數外部訪問不到，實例化之后實例化的對象訪問不到)
      var _num = 1;
      var _id = id;
      // 私有函數
      function _checkId(id) {
        console.log("private");
        console.log(_id);
        // 這里只能訪問私有變量和方法，
        // 如果訪問this.name是訪問不到的，
        // 如果訪問需要重新指向this
      }

      // protected(可以訪問到函數內部的私有屬性和私有方法，在實例化之后就可以對實例化的類進行初始化拿到函數的私有屬性)
      this.getName = function () {
        _checkId();
        console.log(this.name);
      }

      this.getPrice = function () {
        console.log(price);
      }

      // public
      this.name = name;
      this.copy = function () {
        console.log("this is public")
        console.log(this.name)
        console.log(price);
      }



    }

    //在Book的原型上添加的方法實例化之后可以被實例化對象繼承
    Book.prototype.profunction = function () {
      console.log("this is profunction");
    }
    //在函數外部通過.語法創建的屬性和方法，只能通過該類訪問，實例化對象訪問不到
    Book.setTime = function () {
      console.log("this is new time")
    }
    var book1 = new Book(1, "zjj", 2000);
    console.log(book1);
    book1.getName(); // 111 getName是protected，可以訪問到類的私有屬性，所以實例化之后也可以訪問到函數的私有屬性
    // book1._checkId();        //報錯book1.checkId is not a function
    console.log(book1.id) // undefined id是在函數內部通過定義的，是私有屬性，所以實例化對象訪問不到
    console.log(book1.name) //name 是通過this創建的，所以在實例化的時候會在book1中復制一遍name屬性，所以可以訪問到
    book1.copy() //this is public
    book1.profunction(); //this is proFunction
    Book.setTime(); //this is new time
    book1.setTime(); //報錯book1.setTime is not a function

GPU云服務器云服務器深入理解webrtc之aec 深入理解javascript 深入理解系列深入理解linux

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96818.html

深入理解ES6之《用模塊封裝代碼》

摘要：導入模塊的代碼執行后，實例化過的模塊被保存在內存中，只要另一個語句引用它就可以重復使用它和的一個重要的限制是它們必須在其它語句和函數之外使用，也就是說不允許出現在語句中，不能有條件導出或以任何方式動態導出。什么是模塊模塊是自動運行在嚴格模式下并且沒有辦法退出運行的Javascript代碼在模塊的頂部this的值是undefined 其模塊不支持html風格的代碼注釋除非用def...

BigTomato 2019-08-20 18:58 評論0 收藏0
深入理解ES6之《用模塊封裝代碼》

摘要：導入模塊的代碼執行后，實例化過的模塊被保存在內存中，只要另一個語句引用它就可以重復使用它和的一個重要的限制是它們必須在其它語句和函數之外使用，也就是說不允許出現在語句中，不能有條件導出或以任何方式動態導出。什么是模塊模塊是自動運行在嚴格模式下并且沒有辦法退出運行的Javascript代碼在模塊的頂部this的值是undefined 其模塊不支持html風格的代碼注釋除非用def...

AbnerMing 2019-08-29 13:14 評論0 收藏0
javascript知識點

摘要：模塊化是隨著前端技術的發展，前端代碼爆炸式增長后，工程化所采取的必然措施。目前模塊化的思想分為和。特別指出，事件不等同于異步，回調也不等同于異步。將會討論安全的類型檢測惰性載入函數凍結對象定時器等話題。 Vue.js 前后端同構方案之準備篇——代碼優化目前 Vue.js 的火爆不亞于當初的 React，本人對寫代碼有潔癖，代碼也是藝術。此篇是準備篇，工欲善其事，必先利其器。我們先在代...

Karrdy 2019-08-26 11:34 評論0 收藏0
JavaScript之深入各種繼承

摘要：通常有這兩種繼承方式接口繼承和實現繼承。理解繼承的工作是通過調用函數實現的，所以是寄生，將繼承工作寄托給別人做，自己只是做增強工作。適用基于某個對象或某些信息來創建對象，而不考慮自定義類型和構造函數。一、繼承的概念繼承，是面向對象語言的一個重要概念。通常有這兩種繼承方式：接口繼承和實現繼承。接口繼承只繼承方法簽名，而實現繼承則繼承實際的方法。《JS高程》里提到：由于函數沒有簽名，...

tomlingtm 2019-08-23 17:08 評論0 收藏0