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


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

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

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

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

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

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    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类相似,推荐使用!

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    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 ) );

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

    ?
    1
    2
    3
    4
    5
    6
    7
    var Circle = new Object();
    Circle.PI = 3.14159;
    Circle.Area = function( r ) {
        return this.PI * r * r;
    }
      
    alert( Circle.Area( 1.0 ) );

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

    ?
    1
    2
    3
    4
    5
    6
    7
    var Circle={
          "PI":3.14159,
         "area":function(r){
             return this.PI * r * r;
            }
        };
        alert( Circle.area(1.0) );

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

    ?
    1
    2
    3
    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 可加可不加,若不加可往其后添加()图片切换

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    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方法将需要继承的类放入其中即可达到继承的效果。。

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    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());
  • 相关阅读:
    C primer plus 5 读书笔记2
    c primer plus 5 读书笔记1
    控制反转(IOC)模式
    软件设计原则
    springmvc跨域
    由阿里巴巴笔试题看java加载顺序
    spring各个包之间的依赖关系
    spring mvc 国际化
    git 笔记
    eclipse中maven项目部署到tomcat
  • 原文地址:https://www.cnblogs.com/good10000/p/10585343.html
Copyright © 2020-2023  润新知