js类的几种写法

我们常用的有以下几种方法来用JavaScript写一个“类”:

1. 构造函数(public属性和方法)

1: function Person(iName, iAge){
 2:  this.name=iName; //public
 3:  this.age=iAge; //public
 4:  this.ShowStudent=function(){ //public
 5:  alert(this.name);
 6:  };

 7: }
缺点很明显,类的属性和方法,很容易被外部修改。

以上的属性和方法都是public的。下面的例子给出private和public的属性和方法。

2. 构造函数(public, private属性和方法)

 1: function Person(iName, iAge){
 2:  //private field
 3:   var name = iName;    
 4:  var age = iAge;
 5:      
 6:  //private method
 7:   var privatefn = function(){    
 8:    alert(name);
 9:   }
 10:
 11:  return {
 12:     //public field
 13:  Name: "hello " + name,
 14:  Age: "hello " + age,
 15:
 16:  ShowStudent: function(){
 17:  privatefn(); 
 18:  alert(this.Name); 
 19:  }
 20:  };
 21: }

调用:(new Person("xiao","10")).ShowStudent();

3. 原型方法(prototype)

 1: function c(){}
 2: c.prototype={
 3:  name: "init value a",
 4:  setName: function(iName){
 5:  this.name=iName;
 6:  },
 7:  getName: function(){
 8:  alert(‘hello from c, name: ‘ + this.name);
 9:  }
 10: };
 11: (new c).getName(); // 输出hello from c, name: init value a

4. 构造函数+原型方法(prototype)

 1: function Person(iName) {
 2:  this.name = iName;
 3: };
 4:
 5: Person.prototype={
 6:  getName: function(){
 7:  return this.name;
 8:  }
 9: };
 10:
 11: //调用
 12: var b = new Person("jack");
 13: alert(b.getName()); 

一般多会用上面这种写法。

5. 构造函数+原型方法(prototype)- 节省内存的写法

 1: function Person(iName, iAge){
 2:  this.name=iName;
 3:  this.age=iAge;
 4:
 5:  //对象实例都共享同一份方法不造成内存浪费
 6:  if(typeof Person._initialized == "undefined"){
 7:  Person.prototype.ShowStudent=function(){
 8:  alert(this.name);
 9:  };
 10:  Person._initialized=true;
 11:  }
 12: }
 13: //调用
 14: (new Person("jack","20")).ShowStudent();

以上的实现方法如果不用_initialized的方法,也可以指向一个外部函数,道理一样。

6. JavaScript类的单例(Singleton)模式写法

 1: var MyNamespace = {};
 2: MyNamespace.Singleton = (function() {
 3:  var uniqueInstance; // Private attribute that holds the single instance.
 4:  function constructor() { // All of the normal singleton code goes here.
 5:  // Private members.
 6:  var privateAttribute1 = false;
 7:  var privateAttribute2 = [1, 2, 3];
 8:  function privateMethod1() {
 9:  //...
 10:  }
 11:  function privateMethod2(args) {
 12:  //...
 13:  }
 14:  return { // Public members.
 15:  publicAttribute1: true,
 16:  publicAttribute2: 10,
 17:  publicMethod1: function() {
 18:  // ...
 19:  },
 20:  publicMethod2: function(args) {
 21:  // ...
 22:  }
 23:  }
 24:  }
 25:  return {
 26:  getInstance: function() {
 27:  if(!uniqueInstance) { // Instantiate only if the instance doesn‘t exist.
 28:  uniqueInstance = constructor();
 29:  }
 30:  return uniqueInstance;
 31:  }
 32:  }
 33: })();
 34:
 35: //调用:
 36: MyNamespace.Singleton.getInstance().publicMethod1();
时间: 2024-08-27 03:06:15

js类的几种写法的相关文章

可拖动弹窗的JS和jQuery两种写法

最近在慕课网上学习了一个网页可拖动对话框js实现的演示视频,这个demo中的例子是百度首页登录按钮的弹窗,如下图: 当点击左上角的登录按钮时,弹窗出现并自动居中,同时窗口可拖动的范围被限制在了可视区域内,即浏览器视窗的上下左右边界,弹窗无法移出移动出四个边界,也不会出现滚动条. 另一个效果就是,当改变窗口大小时,对话框自动居中. 这个视频中用了原生js,jQuery两种写法实现案例,但本质上,对话框居中,限制拖动范围的的计算思路是一致的. 为了简化页面,总结核心思路,我重新写了一个小demo,界

js面向对象的几种写法

有段时间没写js了,复习了一下js相关的东西,把面向对象的部分挑出来做个记录.以下代码综合别的博客,但都是经过自己验证. 1,工厂方式 var Circle = function(){ var obj =  new Object();    obj.PI = 3.14; obj.area = function(r){        return this.PI * r * r;    } return obj;}var c = new Circle();alert(c.area(1.0));//

JS面向对象的几种写法2

//定义Circle类,拥有成员变量r,常量PI和计算面积的成员函数area() 1.工厂方式 var Circle = function() { var obj = new Object(); obj.PI = 3.14159; obj.area = function( r ) { return this.PI * r * r; } return obj; } var c = new Circle(); alert( c.area( 1.0 ) ); 2.比较正规的写法 function Ci

js面向对象的五种写法

第一种: //第1种写法 function Circle(r) { this.r = r; } Circle.PI = 3.14159; Circle.prototype.area = function() { return Circle.PI * this.r * this.r; } var c = new Circle(1.0); alert(c.area()); 第二种: //第2种写法 var Circle = function() { var obj = new Object(); o

JS 定时器的4种写法及介绍

JS提供了一些原生方法来实现延时去执行某一段代码,下面来简单介绍一下setTiemout.setInterval.setImmediate.requestAnimationFrame. 一.什么是定时器 JS提供了一些原生方法来实现延时去执行某一段代码,下面来简单介绍一下 setTimeout: 设置一个定时器,在定时器到期后执行一次函数或代码段 var timeoutId = window.setTimeout(func[, delay, param1, param2, ...]); var

js和jquery 两种写法 鼠标经过图片切换背景效果

这个是javascript的写法 <img src="res/img/shop-c_32.jpg" onmouseover="this.src='res/img/shop-c_29.jpg';" onmouseout="this.src='res/img/shop-c_32.jpg';"> 这是个jquery的写法 <img src="res/img/shop-c_32.jpg" data-back=&quo

3.Struts2中Action类的三种写法

一.普通的POJO类(没有继承没有实现) public class DemoAction1 { public String execute(){ System.out.println("DemoAction1是普通的POJO类..."); return null; } } <!-- 普通的POJO类 --> <action name="action1" class="com.struts2.web.action2.DemoAction1&

js对象的两种写法

<script> //定义一个对象,提供对应的方法或者属性 var s = { sd1: function () { }, sd2: function () { }, index: "2", } s.sd1; s.sd2; s.index //定义一个函数t,提供对外访问的方法 var t = function () { function t1() { } function t2() { } return { it1: t1, it2: t2 } }(); t.it1 t.

js函数的几种写法

第一:也是最常见的 function A(){ } 用法 A(); 第二: var B = function(){ } 用法 B();//这是匿名函数 第三: (function () { })(); 或者 (function () { }()); 后面的小括号就是执行此函数的意思 var test = function() {return "圆心"}(); alert(test);我们运行情景二代码,将返回显示"圆心",此时该代码等价于: var 匿名函数 = f