js的function个人小结



一、function有几种定义方式?

1: function ftn() {}   

2：var ftn = function() {}

目前用到的是这2种方式，第一种和第二种看起来差不多，但是在有些情况下，还是存在差异的。

如 下面的代码

var ftn = function () {
      return function () {
          
      }
}();

function ftn() {
      return function() {
      
      }
}();

第一个函数，用ftn 直接引用 return function() 返回的函数， 相当于 ftn = function(){}

第二个函数 返回的function 没有任何的变量去引用他

二、function中可以定义那些属性？

js中的function感觉太诡异，打个比方function 既可以是java中的method，也可以是java中的class.从java的角度上看function，里面可以有成员属性方法，局部属性方法，静态属性方法，以及原型上的属性方法

1、如定义成员属性方法和局部属性方法

var ftn = function () {
      var name = 'stray';
       var show = function () {
             alert('welcome stray');
       }
      this .age = '111';
       this.display = function () {
             alert(this.age);
       }
}

2、定义原型属性方法和静态属性方法 

var ftn = function () {

}
ftn.prototype.show = function() {   //原型上的方法
       alert('welcome stray');
}
ftn.display = function() {  //静态方法
       alert('欢迎您，流浪');
}
ftn.display(); //静态方法只能以这种方式调用，不能通过对象引用
var fn = new ftn(); //原型上的属性方法只能通过创建对象以后才能使用
fn.show();

这里先扩充一下，涉及部分个人理解,谨慎对待

1、像var类型是在外部无法被访问的，为什么？ js中的局部变量不能被所在的作用域外部访问，只能被所在作用域里面任何地方（可以下边还有作用域）访问。 

2、在定义function的前要明确这个function要怎么使用。为什么要这么说了，应该定义function里面的内容的方式太多了，每一种方式代表了不同的目的。

•    直接使用function名字加括号进行调用 如：ftn() 里面不返回任何东西，只是执行一个逻辑，外部不调用里面东西
•    里面定义成员变量，像java类一样，调用里面定义的成员属性，在外部只能通过new ftn 创建对象，来引用
•    闭包的形式,还外部是通过ftn()普通调用里面的方法，但是需要return一个匿名function，在里面封装具体功能，这个匿名函数里面，还可以return另外一个方法，这涉及在prototype原型和一些静态属性方法的用法。这一点类似于java的类，内部类，结合扩充的第一点，可以大胆的当做一个类的思维去定义这个function

有了上边的讲解，我接下来打算改一个function的定义形式，先看看原来的

var ftn = function () {

}
ftn.prototype.show = function() {   //原型上的方法
       alert( 'welcome stray');
}
ftn.display = function() {  //静态方法
       alert( '欢迎您，流浪');
}
ftn.display(); //静态方法只能以这种方式调用，不能通过对象引用
var fn = new ftn(); //原型上的属性方法只能通过创建对象以后才能使用
fn.show();

正如所看到那样，上边扩展原型上的方法和静态方法是在ftn的外部的。感觉非常的糟糕，能不能在ftn里面定义，将show display的方法体在ftn中定义成一个var局部方法，然后像java类那样调用，让代码看起来更加的简单。

var ftn = function () {
      var temp = function() {  
             alert( 'welcome stray');
       }
      var temp1 = function() {
             alert( '欢迎您，流浪');
       }
}

好吧，我写到这里就卡住了，原型，静态属性怎么加？ 可以ftn方法体重直接ftn.prototype.show = . 吗 不行！既然如此，我就使用中间方法来解决

var ftn = function () {
      var temp = function() {  
             alert( 'welcome stray');
       }
      var temp1 = function() {
             alert( '欢迎您，流浪');
       }
      var newftn = function() {};
      newftn.prototype.show = temp;
      newftn.display = temp1;
       return newftn;
}
var fn = ftn();  //这个例子说的就是下面第三点内容闭包形式
var obj = new fn();
obj.show();
fn.display();

代码看起来全部包含在ftn右边那个函数里面了。但是看起来太凌乱了，我在包一个function，在里面具体写封装的东西：

var ftn = function () {
      var temp = function() {  
             alert( 'welcome stray');
       }
      var temp1 = function() {
             alert( '欢迎您，流浪');
       }
      return function () {  //具体的封装在这里写
            var newftn = function() {};
            newftn.prototype.show = temp;
            newftn.display = temp1;
             return newftn;
       }
      
} ();
var fn = ftn();  //这个例子说的就是上面第三点内容闭包形式
var obj = new fn();
obj.show();
fn.display();

好了，世界安静了，看起来代码可读性也挺好的。