JavaScript函数进阶-调用方式,内部this指向,高阶函数,闭包

1.函数的定义和调用

  1. 函数的声明方式:function 关键字(命名函数)

function fn(){}

  1. 函数表达式;匿名函数

var fun=function(){}

  1. new function (“参数1”,“参数2”,“函数体")
  2. 所有的函数都是function的实例

2.函数的调用方式

  1. 普通函数

//1.普通函数
function fn() {
console.log(111);
}
fn();

  1. 对象方法

//2.对象方法调用函数
var o = {
sayhi: function() {
console.log(22);
}
}
o.sayhi();

  1. 构造函数

function Star() {
console.log(33);
};
new Star();

  1. 绑定事件函数

var btn = document.querySelector(“button”);
btn.addEventListener(“click”, function() {
console.log(44);
})

  1. 定时器函数

//5.定时器函数,事件到了就被调用
setInterval(function() {
console.log(55);
}, 1000);

  1. 立即执行函数

//6.立即执行函数
(function() {
console.log(66);
})();

3.this知识

1.函数里this的指向

调用方式this指向
普通函数window
构造函数实例对象,原型对象里的方法也指向实例对象
构造函数函数该方法所属对象
事件绑定函数绑定事件对象
定时器函数window
立即执行函数window

2.改变函数内部this指向

1.call()

  1. 可以调用函数和实现改变函数内部的this的指向
  2. 还可以实现继承
  3. fun.call(thisArg,arg1,arg2),thisArg是指在fun函数运行时指定的this值
//call()可以调用函数和改变函数内部this的指向
        function Father(uname, age) {
                    this.uname = uname;    
                     this.age = age;
       }
       function Son(uname, age) { 
          Father.call(this, uname, age);   
                       }      
       var son = new Son("刘德华", 28); 
       console.log(son);

2.apply()

  1. 可以调用函数和实现改变函数内部的this的指向
  2. fun.apply(thisArg,[argsArray])
  3. thisArg是指在fun函数运行时指定的this值
  4. [argsArray]是指传递的值必须包含在数组里
 var o = {       
      name: "ycq" 
             };
        function fn(arr) {
                    //普通函数指向的this的window            
                    // console.log(this);           
                     console.log(arr);        
                     }        
                     //这里就把this指向对象改成了o        
                     fn.apply(o, ["pink"]);        
                     var arr = [1, 51, 13, 136];        
                     //Math调用就是指向的math,传递的值就是arr        
                     var max = Math.max.apply(Math, arr);        
                     console.log(max);

3.bind()

  1. 不会调用函数,但能改变函数内部this指向
  2. fun.bind(thisArg,arg1,arg2,…),一般用var xx来接一下这个函数
  3. 返回用指定的this值和初始化参数改造的原函数拷贝
  4. 适用于有的函数不需要立即调用,但是又想改变函数内部的this指向
 <button>点击</button>    
 <script>       
  var o = {            
  name: "ycq"        
  };
        
        function fn(x, y) {            
        console.log(this);            
        console.log(x + y);       
         }        
         //不会调用函数,但是可以改变函数内部this的指向        
         var f = fn.bind(o, 1, 2);        
         f();
        //有一个按钮,当点击了之后就禁用,三秒之后在使用        
        var btn = document.querySelector("button");        
        btn.addEventListener("click", function() {            
        //点击事件里面的this指向的是btn绑定事件对象            
        this.disabled = true;            
        //定时器函数里面的this指向的是window            
        setTimeout(function() {                
        btn.disabled = false;           
         }, 3000);       
          })    
          </script>

4.严格模式

1、优点

  1. 消除了js语法中不合理的不严谨之处
  2. 消除了代码中不安全的地方

2.应用

  1. 整个脚本中:在的第一行添加上"use strict"
  2. 个别函数中:放在个别函数的第一行,函数内下边的代码严格执行严格模式,函数外的代码是普通模式执行

3.变化

1.变量规定

  1. 严格模式禁止使用一个变量没有声明就赋值,必须先用var赋值之后再使用
  2. 严格模式严禁用delete 变量删除已经指明的变量

2.严格模式下this指向的是undefined

  1. 严格模式下,若构造函数不加new调用,this指向undefined时会报错
  2. new实例化的构造函数指向创建的实例对象
  3. 严格模式下定时器里面的this仍然指向window
  4. 事件、对象里面的函数还是指向调用者

3.函数变化

  1. 不能有重名的参数
  2. 不允许在非函数的代码块声明函数 例如:for,if语句带有{}

5.高阶函数

  1. 高阶函数是指接受函数作为参数或者是将函数作为返回值输出
  2. 函数可以作为参数进行传递
  3. 函数也是一种数据类型,同样可以作为参数传递给另一个参数使用,最典型的就是作为回调函数

6.闭包

1.变量作用域

局部变量,函数执行完之后就会被销毁
全局变量

2.闭包

  1. 闭包是一个函数有权访问另一个函数作用域里面的变量(局部变量)
  2. 这个函数既如果是内部的,直接调用即可
  3. 如果是外部的,函数内返回return 函数;在函数外边用var xx=函数();即可
   <script>        
   function fn() {            
   var num = 10function fun() {                
                console.log(num);
            }            
            //这个是相当于内部的闭包            
            //fun();
            //外部的闭包是用return            
            return fun();        
            }        
            //内部的        
            //new fn();
        
        //外部的        
        var f = fn();   
         </script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值