注:在JavaScript中,this 是一个关键字,this永远指向函数的最终调用者。
this指向三个基本要素:
- this指向的永远只可能是对象;
- this指向谁,不取决于this写在哪,而是取决于函数在哪里调用;
- this指向的对象,称为函数的上下文(context),也叫函数的调用者
前端中的this指向详解:
1. 在全局作用域下,this始终指向全局对象window,无论是否是严格模式
// 在全局作用域下this指向
console.log(this); // this ==> window
window.console.log(this); // this ==> window
// console.log()完整的写法是window.console.log(), window可以省略
// window调用了console.log() 方法,所以此时this指向window。
2. 默认绑定
普通函数(包括匿名函数) 谁调用,this就指向谁,分为是否为严格模式。严格模式下,直接example()调用函数,this指向undefined,window.example()调用函数this指向window;非严格模式下,通过example()和window.example()调用函数对象,this都指向window。
// 严格模式下
function example() {
"use strict";
console.log(this);
}
example(); // this ==> undefined
window.example(); // this ==> window
//非严格模式
function example() {
console.log(this);
}
example(); // this ==> window
window.example(); // this ==> window
3. 箭头函数绑定
箭头函数中没有 this, 它会绑定最近的非箭头函数作用域中的this。首先从它的父级作用域找,如果父级作用域还是箭头函数,就再往上找,一层一层的直到直到this的指向。即箭头函数外如果还有一个函数包裹,那么这个this指向的就是外包裹函数。如果箭头函数外没有外包裹函数,那么this就指向window)
let example = () => {
console.log(this);
}
example(); // window
// 由于model函数是箭头函数,所以自身不能绑定this,因此找它的上一级作用域, this ==> window
4. 隐式绑定
通过 对象.函数名() 调用,this指向这个对象。如果存在链式调用, this 永远指向最后调用它的那个对象。隐式绑定丢失:起函数别名,通过别名运行;函数作为参数会造成隐式绑定丢失。
var obj = {
name: "小明",
skill: function () {
name: "小花";
console.log(this.name);
},
};
obj.skill(); // 小明
// 调用obj.skill()方法,返回值为小明,说明 this ==> obj
5. new绑定
构造函数(new关键字)调用,会生成一个新对象,并且把这个新对象绑定为调用函数的 this ,即 this 指向创建的实例。
function example(name, age) {
this.name = name;
this.age = age;
}
const a = new example("小花", 18);
console.log(a.name); // 小花
console.log(a.age); // 18
// this ==> 新new出的实例 a
6. 根据浏览器的调用机制,定时器和计时器中回调函数的 this
指向 window
setTimeout(function(){
console.log(this);
},2000)
//2s后打印出 window, 说明this ==> window
7. Vue中的this指向调用它的Vue实例
在Vue所有的生命周期钩子方法(如created,mounted, updated以及destroyed)里使用this,this指向调用它的Vue实例 ,即 new Vue() ---- 每一个点vue后缀的文件都是利用vue的构造函数模板创建的实例 / 新对象。
<html>
<button @click="click">点击</button>
<html>
<script>
export default {
data(){
return{
message: "你好!"
}
},
created: function() {
console.log(this) //在Vue所有的生命周期钩子方法里使用this,this指向使用它的Vue实例
this.showMessage1();
this.showMessage2();
this.showMessage3(); //vue实例(构造函数)调用了showMessage3方法(new绑定)
},
methods:{
showMessage3(){
console.log(this) //vue实例调用了showMessage3方法,this自然指向vue实例
},
showMessage1(){
setTimeout(function() {
console.log(this) //指向window 因为没人调用这个普通函数
}, 10)
},
showMessage2() {
setTimeout(() => {
console.log(this) //this指向vue实例
}, 10)
},
click() {
console.log(this) //<div id="box">click</div>
}
//在事件中绑定this,我们点击后可以发现,打印出来了dom元素,说明我们点击的是这个dom元素
}
}
</script>
修改this指向的三个方法(显式绑定)
1. call()方法
call 执行函数,并改变this指向为函数的第一个参数,可以传入多个参数。
let obj1 = {
name : '小明',
getName1 : function(a,b,c) {
console.log(`getName ${this.name}`);
console.log(`参数:${a},${b},${c}`);
}
}
let obj2 = {
name : '小花',
getName2 : function() {
console.log(`getName ${this.name}`);
}
}
obj1.getName1(1,2,3) // getName 小明 参数:1,2,3
// 在这里this指向改变为了传入的第一个参数obj2,this已经指向了obj2
obj1.getName1.call(obj2,1,2,3) // getName 小花 参数:1,2,3
2. apply()方法
apply() 跟 call() 一样,执行函数并改变this指向为函数的第一个参数,但apply 只能传入两个参数,第二个参数只能是数组的形式。
let obj1 = {
name : '小明',
getName1 : function(a,b,c) {
console.log(`getName ${this.name}`);
console.log(`参数:${a},${b},${c}`);
}
}
let obj2 = {
name : '小花',
getName2 : function() {
console.log(`getName ${this.name}`);
}
}
obj1.getName1.apply(obj2,[1,2,3]) // getName 小花 参数:1,2,3
3. bind()方法
bind 改变this指向为第一个参数,也可以传入多个参数,但是不会自动执行函数,返回一个新的函数,需要手动执行才行。
let obj1 = {
name : '小明',
getName1 : function(a,b,c) {
console.log(`getName ${this.name}`);
console.log(`参数:${a},${b},${c}`);
}
}
let obj2 = {
name : '小花',
getName2 : function() {
console.log(`getName ${this.name}`);
}
}
let example = obj1.getName1.bind(obj2,1,2,3)
example() // getName davis 参数:1,2,3