【前端三剑客之JavaScript】函数及其this指向

一、函数定义方式:

(1) 自定义（命名）函数 ——> function fn() {} ;

(2) （匿名）函数表达式 ——> var fun = function () {} ;

(3) new Function(‘参数1’，‘参数2’，‘函数体’)

var f = new Function('a','b','console.log(a+b)') ;
f(1,2);

函数也属于对象；

所有函数都是Function函数的实例对象；

Function里面的参数必须是字符串格式；

函数第三种定义方式的执行效率低且不便使用，故较少使用；

二、函数的调用

(1)普通函数调用：fn()、fn.call() 【this指向window】

(2)对象的方法调用：【this指向对象o】

var o = {
    sayHi: function(){
        console,log('Hi');
    }
}
o.sayHi;

(3)构造函数调用：【this指向x，原型对象里的this指向也是x这个实例对象】

function Star(){};
Star.prototype.sing = function(){
    
}
var x = new Star();

(4)绑定事件函数：btn.onclick = function () {} ;【this指向函数调用者btn】

(5)定时器函数：setInterval(function(){},1000)【this指向window】

(6)立即执行函数(自动调用)【this指向window】

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

三、改变函数内部this指向

（1）call():

可以调用函数；

可以改变函数内部的this指向；

var o = {
    name:'Bob'
}
function fn (a,b){
	console.log(this);
    console.log(a+b);
}
fn.call(0,1,2);

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

function Fatherfunction(uname,age,sex){
    this.uname = uname;
    this.age = age;
    this.sex = sex;
}
function Sonfunction(uname,age,sex){
	Father.call(this,uname,age,sex);
}
var son = new Son('ldh',18,'男')；
console.log(son);

(2)apply方法：

可以调用函数；

可以改变函数内部的this指向；

参数必须是数字（伪数组）；

var o = {
    name:'Bob'
}
function fn (arr){
	console.log(this);
    console.log(arr);//'pink'
}
fn.apply(0,['pink']);

主要应用：借助数学内置对象求最值

var arr = [1,3,5,6,78,44];
var max = Math.max.apply(Math,arr);
var min = Math.min.apply(Math,arr);
console.log(max,min);

(2)bind方法:

不调用函数；

可以改变函数内部的this指向；

返回的是原函数改变this之后产生的新函数；

var o = {
    name:'Bob'
}
function fn (a,b){
	console.log(this);
    console.log(a+b);
}
var f = fn.bind(0,1,2);
f()；

若不需要立即调用函数，但是又想改变函数内部的this指向则使用bind方法！(that=this——>function().bind(this))