函数

返回值

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}

JavaScript笔记-3