深入理解 Javascript 之 JS的封裝

張漢慶發(fā)布于2019-08-23 10:55 / 3112人閱讀

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

封裝

常見的封裝

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();
    }
}

執(zhí)行結(jié)果如下：

（原因是調(diào)用pm的時(shí)候，this指向的其實(shí)是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();
    }
}

工廠函數(shù)

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

javascript也有private public protected

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

上栗子

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

      // protected(可以訪問到函數(shù)內(nèi)部的私有屬性和私有方法，在實(shí)例化之后就可以對(duì)實(shí)例化的類進(jìn)行初始化拿到函數(shù)的私有屬性)
      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的原型上添加的方法實(shí)例化之后可以被實(shí)例化對(duì)象繼承
    Book.prototype.profunction = function () {
      console.log("this is profunction");
    }
    //在函數(shù)外部通過.語法創(chuàng)建的屬性和方法，只能通過該類訪問，實(shí)例化對(duì)象訪問不到
    Book.setTime = function () {
      console.log("this is new time")
    }
    var book1 = new Book(1, "zjj", 2000);
    console.log(book1);
    book1.getName(); // 111 getName是protected，可以訪問到類的私有屬性，所以實(shí)例化之后也可以訪問到函數(shù)的私有屬性
    // book1._checkId();        //報(bào)錯(cuò)book1.checkId is not a function
    console.log(book1.id) // undefined id是在函數(shù)內(nèi)部通過定義的，是私有屬性，所以實(shí)例化對(duì)象訪問不到
    console.log(book1.name) //name 是通過this創(chuàng)建的，所以在實(shí)例化的時(shí)候會(huì)在book1中復(fù)制一遍name屬性，所以可以訪問到
    book1.copy() //this is public
    book1.profunction(); //this is proFunction
    Book.setTime(); //this is new time
    book1.setTime(); //報(bào)錯(cuò)book1.setTime is not a function