JS函数闭包实现面向对象：五种模拟写法与封装继承解析

JavaScript面向对象模拟概述

近期阅读技术博客时，发现尽管JavaScript语言原生并不具备传统意义上的面向对象特性，但许多资深开发者通过巧妙的设计模式成功实现了面向对象编程的效果，这种技术实现令人印象深刻。本文将在前人经验的基础上，结合个人理解，对这一主题进行梳理与总结，若有疏漏之处，敬请指正。

函数闭包与作用域机制

实现这种模拟的核心在于利用JavaScript的函数闭包机制。在JavaScript中，每个函数都会创建一个独立的作用域，声明在该作用域内的变量无法被外部直接访问。若要访问这些变量，必须通过实例化函数来创建对象，这类似于Java中通过class定义类的行为。接下来，我们将首先探讨prototype方法的具体应用。

prototype属性与静态非静态方法

关于对象方法的定义，主要存在两种模式： 1. 不使用prototype属性定义的方法被视为静态方法，只能通过类名直接调用。此外，在这类静态方法内部，无法使用this关键字来访问对象的其他属性。 2. 使用prototype属性定义的方法属于非静态方法，必须在实例化对象后才能调用。这类方法内部可以通过this关键字引用对象自身的其他属性。注意：若定义变量时省略var关键字，该变量将默认成为全局对象的属性。

五种模拟类的常见写法

基于上述原理，模拟JavaScript中的类通常有以下五种常见实现方式：

第一种实现方式的具体逻辑详见下方代码注释说明。


function Circle(r) {
    this.r = r;
  }

  Circle.PI = 3.14159;/*Circle.PI属于全局变量 */
  Circle.prototype.area = function() {
    return Circle.PI * this.r * this.r;
  }/*Circle方法调用prototype属性从而能用this调用 Circle方法中的r属性*/

  var c = new Circle(1.0);/* 实例化 Circle*/
  alert(c.area());

第二种实现方式在结构上与Java类较为相似，是推荐使用的写法之一。


var Circle = function() { 
    var obj = new Object(); /*先实例化Object方法，使之能调用 obj.PI属性及obj.area方法*/
    obj.PI = 3.14159; 
     
    obj.area= function( r ) { 
      return this.PI * r * r; 
    } 
    return obj; 
  } 
   
  var c = new Circle(); 
  alert( c.area( 1.0 ) );

第三种实现方式的核心思想是：首先实例化一个对象，随后向该对象动态添加属性和方法。


var Circle = new Object(); 
Circle.PI = 3.14159; 
Circle.Area = function( r ) { 
    return this.PI * r * r; 
} 
 
alert( Circle.Area( 1.0 ) );

第四种实现方式跳过了new关键字的使用步骤，代码结构相对简单清晰，个人较为推荐此种写法。


var Circle={ 
      "PI":3.14159, 
     "area":function(r){ 
         return this.PI * r * r; 
        } 
    }; 
    alert( Circle.area(1.0) );

第五种实现方式与前三种大同小异，但由于实际开发中较少使用，此处不建议作为首选方案。


var Circle = new Function("this.PI = 3.14159;this.area = function( r ) {return r*r*this.PI;}"); 
 
alert( (new Circle()).area(1.0) );

封装、继承与Getter/Setter实现

既然目标是模拟面向对象编程，那么必然涉及封装、继承以及getter/setter方法。答案确实是肯定的，下面通过具体代码来展示这些特性的实现。

关于封装的实现：观察下方代码可以清晰看到封装的使用场景。如果移除代码中var name = "default";语句里的var关键字，结果会有何不同？实际上结果保持一致，这表明无var定义的属性仅在变量作用域内充当全局变量。只有明确使用var定义的属性才具有私有性。若要定义私有方法，需将其赋值给一个变量作为属性存在。此外，本例中的new关键字可选，若不使用new，可在函数调用后直接添加()。


var person = function(){  
  //变量作用域为函数内部，外部无法访问  
  var name = "default";    
    
  return {  
    getName : function(){  
      return name;  
    },  
    setName : function(newName){  
      name = newName;  
    }  
  }  
}();  
   

alert(person.name);//直接访问，结果为undefined 
alert(person.getName());  
person.setName("abruzzi");  
alert(person.getName());

关于类与继承的实现：该示例的主要思路是定义一个变量，将一个方法赋值给它，然后根据prototype方法将需要继承的类放入其中，从而达成继承的效果。


function Person(){  
  var name = "default";    
    
  return {  
    getName : function(){  
      return name;  
    },  
    setName : function(newName){  
      name = newName;  
    }  
  }  
  }; /* 封装好的一个类Person */ var Jack = function(){};
  //继承自Person
  Jack.prototype = new Person();
  //添加私有方法
  Jack.prototype.Say = function(){
    alert("Hello,my name is Jack");
  };
  var j = new Jack();
  j.setName("Jack");
  j.Say();
  alert(j.getName());

以上是对JavaScript函数闭包及其在面向对象模拟中应用的详细整合，希望能对读者有所帮助。如有任何疑问，欢迎留言讨论，小编会及时回复。在此感谢大家对本站的支持！

JavaScript利用函数闭包模拟面向对象编程详解

JavaScript面向对象模拟概述

函数闭包与作用域机制

prototype属性与静态非静态方法

五种模拟类的常见写法

封装、继承与Getter/Setter实现

实用工具推荐