js如何创建类(封装)

小编 2026-06-09 阅读:166 评论:0
学过其他面向对象语言的JavaScripter,可能都应用过类,如:class{},等定义的一系列方法,  但是初学者看是学习js的时候,经常会看到这样一句话,那就是JavaScript是面向对象语言,可是...

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

所谓类,会有以下功能:

构造器
静态属性,静态方法
共有属性,共有方法
私有属性,私有方法
本文就说说如何用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实现了类

总结:

有些公共属性,方法,可以设置为静态的,这样可以在每次实例化的时候,不需要额外开辟内存资源,达到真正意义上的共享,
有些公共的属性方法,只想在内部程序处理时候达到共享,则设置为,静态私有属性方法,
有些公共的属性方法,想在实例对象中达到共享,则设置为prototype属性方法,
--------------------- 
转载:https://blog.csdn.net/xi_2130/article/details/50276025 
 

版权声明

本文仅代表作者观点,不代表百度立场。
本文系作者授权百度百家发表,未经许可,不得转载。

热门文章
  • 机房智能化温湿度解决方式之POE供电以太网温湿度传感器

    机房智能化温湿度解决方式之POE供电以太网温湿度传感器
    机房智能化温湿度解决方式之POE供电以太网温湿度传感器 北京盈创力和电子科技有限公司 智能型TCP网口温湿度记录仪 北京IP网络温湿度记录仪厂家,北京盈创力和 北京智能型TCP网口温湿度记录仪IP网络温湿度记录仪是一种新型的基于TCP/IP协议双绞线以太网标准温湿度采集模块,利用它可以实现现场温度值、相对湿度值的采集,同时利用其自身的RJ45通信接口可以方便地和机房监控主机或交换机集线器进行联网。 工作于-40℃~85℃工业级带...
  • Sequential Monte Carlo Methods (SMC) 序列蒙特卡洛/粒子滤波/Bootstrap Filtering

    Sequential Monte Carlo Methods (SMC) 序列蒙特卡洛/粒子滤波/Bootstrap Filtering
    Problem Statement 我们考虑一个具有马尔可夫性质、非线性、非高斯的状态空间模型(State Space Model):对于一个时间序列上的观测结果{yt,t∈N}\\{ y_t , t \\in N \\}{yt​,t∈N},我们认为每个观测结果yty_tyt​的生成依赖于一个无法直接观察的隐变量xt∈{xt,t∈N}x_t \\in \\{x_t , t \\in N \\}xt​∈{xt​,t∈N},即:p(...
  • HTTP状态保持的原理

    HTTP状态保持的原理
    a)在用户登录之后,浏览器返回响应的时候会在响应中添加上cookieb)浏览器接收到cookie之后会自动保存c)当用户再次请求同一服务器中的其他网页的时候,浏览器会自动带上之前保存的cookied)服务接收到请求之后可以请 request 对象中取到cookie 判断当前用户是否登录  Http是无状态的,就是连接时数据互通,关闭后...
  • Hive 系统函数及示例

    Hive 系统函数及示例
    查看所有系统函数 show functions; 函数分类 内置函数【系统函数】 数学函数: floor、round、ceil、cos、log2等 字符串函数: length、reverse、trim、lower、get_json_object、repeat等 收集函数: size 转换函数: cast 日期函数: year、month、datediff、date、date_add等 条件函数: coalesce、case…w...
  • CSRF的原理和防范措施

    CSRF的原理和防范措施
    a)攻击原理:i.用户C访问正常网站A时进行登录,浏览器保存A的cookieii.用户C再访问攻击网站B,网站B上有某个隐藏的链接或者图片标签会自动请求网站A的URL地址,例如表单提交,传指定的参数iii.而攻击网站B在访问网站A的时候,浏览器会自动带上网站A的cookieiv.所以网站A在接收到请求之后可判断当前用户是登录状态,所以...
标签列表