原生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指向问题。