函数中的this指向与函数的调用形式有关
函数调用
普通函数调用
函数调用形式下,this永远这都是指向window
我们用一个例子来证明一下
function fn() {
console.log(this); // Window
function foo() {
console.log(this); // Window
}
foo()
}
fn()
// fn在全局下调用指向window
// 而foo在函数fn里面调用,也指向window
构造函数调用
function Person(name) {
this.name = name
console.log(this.name); // zs
}
const obj = new Person('zs');
// 函数作为构造函数时
// new关键字发挥其作用
// 首先创建了一个新的对象
// 然后让this指向该对象
// 并且让对象的__proto__ 指向函数的prototype
// 执行函数里的里的代码
// 最后返回这个新的实例对象
// 所以函数作为构造函数时,里面的this会指向创建的实例对象
// this指向构造出来的实例对象
方法调用
当函数作为对象的方法,进行调用时,this会指向这个对象
const obj = new Person('zs');
obj.set = function () {
console.log(this); // obj
}
obj.set()
事件函数也是一样,会指向触发该事件所绑定的对象
document.querySelector('button').onclick = function () {
console.log(this);
}
// this指向获取绑定该点击事件的节点对象
ES6中的箭头函数 this指向
准确来讲,箭头函数并没有 this , 要在箭头函数里使用 this ,那么它会指向该箭头函数在定义时的外层函数中的 this 。
const fn1 = () => {
console.log(this); // window
}
fn1()
// 这时候fn1中的this会指向window
function fn() {
let that = this
console.log(this); // window
const fn2 = () => {
console.log(this); // window
console.log(this === that); // true
}
fn2()
// 这时fn2中的this会指向fn中的this,也就是window
}
fn()
const obj = {
set: function () {
let that = this
console.log(this); // obj
const fn3 = () => {
console.log(this); // obj
console.log(this === that); // true
}
fn3()
// 这时fn2中的this会指向fn中的this,也就是obj
}
}
obj.set()
function foo1() {
console.log(this);
}
document.querySelector('button').onclick = foo1
// this指向获取绑定该点击事件的节点对象
const foo2 = () => {
console.log(this);
}
document.querySelector('button').onclick = foo2
// this依然指向 window 没有被改变
call 与 apply
call 与 apply 可以改变函数中this的指向
const obj = {
name: 'zs'
}
const set = function () {
console.log(this);
}
set.call(obj); // obj
set.apply(obj); // obj