js的function个人小结

来源:互联网 发布:子曰 知乎德州扑克 编辑:程序博客网 时间:2024/04/29 11:35

一、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();

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



0 0
原创粉丝点击