JavaScript程序设计实训目的

转载

ganmaobuhaowan 2024-10-25 11:30:00

文章标签 JavaScript程序设计实训目的 javascript 设计模式 Web 私有方法 文章分类 JavaScript 前端开发

封装
首先我们得先创建一个类，如何创建？首先声明一个函数保存在一个变量中，按编程习惯一般将这个变量名首字母大写。在这个函数得内部，用this添加属性或者方法。类也是一个对象，所以也有原型prototype，当然也可以在原型对象上赋值。

//创建一个Web类
var Web = function(id, name, address){
    this.id = id;
    this.name = name;
    this.address = address;
}
//或者
var Web.prototype.display = function(){
   //内部逻辑
}

这样我们就将属性和方法封装在我们抽象的Web类里面了，当使用功能方法时，我们不能直接使用这个Web类，需要用new关键字来实例化（创建）新对象。

var web = new Web(1,'我的CSDN','');
console.log(web.name) //我的CSDN

当然我们在封装内创建属性的方法不仅仅只有上面这两种。
私有属性（方法）：由于JavaScript的函数级作用域，声明在函数内部的变量以及方法在外界时访问不到的。
对象公有属性：在函数内部通过this创建的属性，每个对象自身都拥有一份并且可以在外部访问到。
特权方法：在函数内部通过this创建的方法，不但可以访问这些对象的共有属性，还能访问到类或对象自身的私有属性和方法。
构造器：在对象创建时通过使用特权方法，我们可以初始化实力对象的一些属性，因此这些在创建对象时调用的特权方法还可以看作时类的构造器。
类的静态公有属性（方法）：通过new关键字创建新对象时，由于类外面通过点语法添加的属性和方法没有执行到，所以新创建的对象无法获取它们。
公有属性（方法）：类通过prototype创建的属性或方法在类实例的对象中是可以通过this访问到的。

//私有属性与私有方法，特权方法，对象公有属性，构造器，类的静态公有属性与方法，公有属性与方法
var Web = function(id, name, address){
    //私有属性
    var index = 1;
    //私有方法
    function checkIndex(){};
    //特权方法
    this.getName = function(){};
    this.getAddress = function(){};
    this.setName = function(){};
    this.setAddress = function(){};
    //对象公有属性
    this.id = id;
    //构造器
    this.setName(name);
    this.setAddress(address);
}
//类的静态公有属性（对象不能访问）
Web.language = 'China';
//类的静态公有方法（对象不能访问）
Web.updateTime = function(){
    console.log('updateTime')
}
Web.prototype = {
    //公有属性
    isPublic : true,
    //公有方法
    display : function(){
        console.log('display');
    }
}

//测试代码
var web = new Web(2,'我的CSDN','');
console.log(web.index)  //undefined
console.log(web.id) //2
console.log(web.language)   //undefined
console.log(web.isPublic)   //true
console.log(Web.language)   //China
console.log(Web.updateTime())   //updateTime

闭包实现
有时我们经常将类的静态变量通过闭包来实现

//利用闭包实现
var Book = (function(){
    //静态私有变量
    var bookNum = 0;
    //静态私有方法
    function checkBook(){}
    //创建类
    function _book(newId, newName, newPrice){
        //私有变量
        var name, price;
        //私有方法
        function checkId(id){}
        //特权方法
        this.getName = function(){}
        this.getPrice = function(){}
        this.setName = function(){}
        this.setPrice = function(){}
        //公有属性
        this.id = newId;
        bookNum++
        if(bookNum > 10){
            throw new Error('我们仅出版100本书');
        }
        //构造器
        this.setName(newName);
        this.setPrice(newPrice);
    }
    //构建原型
    _book.prototype = {
        //静态公有属性
        isJSBook : false,
        //静态公有方法
        display : function(){}
    }
    //返回类
    return _book;
})()