JS中的this到底指什么?
this指向其实并不复杂,很多面试中也是算一个基础,说难不是很难,但说简单,也不是特别的简单,掌握着4步,this指向不用愁
1.两个概念,了解4中this指向的绑定规则
1.1两个概念
this指向只有在函数调用的时候,才会确定,才有意义
第一个概念:谁调用,this指向谁
第二个概念:立即执行函数,this永远指向window
1.2this指向的4种绑定规则
this的绑定永远逃离不了这四种规则,掌握4中规则,走遍天下面试this都不怕。首先看下4种绑定的规则:
【默认绑定】【隐藏绑定】【显示绑定】【new实例化】
1.2.1 默认绑定规则
默认this指向window,在全局函数里也是指向window
<script>
//默认绑定规则
//第一种情况
console.log(this)
// console.log(this === window)
// 函数种this也是指向window 因为aaa就是绑定在window下的 符合1.1的概念
function aaa (){
console.log(this)
}
aaa()
</script>
1.2.2 隐藏绑定
顾明思议,隐藏绑定就是函数执行时,产生自己的this,并指向某一个对象。也符合1.1的概念,举个例子
// 隐藏绑定
var obj = {
wang:"awesome",
foo:function(){
console.log(this)
}
}
obj.foo() //bobj
在对象里的立即调用函数,this指向谁呢?
var obj = {
wang:"awesome",
foo:function(){
// console.log(this)
function foo2 (){
console.log("foo2's this " + this)
}
foo2()
}
}
obj.foo() //window
指向window ,因为他符合1.1的第二个概念,毋庸置疑,肯定是window
也可以这样写
<script>
// 隐藏绑定
var obj = {
wang:"awesome",
foo:function(){
// console.log(this)
(function (){
console.log(this)
})()
}
}
obj.foo() //window
</script>
1.2.3 显示绑定 (call applay bind)
// 显示隐藏
var obj = {
wang:"awesome",
foo:function(){
console.log(this)
}
}
var obj2 ={
wang:"cool",
foo:function(){
console.log(this)
}
}
obj.foo.call(obj2) // obj2
obj2.foo.call(obj) //0bj1
1.2.3 new关键词绑定
<script>
function Foo (obj){
this.a = obj.a
this.b = obj.b
}
let obj = {
a:"wang",
b:"awesome"
}
let obj2 = {
a:"wang2",
b:"acoll"
}
let foo1 = new Foo(obj)
let foo2 = new Foo(obj2)
console.log(foo1) // obj
console.log(foo2) // obj2
</script>
1.3留个小尾巴
下面这个a的this 是指向谁呢?
<script>
var obj = {
wang:"awesome",
foo:function(){
console.log(this)
}
}
var a = obj.foo
a()
</script>