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

     更新时间:2019年03月13日 17:00:02   作者:钟离上河   我要评论

    这篇文章主要介绍了JavaScript函数闭包,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

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

    1、不使用prototype属性定义的对象方法,是静态方法,只能直接用类名进行调用!另外,此静态方法中无法使用this变量来调用对象其他的属性!
    2、使用prototype属性定义的对象方法,是非静态方法,只有在实例化后才能使用!其方法内部可以this来引用对象自身中的其他属性!
    Tips :所有的变量,如果不加上var关键字,则默认的会添加到全局对象的属性上去!

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

    第一?#20013;?#27861;:具体介绍见以下代码注释。

    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属?#28304;?#32780;能用this调用 Circle方法中的r属性*/
    
      var c = new Circle(1.0);/* 实例化 Circle*/
      alert(c.area());

    第二?#20013;?#27861;?#27827;隞ava类相似,推荐使用!

    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 ) );

    第三?#20013;?#27861;:主要思想是自己先实例化出一个对象,在往这个对象里添加属性及方法

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

     第四?#20013;?#27861;:该写法跳过new这一步骤,且电脑简单清晰明了,个人推荐这?#20013;?#27861;!!

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

     第五?#20013;?#27861;:此方法与前三种大同小异,不过听说这?#20013;?#27861;很少人用,不建议推荐使用哦!!

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

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

     封装:在看看如下代码我们能清晰的了解到封装的使用,假若我们去掉 var name = "default"; 中的var,那么结果?#36136;?#24590;么样??答案是与先前一样?#27169;?#30001;此可见无var定义的属性只是再其变量作用域中充当全局,只有属性在其作用域中是私有?#27169;?#33509;要定义一个私有方法需要将其赋予一个变量充当属性。还有本例中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函数闭包详解整合,希望对大家有所帮助,如果大家有任?#25105;?#38382;请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

  2. JavaScript 学习?#22987;牽?#21313;?#27169;?正则表达式

    JavaScript 学习?#22987;牽?#21313;?#27169;?正则表达式

    RegExp类 RegExp对象的构造函数可?#28304;?#19968;个或两个参数 第一个参数是描述需要进行匹配的模式字符串,如果还有第二个参数,这个参数则制定了额外的处理指令。
    2010-01-01
  3. js css后面所带参数含义介绍

    js css后面所带参数含义介绍

    网页链接的js css后面总是带有一些参数,想必大家并不?#21543;?#19979;面为大家介绍下这些参数的含义,感兴趣的朋友可以参考下
    2013-08-08
  4. js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍

    js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍

    各个主流浏览器德鼠标点击事件,方便使用时查询,整理还算是很详细吧,感兴趣的你可以参考下啊,希望本文对你有所帮助
    2013-01-01
  5. JavaScript表达式:URL 协议介绍

    JavaScript表达式:URL 协议介绍

    javascript:后面可以是表达式或者使用分号分隔的表达式集合如javascript: 5 + 4,感兴趣的朋友可以参考下或许可以帮助到你
    2013-03-03
  6. JavaScript 表单处理实现代码

    JavaScript 表单处理实现代码

    这篇文章主要介绍了JavaScript 表单处理实现代码,需要的朋友可以参考下
    2015-04-04
  7. 关于eval 与new Function 到底该选哪个?

    关于eval 与new Function 到底该选哪个?

    本篇文章小编将为大家介绍,关于eval 与new Function 到底该选哪个?有需要的朋友可以参?#23478;?#19979;
    2013-04-04
  8. 在JavaScript中处理数组之reverse()方法的使用

    在JavaScript中处理数组之reverse()方法的使用

    这篇文章主要介绍了在JavaScript中处理数组之reverse()方法的使用,是JS入门学习中的基础知识,需要的朋友可以参考下
    2015-06-06
  9. 探寻JavaScript中this指针指向

    探寻JavaScript中this指针指向

    JavaScript由于其在运行期进行绑定的特性,JavaScript 中的 this 可以是全局对象、当前对象或者?#25105;?#23545;象,这完全取决于函数的调用方式。
    2016-04-04
  10. javascript三种代码注释方法

    javascript三种代码注释方法

    本文主要介绍javascript中三种常见的代码注释的方法,希望能够帮到大家。
    2016-06-06
  11. 最新评论

    常用在线小工具

    山东群英会开奖查询