JavaScript 进阶第六章（this与函数的调用模式）

Posted 2021-09-14 海海呐

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 进阶第六章（this与函数的调用模式）相关的知识，希望对你有一定的参考价值。

根据函数内部this的指向不同，可以将函数的调用模式分成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(); // 指向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