原生JS中函数进阶

原生JS中函数进阶

​ 今天总结一下函数进阶操作，一共包括三个方面：函数的定义方式，函数的调用方式，this指向问题，改变this指向。

一，函数的定义方式

1.自定义函数（命名函数）

function fn(){
    console.log("我很帅");
}

2.函数表达式（匿名函数）

var fn = function(){
    console.log("好帅帅啊")
}

3.new function(“参数1”，“参数2”，“函数体”)

var fn = new Function("a","b","return a+b");//其中（）中写形参1，2……和函数体
fn(4,3);//传递实参

注意：所有的函数都是Function的实例，函数也是也是对象。

二.函数的调用方式

1.普通的函数调用

fn();//fn.call();   两种方式都行

2.对象的方法

var o = {
    fn(){
        console.log("我很帅");
    }
}
o.fn();

3.构造函数

function fn(){
    console.log("我很帅");
}
new fn();

4.绑定函数

var btn = document.querySelector("button");
btn.onclick = function fn() {
    console.log("我帅死了");   
}

5.定时器

setInterval(function fn() {
    console.log("nice");
}, 1000)

6.立即执行函数//自动调用

(function(){
    console.log("nice");
})()

三.this的指向问题（总的来说一般指向调用者）

这部分内容就简而言之。

1.普通的函数调用

普通函数的是全局作用域下的，this一般指向window。

2.对象的方法

this指向了对象

3.构造函数

this指向实例对象（原型函数也指向实例对象）

4.绑定函数

这里的this指向调用者

5.定时器

同普通函数一样，指向window。

6.立即执行函数

也指向window。

四.改变this指向

改变函数中this指向的方法有三种：call（），apply（），bind（）

①call()

function fn(a,b){
    console.log(a+b);
}
fn.call(o,1,2);//o是this改变后要指向的对象，其他的为实参

call()会调用函数且改变指向，最主要的是实现继承

②apply()

var arr = [13,423,63,24,8876,0,-2];
var a = Math.max.apply(Math,arr);//其中Math的位置可以填null（当不改变指向的时候），其他用法同call（）
console.log(a);

apply()能调用函数切改变指向，但参数必须为数组，同时会将数组改变为相应的字符串或一列数字。

③bind()

注意：bind()的返回值是一个函数，这个函数就是改变指向后的新函数，函数体不变。

function fn(a,b){
    console.log(a+b);
}
var f = fn.bind(o);//用法同call()

注意：这个不能调用函数。

主要应用场景

1.call经常做继承。

2.apply经常跟数组有关，比如借助数学对象实现数组最大值最小值。

3.bind不调用函数，但是还想改变this指向，比如改变定时器内部的this指向问题。