JavaScript 也可以面向对象

tiantiangeq

浏览: 303784 次

最近访客更多访客>>

kyo19

rushuai

chenliqiang

ywz1984

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

javascript 面向对象

由于js语言本身语法的灵活性，使得在js程序中出现了各种各样的代码风格，但也因为如此，导致了代码的可读性和可维护性大大降低，特别随着项目的不断更新，js代码的不断更新，到后期时甚至连自己的代码都不知然了，因此确定一种好的代码风格是很有必要的。

近些年随着ajax的兴起，js变得越来越受重视，js开始在web开发中充当非常重要的角色，因此也开始遇到了各种各样的问题，于是很多大牛就提出了js的面向对象编程方法。

JavaScript是一种基于原型（prototype）的面向对象的语言，它没有类的概念，所有的一切都派生自现有对象的一个副本。

一、下面看我画的总结图：

二、难点解析

1、this的概念

this管家你在引用的是包含它的函数作为某个对象的方法被调用时的那个对象。下面看下面一个小例子：

Html代码 
<script type="text/javascript">  
  var sound="admin";  
  function myFunction(){  
    this.style.color='red';  
    alert(sound);  
  }  
</script>  
  
<body>  
  <a href="#" id="a">这是测试用的超链接</a>  
<script type="text/javascript">  
   document.getElementById("a").onclick=myFunction;  
</script>  
</doby>  

根据this的定义我们知道，上例中的this代表的是超链接。

2、构造函数的创建

Function是创建构造函数的起点。我们在之前学习C#的时候就已经学过，在创建函数实例的时候，我们也能创建构造函数。在js中也一样，例如编写代码：

var myObject=new myConstructor();

此时，myConstructor函数也可以作为构造函数。当对象被实例之后，构造函数会执行包含的代码。

3、闭包

闭包其实非常好理解，它的含义就类似于我们所学习的全局变量和局部变量。闭包是将函数内部和函数外部连接起来的一座桥梁。

下面看一个例子，详见注释：

Html代码 
<script type="text/javascript" language="javascript">  
    function override(){  
      
        //自定义alert函数  
        var alert=function(message){  
            window.alert('override'+message);  
        };  
        alert('alert');//调用自定义的alert函数。  
        window.alert('window.alert');//调用window内置函数alert  
    }  
    override();//调用函数，执行函数内部的方法  
    alert('alert from outside');//调用window函数的alert（这里由于闭包的原因，看不到用于自定义的alert函数）  
</script>  

闭包的作用：一是可以读取函数内部的变量，另一个是让这些变量的值始终保持在内存中。怎样理解这句话呢？下面再来看一段代码：

Html代码 
<script type="text/javascript">  
    function funOne(){  
        var n=999;  
        nAdd=function(){  
            n+=1;  
        }  
        function funTwo(){  
            alert(n);  
        }  
        return funTwo;  
    }  
      
    var result=funOne();  
    result();//999  
    nAdd();  
    result(); //1000  
</script>  

在这段代码中，result实际上就是闭包funTwo函数。它一共运行了两次，第一次的值是999，第二次的值是1000。这证明了funOne中的局部变量n一直保存在内存中，并没有在funOne调用后被自动清除。

为什么会这样呢？因为funOne是funTwo的父函数，而funTwo被赋给了一个全局变量，这导致funTwo始终在内存中，而funTwo的存在依赖于funOne，因此funOne也始终在内存中，不会在调用结束后，被垃圾回收机制——garbage collection回收。

“nAdd=function(){n+=1}”一行代码中，首先在nAdd前面没有使用var关键字，因此nAdd是一个全局变量，而不是局部变量。其次，nAdd的值是一个匿名函数——anonmous function，而这个匿名函数本身也是一个闭包，所以nAdd相当于一个setter，可以在函数外部对函数内部的局部变量进行操作。

三、总结

js面向对象部分的总结就到这里了。很多地方，本人理解的也不是很到位，希望您提出宝贵意见。本博客之前，推出过关于js面向对象的小例子，如果有兴趣的话，您可以自行查看。