函数调用模式

如果一个函数不是一个对象的属性时，就是被当做一个函数来进行调用的。此时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(); // 指向window?
var p = new Person(); // this指向Person

上下文调用模式?

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

call

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

? const RichWumon = {
? ? ? name: "海海",
? ? ? say: function () {
? ? ? ? console.log(this.name, " 你好呀");
? ? ? }
? ? }

? ? const obj = {
? ? ? name: "小陈"
? ? }

? ? RichWumon.say();?? ??? ??? ?// 海海
? ? RichWumon.say.call(obj);?? ?// 小陈

call应用

将伪数组转成数组

? ? let divs = document.querySelectorAll('div');
? ? console.log(divs);

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

? ? }

apply

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

    const RichWumon = {
      name: "海海",
      say: function () {
        console.log(this.name, "你好呀");
      }
    }

    const obj = {
      name: "小陈"
    }

    RichWumon.say();			// 海海
    RichWumon.say.apply(obj);	// 小陈

apply应用

1.简化?console.log方法

?? ?// 简化log方法
? ? function log() {
? ? ? ? console.log.apply(console, arguments);
? ? }

bind方法

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

var name = '海海';
function Fn(){
    this.age = 18;
    
    console.log(this.name + this.age);
}

Fn();			// 海海 18

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

this的指向

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

console.log(this); // window

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

? ?function show(){
? ? ? console.log(this);? // window
? ? }

? ? show();

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

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

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