根据函数内部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
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 指代该调用方法的对象
const obj ={ name:"海海", say:function(){ console.log(this); // {name:"海海"} } }
箭头函数中的this指向
箭头函数自己没有this
箭头函数的this是确定的，且不变
箭头函数中的this指向 创建这个箭头函数所在对象 的上下文
