简单的记录一下JavaScript 高级应用

浏览数：30 / 时间：2015年06月08日

我是一名.net 程序员但是由于公司需求，开发离线app，但是在工作的过程中我发现，周围人在写JavaScript的时候都是面向过程的编码，对于我这.net程序员，遇到这种情况真是六神无主，但是工作中还要赶进度，于是乎我就白天工作，晚上就在别人玩游戏的时候，好好的研习了一下JavaScript的面向对象的实现方式。

以下的讲解我只简单的说明一下，我这个项目中使用到的技术的简单说明。

【一】

"use strict"; 采用了严格模式，这样写的好处可以消除Javascript一些不合理的语法（例如：）

var temp = "7072547";

temp2 = "7452707";

这里面的temp2它是一个全局的变量，在使用严格模式的时候，会爆一个异常。详细的内容可以看严格模式详解

【二】匿名函数自调用，由于js里面没有块的概念，如果把变量定义在公共空间上，这样变量就属于一个Window 下的变量，只有当window 销毁的时候才会销毁空间

(function(win){
     var _win = win;
     var name = "王阳";
     var qq = "7072547";
})(window)

上面的代码的好处是我把window的处理当做局部对象，而在函数里面的变量都是局部变量这样就不会占用过多的全局空间，同时方法里面命名的变量也不会与方法外面的变量命名进行冲突。

【三】这里是重点使用了面向对象，js 面向对象可不想其他传统语言例如java c# 那样对类划分的非常的清晰，js的面向对象可以说是面向于无形，你也可以理解为此时无形胜有形，为什么这样说那

C# 类的实现都是都会有class 关键字，可是js 那！只有个function ，我刚开始写js 的时候想用面向对象都无从下手，但辛亏我在人家玩游戏的时间，好好的研习一下JavaScript，才了解原来其实function

可以算是一个特殊的对象了。

function belle(){
      this.name;      
}

belle.display = function(){
      alert(this.name);  
}

belle.display();

上面的代码来看函数完全有类的特性，其实上面的代码belle就是构造函数，而display就是他的静态方法。

如果把上面的代码写成这个样子be.display()就会报错不是一个函数，其实是未找到这个方法。为什么那？

function belle(){
      this.name;      
}

belle.display = function(){
      alert(this.name);  
}

var be =new belle();
be.display();

在别人玩游戏的时候，好好研习了JavaScript的时候才发现，be 是对象而对象是没有原型属性的（prototype）对象只有__proto__ 内置属性和construcor。在

var be =new belle(); 实例化的时候 会把belle 函数的prototype的地址给__proto__属性 如果 be 是个空对象 那么be下面的constructor 会指向 object，但是如果new 了之后
be下面的constructor就指向了belle();所以你在var be = new belle();  be.display() 会报找不到这个函数，因为对象在查找不到属性的情况下会向prototype里面去查找，但是上面的
代码函数只挂在constructor上面所以报会找不到的错误，上面的代码可以这样改写。

function belle(){
      this.name;      
}

belle.display = function(){
      alert(this.name);  
}

var be = new belle();
be.constructor.display();

这下明白了吧！

然后就是使用prototype来实现类公共方法。下面是我之前写的面向对象实现方式

function belle(){
    var self = this;
    self.name = "王阳";  
    self.qq = "7072547";
    self.myMethod = function()
    {
        alert("name:"+self.name+" qq:"+self.qq);
    }
}

var be =new belle();
be.myMethod();

这样就实现了面向对象，我可以使用工厂模式等常用设计模式来改写我们的前台代码，由于现在web的前端代码越来越多，这样写的自然好处多多，但是

仔细查看上面的代码你们有没有发现个问题？

什么问题那，如果上面的代码我采用工厂模式的话，我每new一个对象，belle里面的属性和方法就要重新开辟空间，这样对大对象的操作，简直是太过美观不敢直视啊！

所以说，我采用下的方式就解决了这个问题。

function belle(){
    var self = this;
    self.name = "王阳";  
    self.qq = "7072547";
}
belle.prototype.myMethod = function(){
    alert("name:"+this.name+" qq:"+this.qq);
}


var be =new belle();
be.myMethod();