美文网首页让前端飞
JavaScript碎片———函数闭包(模拟面向对象)

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

作者: 88b61f4ab233 | 来源:发表于2019-04-28 17:18 被阅读22次

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

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

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

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

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

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

    想必各位朋友都在想既然是模拟面向对象,那是不是得有封装继承,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());
    

    最后

    为了帮助大家让学习变得轻松、高效,给大家免费分享一大批资料,帮助大家在成为全栈工程师,乃至架构师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习交流圈:866109386.欢迎大家进群交流讨论,学习交流,共同进步。

    当真正开始学习的时候难免不知道从哪入手,导致效率低下影响继续学习的信心。

    但最重要的是不知道哪些技术需要重点掌握,学习时频繁踩坑,最终浪费大量时间,所以有有效资源还是很有必要的。

    最后祝福所有遇到瓶疾且不知道怎么办的前端程序员们,祝福大家在往后的工作与面试中一切顺利。


    相关文章

      网友评论

        本文标题:JavaScript碎片———函数闭包(模拟面向对象)

        本文链接:https://www.haomeiwen.com/subject/jgjjnqtx.html