js创建对象 设计模式

类的功能:

  • 构造器
  • 静态属性,静态方法
  • 共有属性,共有方法
  • 私有属性,私有方法

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

1.一个简单的类

var Person = function(name, age){
    this.name = name;
    this.age = age;

    this.sayName = function(){
        console.log(this.name);
    };
}
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

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

var Person = function(name, age){
    //共有属性
    this.name = name;
    this.age = age;
    //共有方法
    this.sayName = function(){
        console.log(this.name);
    };
}
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

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");
}
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

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;
})();
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36

调用如下:

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, 证明静态私有变量共享性
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 有些公共属性,方法,可以设置为静态的,这样可以在每次实例化的时候,不需要额外开辟内存资源,达到真正意义上的共享,
  • 有些公共的属性方法,只想在内部程序处理时候达到共享,则设置为,静态私有属性方法,
  • 有些公共的属性方法,想在实例对象中达到共享,则设置为prototype属性方法,
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值