JavaScript函数

• 定义函数

  • 定义方式1

  function abs(x){
      if(x>=0){
          return x;
      }else{
          return -x;
      }
  }
  

  • 定义方式2：采用匿名内部类方式创建函数，直接通过变量名就可以调用函数

  var abs = function(x){
      if(x>=0){
          return x;
      }else{
          return -x;
      }
  }
  

• 函数调用

  abs(10); //10
  abs(-10); //10
  

• JavaScript不传参数或传递任意个参数都不会报错

  • 规避不传参数的问题

  var abs = function(x){
      //手动抛出异常
      if(typeof x !== 'number'){
          throw 'Not a Number';
      }
      if(x>=0){
          return x;
      }else{
          return -x;
      }
  }
  

  • 规避传任意个参数的问题
    • arguments代表传递进来的所有的参数，是一个数组

  var abs = function(x){
      if(arguments.lengt = 1){
          if(x>=0){
          return x;
      	}else{
          	return -x;
      	}
      }else{
          for(var i = 0; i < arguments.length; i++){
          	console.log(arguments[i]);
      	}
        throw 'Elements Over';
      }    
  }
  

  arguments包含所有的参数，ES6引入的新特性rest，可以获取除了已经定义的参数之外的所有参数

  function aaa(a,b,...rest){
      console.log(a);
      console.log(b);
      //rest参数只能写在最后面，必须用...标识，用来接收多余的参数
      console.log(rest);
  }
  

• 变量的作用域

  • 函数体内声明的变量，函数体外不可以使用（如果非要使用，可以研究一下闭包）

  function a(){
      var x = 1;
      x = x + 1;
  }
  x = x + 2; //Uncaught ReferenceError : x is not defined
  

  • 如果两个函数使用相同的函数名，只要在函数内部就不冲突

  function a(){
      var x = 1;
      x = x + 1;
  }
  function b(){
      var x = 'a';
      x = x + 1;
  }
  

  • 内部函数可以访问外部函数的成员，反之则不行

  function a(){
      var x = 1;
      function b(){
          var y = x + 1; //2
      }
      var z = y + 1; //Uncaught ReferenceError : y is not defined
  }
  

  • 函数查找变量从自身开始由内向外找，若外部存在同名的函数变量，则内部函数会屏蔽外部函数变量

  function a(){
      var x = 1;
      function b(){
          var x = 'a';
          console.log(x); //a
      }
      console.log(x); //1
      b();
  }
  

  • 全局变量window

  var x = 'xxx';
  alert(x);
  window.alert(x); //默认所有的全局变量都会自动绑定在window对象下
  

  • alert()函数本身也是一个window变量

  var x = 'xxx';
  window.alert(x);
  
  var old_alert = window.alert;
  
  window.alert = function(){
      
  }
  //alert失效了
  window.alert(123);
  
  //恢复alert
  window.alert = old_alert;
  window.alert(456);
  

  规范

  由于所有的全局变量都绑定在window上，如果不同的js文件使用了相同的全局变量，会引起冲突

  解决方法：把自己的代码全部放进自己定义的唯一空间名字中，降低全局命名冲突问题

  //定义一个代替window的变量
  var LiApp = {};
  
  //定义全局变量
  LiAPP.name = 'aaa';
  LiAPP.add = function(a,b){
      return a+b;
  }
  

  • 局部作用域let

  function aaa(){
      for(var i = 0; i < 100; i++){
          console.log(i);
      }
      console.log(i+1); //可以打印出来
  }
  

  ES6 let关键字解决了局部作用域冲突问题

  function aaa(){
      for(let i = 0; i < 100; i++){
          console.log(i);
      }
      console.log(i+1); //Uncaught ReferenceError : i is not defined
  }
  

  • 常量const：只读变量

    • ES6之前全部用大写字母命名的变量就是常量

    var PI = '3.14';
    console.log(PI);
    PI = '123'; //可以改变
    console.log(PI);
    

    • ES6之后引入关键字const

    const PI = '3.14';
    console.log(PI);
    PI = '123'; //无法改变，会报错
    console.log(PI);
    

• 方法

  • 方法就是把函数放在对象里面，对象里面只有两个东西：属性和方法

  var app = {
      name : 'aaa',
      birth : 1998,
      //方法
      age :function(){
          //今年 - 出生年
          var now = new Date().getFullYear();
          return now - this.birth;
      }
  }
  
  //属性
  app.name
  //方法,要带()
  app.age()
  

  • this是默认指向调用它的那个对象

  function getAge(){
      //今年 - 出生年
      var now = new Date().getFullYear();
      return now - this.birth;
  }
  var app = {
      name : 'aaa',
      birth : 1998,
      //方法
      age :getAge
  }
  
  //app.age(); 没问题
  //getAge(); NaN window中没有this.birth
  

  • apply：在js中可以控制this的指向

  function getAge(){
      //今年 - 出生年
      var now = new Date().getFullYear();
      return now - this.birth;
  }
  var app = {
      name : 'aaa',
      birth : 1998,
      //方法
      age :getAge
  }
  getAge().apply(app,[]); //this指向了app，参数为空