JavaScript高级【函数的4种调用方式-箭头函数】

this与函数的四种调用模式

根据函数内部this的指向不同，可以将函数的调用模式分成4种

1. 函数调用模式
2. 方法调用模式
3. 构造函数调用模式
4. 上下文调用模式（借用方法模式）

函数调用模式

如果一个函数不是一个对象的属性时，就是被当做一个函数来进行调用的。此时this指向了window

function fn(){
  console.log(this);// 指向window 
}
fn();

方法调用模式

当一个函数被保存为对象的一个属性时，我们称之为一个方法。当一个方法被调用时，this被绑定到当前对象

const obj = {
  sayHi:function(){
    console.log(this);//在方法调用模式中，this指向调用当前方法的对象。
  }
}
obj.sayHi();

构造函数调用模式

如果函数是通过new关键字进行调用的，此时this被绑定到创建出来的新对象上。

function Person(){
  console.log(this);
}
Person();//this指向什么？
var p = new Person();//this指向什么？

方法借用模式

也叫上下文模式,分为 apply 与 call，bind

call

call方法可以调用一个函数，并且可以指定这个函数的this指向

const RichWumon = {
    name: "富婆",
    say: function () {
        console.log(this.name, " 我要重金求子");
    }
}

const obj = {
    name: "屌丝"
}

RichWumon.say();			// 富婆
RichWumon.say.call(obj);	// 屌丝

call应用

1. 将伪数组转成数组

let divs = document.querySelectorAll('div'); // 伪数组
// let divs = document.body.children;
console.log(divs);

function change(nodelist) {
    console.log(Object.prototype.toString.call(nodelist));
    return Array.prototype.slice.call(nodelist);

}

apply

就是apply()方法接受的是一个包含多个参数的数组。而call()方法接受的是若干个参数的列表

可以利用apply 将 刚才的call 的代码修改一下

const RichWumon = {
    name: "富婆",
    say: function () {
        console.log(this.name, " 我要重金求子");
    }
}

const obj = {
    name: "屌丝"
}

RichWumon.say();			// 富婆
RichWumon.say.apply(obj);	// 屌丝

apply应用

1.简化log方法

// 简化log方法
function log() {
    // 不需要改变this
    console.log.apply(console, arguments);
}

bind方法

**bind()**方法创建一个新的函数, 可以绑定新的函数的this指向

var name = '张三';
function Fn(){
    this.age = 1;
    
    console.log(this.name + this.age);
}

Fn();			// 张三 1

// 返回值：新的函数
// 参数：新函数的this指向，当绑定了新函数的this指向后，无论使用何种调用模式，this都不会改变。
let obj = {
    name:'小强',
}
const newFn = Fn.bind(obj);
newFn();		// 小强 1

this的指向

• 单独使用，this 指向全局对象

  console.log(this); 
  

• 函数中的 this 指向全局对象

  function show(){
      console.log(this); 
  }
  
  show();
  

• 在函数内部，this 的指向在函数定义的时候是不能确定的，只有函数执行的时候才能确定

  const a = 18;
  const obj = {
      a: 19,
      b: {
          a: 20,
          c: function () {
              console.log(this.a); 	// 20
          }
      }
  }
  obj.b.c();
  

• 在方法中，this 指代该调用方法的对象

  const obj ={
  	name:"小白",
  	say:function(){
  		console.log(this);		
  	}
  }
  obj.say()
  

9.箭头函数

格式–定义语法

// 箭头函数是匿名函数，一般做为参数传递
// let test = function (a,b){
//     let sum = a + b 
//     return sum
// }
// let test = (参数) => {函数体}
// 几个小细节
// 1.如果函数体只有一句，那么可以省略{},同时默认会返回函数体的结果，不能写return
// 2.如果只有一个参数，那么可以省略()
// 3.如果没有参数，()也不能省略
// let test = (a,b) =>  a + b 
let test = a =>  a + 10 

let res = test(100)
console.log(res)

特性

// 箭头函数的this是确定的，况且永远不变
// 箭头函数中的this指向  创建这个箭头函数所在对象  的上下文
let obj = {
    name: 'jack',
    say: function () {
        return () => {
            console.log(this) // obj
        }
    }
}
let fn = obj.say()
fn() // obj

let newobj = {}
newobj.fun = fn
newobj.fun() // obj

let rose = {
    name: 'rose'
}

fn.call(rose) // obj