JS进阶基础2-箭头函数 闭包 函数柯里化

1, 箭头函数

1.this对象不适用于箭头函数

2.arguments 对象不适用于箭头函数

3.不能使用new 关键词来调用箭头函数

// //传统函数
// function test1(){
//   //执行代码内容
// }
// test1();
// //函数表达式
// const test2=function(){
//   //执行代码
// };
// test2();
//箭头函数
const test3 =(b)=>{
  //执行代码
  console.log(b);
}
//简化箭头函数代码  参数为1 输出只有 1行的时候
// const test3= b=>console.log(b);

const test5=(a,b)=>console.log(a+b);
test5(1,2);

自执行箭头函数

(function(){console.log('自执行函数')})();  //自执行函数IIFE  ()();
//IIFE 修改成箭头函数
(()=>console.log('自执行箭头函数 '))();

箭头函数this 对象

// 传统函数 this对象  浏览器中 指向的是window
//this指向的是运行的时候调用函数的对象 
function test(A){
  // console.log(this) 
}
test();

//箭头函数  this是继承的外部的this
//

const test1 =()=>{
  console.log(this)
}
test1();

const obj={
  test(){
     console.log(this); //{ test: [Function: test] 
  },
}
obj.test();

const obj1={
  test:()=>{ 
    console.log(this);  // 浏览器中 指向的事window
  }
}

obj1.test();

arguments对象  伪数组对象

箭头函数中没有arguments对象 取而代之的 剩余运算符...

//arguments 对象 伪数组对象

// function test(){
//   // console.log(arguments);
// }
// test(1,2,3); //{ '0': 1, '1': 2, '2': 3 }

// const test1=()=>{
//   console.log(arguments);
// }
// test1(1,3); //arguments is not defined

//new 关键词
const test=()=>{
  console.log('1');
}
const obj=new test(); //test is not a constructor

箭头函数的语法特征(单个语法的变化)

单个参数省略圆括号单行语句省略return

为什么this在箭头函数中不起作用:

ES6中有Class关键词 来处理类,不需要箭头函数来作为类进行使用

2闭包

闭包工作原理:当一个函数位于另一个函数内部的时候,就会创建一个闭包,

作用:1 记住外部变量,

2, 让这些变量的值始终保持在JS内存中。

// function outer(){
//   function inner(){
//     console.log('inner called');
//   }
// }
// inner();//inner is not defined

function outer(){
  function inner(){ //作用范围只在outer 作用域
    console.log('inner called');
  }
  inner();
}
outer();//inner called
function outer(){
  function inner(){ 
    console.log('inner called');
  }
  return inner;
}
const callInner=outer();
callInner(); //设定为一个函数表达式写法
//类似于
// const callInner=function inner(){}

箭头函数表达


 let counter=0;
const addCounter=()=>{

  counter++;
  return counter;
};

console.log(addCounter());//1
console.log(addCounter());//2
console.log(addCounter());//3

//利用闭包特征实现counter 私有性

const addCounter1=()=>{
  let counter=0;
  return ()=>{
    counter++;
    return counter;
  };
};

const callIner=addCounter1();
console.log(callIner());//1
console.log(callIner());//2

console.log(callIner());//3



闭包的优缺点:

JS进阶基础2-箭头函数 闭包 函数柯里化_第1张图片

 

函数柯里化 (Function currying)

部分求职 柯里化函数首先接收一些函数 不会立即参与求值而是将它保存在闭包中 并返回一个函数,在需要求职时 会将存在闭包的变量拿出来求值

// sum(5,6)
//sum(5)(6) //11
const sum=function(a){
  return function(b){
    return a+b;
  };
};
// const callIner=sum(5);
// const answer=callIner(6);
// 
 const answer1= sum(5)(6);

 console.log(answer1);

 //es6写法
 const sum1 =a=>{
   return b=>a+b;
 };
 console.log(sum1(5)(6))

柯里化应用

//计算折扣价格
//计算折扣价格

const PriceCalc =(price)=>{
  return (dper)=>{
    return price*dper;
  };
};

//产品价格保持不变的 变化的是折扣比列
const discountAmount=PriceCalc(300);
console.log(discountAmount(0.5));

console.log(discountAmount(0.8));

柯里化作用:柯里化过程是逐步传参,逐步缩小函数的适用范围,逐步求解的过程,

延迟计算,参数复用,动态创建函数

你可能感兴趣的:(JS进阶,javascript)