JS高级-函数进阶

JS高级-函数进阶

1.函数的定义和调用

1.1函数的定义方式

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

//自定义函数(命名函数)
function fn(){}

2.函数表达式(匿名函数)

//函数表达式(匿名函数)
var fun=function(){}

3.new Function()

//利用 new Function('参数一','参数二','函数体')
var f=new Function('a','b','console.log(a+b)');
f(1,2);//3

• Function里面的参数必须是字符串的格式
• 所有的函数都是 Function 的实例(对象)
• 函数也属于对象
  

1.2函数的调用方式

1.普通函数

function fn(){
    console.log('11');
}
fn();
fn.call();

2.对象的方法

var obj={
    sayHi:function(){
        console.log('111');
    }
}
obj.sayHi();

3.构造函数

function Star(){ };
new Star();

4.绑定事件函数

//点击按钮触发函数
btn.onclick=function(){ };

5.定时器函数

setInterval(function(){ },1000);//定时器一秒触发一次

6.立即执行函数

(function(){
    console.log('zh');
})()

2.this

函数的不同调用方式决定了 this 的指向不同
1.普通函数

function fn(){
    console.log('普通函数的this'+this);
}
//fn() === window.fu()
fn();// this ===>window 

2.对象的方法

var obj={
    sayHi:function(){
        console.log('对象方法的this'+this);
    }
}
obj.sayHi();// this ===> obj

3.构造函数
构造函数this指向ldh这个实例对象 原型对象里面的this 指向的也是 ldh这个实例对象

function Star(){
    console.log('构造函数里面的this'+this)
};
Star.prototype.sing=function(){
    console.log('原型对象里面的this'+this)
}
var ldh = new Star();
ldh.sing();

4.绑定事件函数
绑定事件函数 this 指向的是函数的调用者 btn 这个按钮对象

var btn=doucment.querySelecter('button')
//点击按钮触发函数
btn.onclick=function(){
    console.log('绑定事件函数的this'+this)
};

5.定时器函数
定时器函数 this 指向的也是window

window.setInterval(function(){
    console.log('定时器的this'+this)
},1000);//定时器一秒触发一次

6.立即执行函数
立即执行函数 this 还是指向 window

(function(){
    console.log('立即执行函数的'+this);
})()

2.1 改变函数内部 this 指向

JavaScript 为我们提供了一些函数方法来帮我们更好的处理函数内部的this指向问题，常用的有 bind()、call()、apply()三种方法

1.call()方法
call()方法可以调用一个对象。简单的理解为调用函数的方式，但是它可以改变函数this的指向
语法：fun.call(thisArg,arg1,arg2…)

var o={
    name:'zh'
}
function fun(a,b){
    console.log(this);
    console.log(a+b)
}
fun.call(o,1,2);//3

call()的主要作用可以实现继承

function Father(name,age) {
    this.name=name;
    this.ahe=age;
}
function Son(name,age) {
    Father.call(this,name,age)
}
var son=new Son('zh',22);
console.log(son);

2.apply()方法
aooly()方法调用一个函数。简单理解为调用函数的方式，但是它可以改变函数的 this 指向
语法：fun.apply(thisArg,[argsArray])
thisArg:在fun函数运行时指定的 this 值
argArray:传递的值，必须包含在数组里面
返回值就是函数的返回值，因为它就是调用函数

var o={
    name:'zh'
}
function fn(){
    console.log(this);
    console.log(arr);
}
fn.apply(o,[22]);

apply()的主要应用可以借助数学对象来进行相应操作
就比如求数组最大值

var arr=[1,2,33,45,66];
var Max=Math.max.apply(Math,arr);
console.log(Max);//66

bind()方法
bind()方法不会调用，但同样会改变函数内部的this指向
语法：fun.bind(thisArg,arg1,arg2…)
thisArg:在fun函数运行时指定的this值
arg1,arg2:传递的其他参数
返回由指定的this值和初始化参数改造的原函数拷贝

var o={
    name:'zh'
}
function fn(a,b){
    console.log(this);
    console.log(a+b);
}
//由于返回的函数是改变this后的新函数 所以需要用一个值去接收
var f=fn.bind(o,1,2);
f();//3

bind()方法的应用
如果有的函数我们不需要立即调用，但是又想改变这个函数的this指向，此时就需要用到bind()

//需求 三个按钮 点击一个后变为不可点击 三秒后可点击
var btn=document.querySelectorAll('button');
for(var i=0;i<btn.length;i++){
    btnp[i].onclick=funection(){
        this.disabled=true;
        setTimeout(function(){
            this.disabled=fasle;
        }.bind(this),3000);
    }
}

2.2 call apply bind 总结

相同点：
都可以改变函数内部的 this 指向

区别点：
1.call和apply会调用函数，并且改变函数内部this指向
2.call和apply传递的参数不一样，call传递参数aru1,aru2…形式 apply 必须是数组形式 ===> [arg]
3.bind不会调用函数，可以改变函数内部this指向

主要应用场景：
1.call经常做继承
2.apply经常跟数组有关系，比如借助数学对象(Math)实现数组的最大最小值
3.bind不调用函数，但是还想改变this指向。比如改变定时器内部的this指向

3.严格模式

3.1什么是严格模式

JavaScript除了提供正常模式外，还提供了严格模式。ES5的严格模式是采用具有限制性的JavaScript变体的一种方式，即在严格的条件下运行JS代码。

3.2开启严格模式

严格模式可以应用到整个脚本或者个别函数中，因此在实际开发中，我们可以为脚本或者函数开启两种模式
1.为脚本开启严格模式
为整个脚本开启严格模式，需要在所有语句之前放一个特定语句 “use strict”;

//整个脚本文件开启严格模式
<script>
'use strict';
</script>

2.为函数开启严格模式

function fn(){
    'use strict';
}

3.3严格模式中的变化

1.变量规定
1.在正常情况下，如果一个变量没有声明就赋值，默认为全局变量，但是在严格模式种禁止使用这个方法，变量必须先声明才能使用

a=10;
consolg.log(a);

2.我们不能随便删除已经声明好的变量
2.严格模式下的this指向问题
1.以前的全局作用域中函数的this指向window对象
2.严格模式下的全局作用域中函数的this是undefined
3.以前构造函数不加new也可以调用，当普通函数，this指向window
4.严格模式下，如果构造函数不加new调用，this会报错，因为严格模式下我们的this是undefined
5.new 实例化的构造函数指向创建的对象实例
6.定时器this还是指向window
7.事件、对象还是指向调用者
2.函数变化
1.函数不能有重名的参数
2.函数必须声明在顶层，并且不允许在非函数语句内声明函数，只允许在函数内部声明函数

4.高阶函数

高阶函数是对其它函数进行操作的函数，它接收函数作为参数或者将函数作为返回值输出
函数也是一种数据类型，同样可以作为参数，传递给另一个参数使用。最典型的就是作为回调函数。
函数作为参数传递

//函数作为参数传递
function fn(a,b,callback){
    console.log(a+b);
    callback && callback();
}
fn(1,2,funciton(){
    console.log('我是最后执行');
})

函数作为返回值输出

function fn(){
    return function(){

    }
}
fn();

5.闭包

5.1变量作用域

变量根据作用域的不同分为两种：全局作用域和局部作用域
1.函数内部可以使用全局变量。
2.函数外部不可以使用局部变量。
3.当函数执行完毕，本作用域内的局部变量会销毁。

5.2什么是闭包

闭包是指有权访问另一个函数作用域中变量的函数。
简单理解为：一个作用域可以访问另外一个函数内部的局部变量
因此闭包也是一个函数
闭包的作用：延伸了变量的作用范围

function fn(){
    var num=10;
    function fun(){
        console.log(num);
    }
    fun();
}
fn();

5.3闭包案例

应用1：点击li输出当前li的索引号

<ul class="nav">
    <li>榴莲</li>
    <li>臭豆腐</li>
    <li>鲱鱼罐头</li>
    <li>大猪蹄子</li>
</ul>
<script>
var lis=document.querySelector('.nav').querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
    (function (i) {
        //在下面函数里面的i利用到了外层立即执行函数的里面的i
        //所以产生了闭包
        //立即执行函数也称为小闭包，因为立即执行函数里面的任
        //何一个函数都可以使用它的i这个变量
        lis[i].onclick=function(){
        console.log(i);
    }
    })(i)         
}
</script>

应用2：3秒之后打印所有li元素的内容

<ul class="nav">
    <li>榴莲</li>
    <li>臭豆腐</li>
    <li>鲱鱼罐头</li>
    <li>大猪蹄子</li>
</ul>
<script>
var lis=document.querySelector('.nav').querySelectorAll('li');
    for (var i = 0; i < lis.length; i++) {
        (function (i) {
            setTimeout(function(){
                console.log(lis[i].innerHTML);
            },3000)
        })(i)      
    }
</script>

应用3：计算打车价格
需求：打车起步价13(3公里)，之后每多一公里增加5块钱，用户输入公里数即可计算价格，如果有拥堵情况，总价格多收取10块拥堵费

var car=(function () {
var start=13;//起步价
var total=0;//总价
    return {
        //正常价格
        price:function(n){
            if(n<=3){
                total=start;
            }else{
                total=start + (n-3) * 5;
            }
            return total;
        },
        //拥堵价格
        yd:function(flag){
            return flag ? total +10 : total;
        }
    }
})()
console.log(car.price(5));//23
console.log(car.car.yd(true));//33

console.log(car.price(1));//13
console.log(car.yb(false));//13

6.递归

6.1什么是递归？

如果一个函数在内部可以调用其自身，那么这个函数就是递归函数。
简单理解为：函数内部自己调用自己，这个函数就是递归函数。
递归函数的作用和循环效果一样
由于递归很容易发生"栈溢出"错误，所以必须要加退出条件 return

6.2浅拷贝和深拷贝

1.浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用
2.深拷贝拷贝多层，每一级别的数据都会拷贝
浅拷贝

var obj={
    id:1,
    name:'zz'
};
var o={}
for (var k in obj) {
    //k 是属性名  obj[k]属性值
    o[k]=obj[k]            
}
console.log(o);

在浅拷贝中，如果遇到对象级别更深层次的拷贝内容，只是将他的地址拷贝给了新对象
Object.assing()
在我们的ES6中有一个新的语法可以供我们进行浅拷贝
语法：Object.assing(拷贝给谁，拷贝哪个对象)

var obj={
    id:1,
    name:'zz'
};
var o={};
Object.assign(o,obj);
console.log(o);

深拷贝

var obj={
    id:1,
    name:'zz',
    msg:{
        age:22
    },
    color:['red','pink']
};
var o={}
function deepCopy(newobj,oldobj) {
    for(var k in oldobj){
        //判断数据类型
        //1.获取属性值
        var item = oldobj[k];
        //2.判断是否是数组
        if (item instanceof Array) {
            newobj[k]=[];
            deepCopy(newobj[k],item)
        }else if(item instanceof Object){
        //3.判断这个值是否是对象
            newobj[k]={};
            deepCopy(newobj[k],item)
        }else{
        //4.属于简单数据类型
            newobj[k]=item;
        }
    }
}
deepCopy(o,obj);
console.log(o);