您的位置 >>> 星想互联 >>> 编程技术 >>> JQUERY+JS
js如何创建类(封装)
点击数:2610  发布时间2018-06-21 23:55:48

学过其他面向对象语言的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属性方法,

来源:咸宁网站建设