10

封装

常见的封装

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,因此没有输出)

clipboard.png

  • 解决办法
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();
    }
}

clipboard.png

工厂函数

clipboard.png

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

Meils
1.6k 声望157 粉丝

前端开发实践者