欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript碎片———函数闭包(模拟面向对象)

程序员文章站 2022-11-22 09:51:16
经过这几天的博客浏览,让我见识大涨,其中有一篇让我感触犹深,JavaScript语言本身是没有面向对象的,但是那些大神们却深深的模拟出来了面向对象,让我震撼不已。本篇博客就是在此基础上加上自己的认知,如有错误,还请见谅。 具体来说实现模拟面向对象主要是利用JavaScript函数闭包这个概念。由于J ......

       经过这几天的博客浏览,让我见识大涨,其中有一篇让我感触犹深,javascript语言本身是没有面向对象的,但是那些大神们却深深的模拟出来了面向对象,让我震撼不已。本篇博客就是在此基础上加上自己的认知,如有错误,还请见谅。

      具体来说实现模拟面向对象主要是利用javascript函数闭包这个概念。由于javascript中的每一个function都会形成一个作用域,而如果变量声明在这个域中,那么外部是无法直接去访问,要想访问必须new出一个实例来,相当于java中class。首先让我们来了解一下prototype方法:

        1、不使用prototype属性定义的对象方法,是静态方法,只能直接用类名进行调用!另外,此静态方法中无法使用this变量来调用对象其他的属性!
   2、使用prototype属性定义的对象方法,是非静态方法,只有在实例化后才能使用!其方法内部可以this来引用对象自身中的其他属性!

         tips :所有的变量,如果不加上var关键字,则默认的会添加到全局对象的属性上去!

 

       具体来说模拟类有以下5种常见写法:

       第一种写法:具体介绍见以下代码注释。

 1     function circle(r) {
 2         this.r = r;
 3     }
 4 
 5     circle.pi = 3.14159;/*circle.pi属于全局变量  */
 6     circle.prototype.area = function() {
 7         return circle.pi * this.r * this.r;
 8     }/*circle方法调用prototype属性从而能用this调用  circle方法中的r属性*/
 9 
10     var c = new circle(1.0);/* 实例化 circle*/
11     alert(c.area());

      第二种写法:与java类相似,推荐使用!

 1 var circle = function() {  
 2        var obj = new object();  /*先实例化object方法,使之能调用 obj.pi属性及obj.area方法*/
 3        obj.pi = 3.14159;  
 4          
 5        obj.area= function( r ) {  
 6            return this.pi * r * r;  
 7        }  
 8        return obj;  
 9     }  
10       
11     var c = new circle();  
12     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) );  

      想必各位朋友都在想既然是模拟面向对象,那是不是得有封装继承,getset方法???答案是肯定的,那让我们来看看如下代码:

      封装:在看看如下代码我们能清晰的了解到封装的使用,假若我们去掉 var name = "default"; 中的var,那么结果又是怎么样??答案是与先前一样的,由此可见无var定义的属性只是再其变量作用域中充当全局,只有属性在其作用域中是私有的,若要定义一个私有方法需要将其赋予一个变量充当属性。还有本例中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()); 

                                                                                                                                                             注: 本贴代码纯属参考各路大神,切不可以转发哦!!!