JavaScript笔记-3

函数

返回值

• return关键字会立即结束函数并返回一个特定的值
• 没有明确指定return，将会返回undefined

引用调用

• 引用

  函数名后没有圆括号，仅仅是引用这个函数

  • 可以吧一个函数赋值给一个变量、一个对象的属性，添加到数组里面

    function getStr(){...}
    
    //赋值给变量
    const f = getStr ;
    f() ;   //执行getStr()
    
    //赋值给一个对象的属性
    const obj = {} ;
    obj.f = getStr ;
    obj.f() ;   //执行getStr()
    
    //添加到数组里
    const arr = [] ;
    arr[0] = getStr ;
    arr[0]() ;  //执行getStr()
    

• 调用

  函数名后面有圆括号，调用它，并执行函数体

函数参数

• 参数：函数调用结束后就不再存在的变量

• 形参

  在函数中给形参赋值，不会影响函数外相同名字的变量。

  let a = 'abc';
  
  function fun(a) {
    
    console.log(`函数内修改前，a=${a}`);
    //函数内修改变量a的值
    a = 'xyz';  
    console.log(`函数内修改后，a=${a}`);
    
  }
  
  console.log(`调用函数前，a=${a}`); //"函数内修改后，a=xyz"
  
  fun(a); //"调用函数前，a=abc"
                //"函数内修改前，a=abc"
  
  console.log(`调用函数后，a=${a}`); //"调用函数后，a=abc"
  

但是会影响一个对象类型的变量

const obj = {} ; 

function fun(obj){
  
  obj.number = 1 ;
  obj.color = 'blue' ;
  
  //下面这段是为了证明函数内obj和函数外的obj完全不同
  //并非是代码第1行，const声明obj的原因
  //此处是一个全新的、独立的对象，有别于函数外obj
  obj = {date: 'sun'} ;
  
}

fun(obj) ;//调用函数

obj;  //{number:1, color:'blue'}
obj.date; //undefined

• 实参：形参被赋值后变成实参

解构参数

• 解构赋值中，参数属性名必须是字符串标识符

• 传入对象不存在与参数属性名相匹配的，该属性将接受一个undefined值

  function fun ({$, a, b, c, x}){
              console.log(`${$+a+b+c+x}`) ;
          }
  
  const obj = {
    $: '你好' ,
    a: 'hello ' ,
    b: ' world ' ,
    c: ' !' ,
    d: '*#~'
  }
  fun(obj) ;    //"你好hello  world  !undefined"
  

• 可以解构数组

• 可以使用…展开操作符收集多出来的参数，但必须是最后一参数前使用。

  function fun([name, age, ... last]){
              console.log(`${name} is ${age}'s old .`) ;
              console.log(last) ;
          }
  
  const arr = [
    'Tom' ,
    34 ,
    'red' ,
    'USA'
  ] ;
  
  fun(arr) ;  // Tom is 34's old .
                        // ["red", "USA"]
  

默认参数(ES6)

• ES6新特性，可以指定参数的默认值

  function fun(a = 998, b = 'hello', c = false) {
              console.log(`a is ${typeof a}, and a=${a}`);
              console.log(`b is ${typeof b}, and b=${b}`);
              console.log(`c is ${typeof c}, and c=${c}`);
          }
  
  fun(1, 'duang!', {});//a is number, and a=1
                       // b is string, and b=duang!
                       // c is object, and c=[object Object]
  
  
  fun(1, 'duang!');// a is number, and a=1
                   // b is string, and b=duang!
                   // c is boolean, and c=false
  
  
  fun(1);// a is number, and a=1
         // b is string, and b=hello
         // c is boolean, and c=false
  
  
  fun();// a is number, and a=998
        // b is string, and b=hello
        // c is boolean, and c=false
  

函数作为对象属性

通常称为方法，从而和一般函数区分开来

//初始化的时候添加方法
const obj = {
  fun : function(){return 0 ;} 
};

//ES6新的快捷语法
const obj = {
  fun(){return 0 ;}
};

this关键字

• 通常与面相对象变成一起出现

• 通常关联作为对象属性的函数，方法被调用是，this就是被调用的对象

  const obj = {
    color: 'green' ,
    
    getColor(){
      console.log(this.color) ;
    }
    
  };
  
  obj.getColor() ;//green
  

• this是由方法如何被调用决定的，而非函数定义所决定。

  //继续上一段obj代码
  const a ={
    color: '这里是a的color' ,
  }
  
  a.getColor = obj.getColor ;
  
  a.getColor() ;//这里是a的color
  

• 嵌套函数中访问this，为了避免错误，将this赋值给一个变量

  const obj = {
    
        number : 100 ,
        getNumber(){
              //将this赋值给一个变量。
              let self = this ;
  
              function count(){
  
                    return self.number - 1 ;
  
              }
  
              console.log(`${obj.number}-1=${count()}`) ;
        }
    
  };
  
  obj.getNumber() ;
  

匿名函数和函数表达式

把一个具名的函数赋值给一个变量，变量名具有较高优先级.

箭头符号(ES6)

简化语法，适用于创建或传递一个匿名函数时使用

• 可以省略function这个单词

• 函数只有一个参数，可以省略括号

• 函数体是一个单独的表达式，可以省略花括号和返回语句

  const a = num => console.log(num) ;
  
  const fun = () => console.log('hello') ;
  

• 区别

  • this是跟语句绑定的

    const obj = {
        name: 'Tom' ,
        fun1: function(){
    
            function newName(){
                this.name = 'Bob' ;        
            }
    
            newName();
        }   
    };
    
    obj.fun1() ;
    console.log(obj.name) ;//Tom
    
    //箭头函数
    const obj = {
        name: 'Tom' ,
        fun1: function(){
          
            const newName = () => {
                  this.name = 'Bob' ;
            }
            
            newName();
       }
     
    };
    
    obj.fun1() ;
    console.log(obj.name) ;//Bob
    

• 不能当做对象构造器

• 指定的参数在箭头函数中不生效

调用、请求和绑定

• .call()方法允许使用指定的this来调用函数，所有函数都可以使用

  .call(想要绑定的值, 调用函数的参数1，调用函数的参数2)

  const a = {string: 'hello'} ;
  function fun1(){
      console.log(this.string) ;
  }
  fun1.call(a) ;//hello
  
  function fun2(name, birthYear){
      this.name = name ;
      this.birthYear = birthYear ;
      console.log(this) ;
  }
  fun2.call(a, 'Tom', '1998') ;//{string: "hello", name: "Tom", birthYear: "1998"}
  

• .apply()方法与call方法基本一致，不同的是以数组得方法获取参数，经典例子就是求数组最大最小值

  //承接上段代码的 a , fun2() ;
  const arr = ['SB', '2046'] ;
  fun2.apply(a, arr) ;//{string: "hello", name: "SB", birthYear: "2046"}
  
  //求数组最大，最小值
  const numbers = [2, 3, 13, 343, 0, 34, 3] ;
  let maxNum = Math.max.apply(null, numbers) ;//343
  let minNum = Math.min.apply(null, numbers) ;//0
  

• 通过ES6展开操作符(…)，可以实现apply同样的功能

  //承接上段代码
  fun2.call(a,...arr) ;//等价于fun2.apply(a,arr) ;
  maxNum = Math.max(...numbers) ;//不关心this,可直接用展开操作符条用函数
  minNum = Math.min(...numbers) ;
  

• .bind方法可以给函数永久的绑定this值

  调用bind方法也可以传参数

  const obj1 = {name: '坎巴拉'},
        obj2 = {name: '巴啦啦'};
  
  function more(age, hobby) {
      this.age = age;
      this.hobby = hobby;
      console.log(this) ;
  }
  
  const a = more.bind(obj1) ;//绑定
  a(18, 'rocket') ;//{name: "坎巴拉", age: 18, hobby: "rocket"}
  a.call(obj2, 500, 'magic') ;//{name: "坎巴拉", age: 500, hobby: "magic"}
  
  const b = more.bind(obj2,1000000);
  b(99999, 'skr');//{name: "巴啦啦", age: 1000000, hobby: 99999}
  b.call(obj1, 7777, 'e-game');//{name: "巴啦啦", age: 1000000, hobby: 7777}