this关键字

1.概述

每一个函数内部都有一个关键字是 this

可以让我们直接使用的

重点： 函数内部的 this 只和函数的调用方式有关系，和函数的定义方式没有关系

谁调用了这个函数,那么this就指向谁 (this指向函数的调用者)

2.this的指向

this位置	指向
普通函数中的this	指向 window
定时器中的this	指向 window
自执行（自调用）函数中的this	指向 window
全局的this	指向 window
自定义对象的方法中的this	指向 对象本身
事件处理函数中的this	指向 事件源

// 普通函数中的this 指向 window
function abc(){
    console.log(this);  // window
}
abc();


// 自定义对象的方法中的this 指向 对象本身
var o = {
    name: '李汉纸',
    age: 22
}

var obj = {
    name: '李妹纸',
    age: 18,
    sex: '男',
    hello: function(){
        console.log(this);   // obj对象
        console.log(this.name);  // '李妹纸'
    }
}
obj.hello();


// 事件处理函数中的this 指向 事件源
document.querySelector('#box').onclick = function(){
    console.log(this);   // 事件源：<div id="box" style="width: 100px;height: 100px;background: orange;"></div>

    // 定时器中的this 指向 window，不论身处任何环境下都指向window
    setTimeout(function(){
        console.log(this);  // window
    },500);
}


// 定时器中的this 指向 window
setTimeout(function(){
    console.log(this);  // window
},500);


// 自执行（自调用）函数中的this 指向 window
(function(){
    console.log(this);  // window
})()


// 全局的this 指向 window
console.log(this);  // window

3.改变this的指向

注意：箭头函数不能通过call、apply、bind改变this指向

3.1 call()

作用：附加在函数调用后面使用，可以忽略函数本身的 this 指向

参数：

• 第一个参数，this重新指向的对象
• 第二个参数开始向后的每一个参数依次是函数的实参

会立即执行函数

var obj = {
	name: 'xiazhi',
	age: 18,
	sex: '男'
}

function fn1(a,b,c){    
	console.log(this);              // obj
	console.log(this.name);         // xiazhi
	console.log(a,b,c)      		// 11,22,33     
}

fn1.call(obj,11,22,33);

3.2 apply()

参数：

• 第一个参数，this重新指向的对象

• 第二个参数是一个数组，数组的每一项依次是函数的实参

注意：会立即执行函数

const obj={
    name:'xiazhi'
}

function fn(a,b,c){
    console.log(this)       // obj
    console.log(this.name)  // xiazhi
    console.log(a,b,c)      // 11,22,33
}

fn.apply(obj,[11,22,33])

3.3 bind()

是附加在函数调用后面使用，可以忽略函数本身的 this 指向

和call/apply有一些不一样，就是不会立即执行函数，而是返回一个已经改变了this指向的函数

参数：

1. 第一个参数，被改变的this指向的对象
2. 第二个参数开始向后的每一个参数 依次 是函数的实参

const obj={
    name:'xiazhi'
}

function fn(a,b,c){
    console.log(this)       // obj
    console.log(this.name)  // xiazhi
    console.log(a,b,c)      // 11,22,33
}
const fn1=fn.bind(obj,11,22,33)

fn1()

注意：此方法比较少用，主要的应用点为 改变定时器 或 事件处理函数 的this指向使用

3.4 call  apply  bind 方法

如果函数需要被立即执行，则使用 call 和 apply

如果 函数不需要被立即执行，而只是 需要改变一下this指向，等待被调用 则 使用 bind