使用JavaScript封装一个类-php教程-PHP中文网

本篇文章讲述了如何使用JavaScript封装一个类，大家对使用JavaScript封装一个类不了解的话或者对使用JavaScript封装一个类感兴趣的话那么我们就一起来看看本篇文章吧，好了废话少说进入正题吧

学过其他面向对象语言的JavaScripter，可能都应用过类，如：class{}，等定义的一系列方法，
但是初学者看是学习js的时候，经常会看到这样一句话，那就是JavaScript是面向对象语言，可是自己无论怎么学习，都不太清楚面向对象编程，我也是如此，开始一直纠结js面向对象编程，这几天算是有所了解了，谈谈我对js类的理解。。。

所谓类，会有以下功能：

1、构造器

2、静态属性，静态方法

3、共有属性，共有方法

4、私有属性，私有方法

本文就说说如何用js实现对类的封装，实现上述功能，

1.一个简单的类

var Person = function(name, age){
    this.name = name;    this.age = age;    this.sayName = function(){
        console.log(this.name);
    };
}

登录后复制

如何你觉得Ta不像类的话，那么你可以这样做

var Person = function(name, age){
    //共有属性
    this.name = name;    this.age = age;    //共有方法
    this.sayName = function(){
        console.log(this.name);
    };
}

登录后复制

如果对于构造函数模式不太清楚的话，可以看看这里js创建对象之设计模式

2.一个复杂的类

有了上面的例子之后，我们在此基础之上就可以进行我们的完善了。

var Person = function(name, age){
    //共有属性
    this.name = name;    //共有方法
    this.sayName = function(){
        console.log(this.name);
    };    //静态私有属性(只能用于内部调用)
    var home = "China";    //静态私有方法(只能用于内部调用)
    function sayHome(){
        console.log(home);
    }    //构造器
    this.setAge = function(age){
        console.log(age + 12);
    };    this.setAge(age);
}//静态方法（只能被类来访问）Person.sayAge = function(){
    console.log("your age is 12");
}//静态属性（只能被类来访问）Person.drink = "water";//静态共有方法（类和实例都可以访问）Person.prototype.sayWord = function(){
    console.log("ys is a boy");
}

登录后复制

js中利用上述的模拟方法，实现了对类的创建，在此基础上，我们不安现状，想要对他进行封装，让他成为一个整体，更利于体现js的封装性。

3.封装js类

这里我们用闭包来实现，首先解释下闭包的概念。
闭包概念：一个函数有权访问另一个函数作用域中的变量，即在一个函数内部创建另一个函数

实现如下：

var Person = (function(){
    //静态私有属性方法
    var home = "China";    function sayHome(name){
        console.log(name + "'s home in " + home);
    }    //构造函数
    function _person(name, age){
        var _this = this;        //构造函数安全模式，避免创建时候丢掉new关键字
        if(_this instanceof _person){            //共有属性, 方法
            _this.name = name;
            _this.getHome = function(){
                //内部访问私有属性，方法
                sayHome(_this.name);
            };
            _this.test = sayHome; //用于测试
            //构造器
            _this.setAge = function(age){
                _this.age = age + 12;
            }(age);
        }else{            return new _person(name, age);
        }
    }    //静态共有属性方法
    _person.prototype = {
        constructor: _person,
        drink: "water",
        sayWord: function(){
            console.log("ys is a boy");
        }
    }    return _person;
})();

登录后复制

调用如下：

var p1 = new Person("ys", 12);
p1.getHome();                   //ys's home in China
console.log(p1.age);            //24     

var p2 = Person("ys", 12);
p2.getHome();                   //ys's home in China
console.log(p2.age);            //24   

console.log(p2.test == p1.test);  //true, 证明静态私有变量共享性

登录后复制

如上面的代码一样，我们就用js实现了类

总结：

1、有些公共属性，方法，可以设置为静态的，这样可以在每次实例化的时候，不需要额外开辟内存资源，达到真正意义上的共享，

2、有些公共的属性方法，只想在内部程序处理时候达到共享，则设置为，静态私有属性方法，

3、有些公共的属性方法，想在实例对象中达到共享，则设置为prototype属性方法，
以上就是本篇文章的所有内容，大家要是还不太了解的话，可以自己多实现两边就很容易掌握了哦！

相关推荐：

javaScript封装的各种写法

Javascript封装手机类函数代码实例详解

以上就是使用JavaScript封装一个类的详细内容，更多请关注php中文网其它相关文章！