this指向练习题

this指向

this，指向在面试的时候，困扰了好久，最近又重新整理了一下关于this 指向的概念，希望对你们有所帮助，首先我们先来一道简单的题目让我们走进this

var name='window'
var obj={
name:'obj',
fun:()=>{
console.log(this.name)
}
}

答案是是什么呢？obj 吗？还是window,答案我们在后面再揭晓，接下来我们就简单说一下this 指向的内容

1，在严格模式下，在全局打印this 的话是undefined，
2，在非严格模式下，在全局作用下打印this ,this 指向的是window,
3，this,遵循 的规则就是谁调用,就指谁，(对象内部方法中的this ,通过对象调用，就指向对象，函数自调用的话，this指向的就是window,构造函数this 指向实例对象)
4，箭头函数，箭头函数是没有自己的this的，箭头函数的this 指向是跟父级的指向一致的，箭头函数，call(),apply(),bind()，第一个参数对于箭头函数是无效的，不能改变箭头函数this 的指向
在函数调用的时候，JavaScript会默认给this绑定一个值，this的绑定和调用方式以及调用的位置关系，和定义的位置无关，this 是在运行的时候绑定的

通过上面总结的知识点，我们很容易就知道第一道题的答案很明显是指向window 的,打印的值应该是window.name=‘window’,下面我写几道题方便大家理解

this 指向练习题

var  a=1
var obj={
a:3,
fun:function(){
return ()=>{console.log(this.a)}
}}
obj.fun()()

答案是3 ,箭头函数和上级的指向相同，fun 的this 指指向的还是obj ,箭头函数也指向obj

var a=1
var obj={
a:3,
fun:()=>{
return function(){
console.log(this.a)
}
}
}
obj.fun()()

答案是1，箭头函数里面的函数是自调用，this 指向的是window

var name = 'window'                    
function Person(name) {                               
  this.name = name                                  
  this.foo1 = function () {                            
    console.log(this.name);                                   
  }                                                        
  this.foo2 = () => console.log(this.name);      
  this.foo3 = function () {
    return function () {
      console.log(this.name);
    }
  }
  this.foo4 = function () {
    return () => {
      console.log(this.name);
    }
  }
}
var person1 = new Person('person1') 
var person2 = new Person('person2')
person1.foo1()
person1.foo1.call(person2)
person1.foo2() 
person1.foo2.call(person2)
person1.foo3()() 
person1.foo3.call(person2)()
person1.foo3().call(person2)
person1.foo4()()
person1.foo4.call(person2)()
person1.foo4().call(person2)

答案是 person1,person2,person1,person1,window,window,person2,person1,person2,person1
person1={name:person1,foo1:f,foo2:f,foo3:f,foo4:f}
person2={name:person2,foo2:f,foo2:f,foo3:f,foo4:f}
person1.foo1()=>指向person1,person1
person1.foo1.call(person2)=>指向person2,person2
person1.foo2()=>指向person1,person1
person1.foo2.call(person2)=>call 无法改变箭头函数的指向，this指向person1,person1
person1.foo3()()=>foo3内部函数自调用指向window,window
person1.foo3.call(person2)()=>foo3指向person2内部函数自调用指向window,window
person1.foo3().call(person2)=>foo3内部函数指向person2,person2
person1.foo4()()=>foo4箭头函数和foo4一致,foo4指向的是person1,person1
person1.foo4.call(person2)()=>foo4指向person2,那么箭头函数也指向person2
person1.foo4().call(person2)=>箭头函数是不会受call影响的，所有还是指向person1

function Fun(){
this.a=2
this.b=[1,3,this.a]
this.c=2
this.show=function(){
console.log(this.a,this.b,this.c)
}
}
function Fn(){
this.a=3
this.change=function(){
this.b.push(this.a)
this.a=this.b.length
this.c=this.a++
}
}
Fn.prototype=new Fun
var child1=new Fn
var child2=new Fn
child1.a=10
child2.a=11
child1.show()
child2.show()
child1.change()
child2.change()
child1.show()
child2.show()

10,[1,3,2],2
11,[1,3,2],2
5,[1,3,2,10,11],4
6,[1,3,2,10,11],5
这道题是不是很迷惑，这里主要考查的比较多，构造函数，原型和this 指向
Fn.prototype={a:2,b:1,3,2,c:2,show:f]
child1={a:3,change:f} child1.a=10=>child1={a:10,change:f}
child2={a:3,change:f} child2.a=11=>child1={a:11,change:f}
child1.show()=>child1上没有show 方法，会在__proto__上找FN.prototype.show(),构造函数this 指向实例对象，实例对象是child1,所以this 指向的是child1,所以输出10，[1,3,2],2,同理child2 打印11,[1,3,2],2
child1.change()=>child1:{a:5,c:4,change:f},Fn,prototype:{a:2,b:[1,3,2,10],c:2,show:f}
child2.change()=>child2:{a:6,c:5,change:f},Fn,prototype:{a:2,b:[1,3,2,10,11],c:2,show:f}
所以最后child1.show=>5,[1,3,2,10,11],4,child2.show=>5,[1,3,2,10,11],5

new 关键字做了什么

new 关键字是创建构造函数实例的。那么在创建实例的过程中，new关键字做了什么呢？
1，创建一个新的空间，标记为构造函数的实例 //var obj={}
2，将空对象的原型，绑定构造函数的原型，obj.proto==Fn.prototype
3，函数内部的this,指向新创建的obj,并指向构造函数的函数体,相当于执行了一次call()，创建相关的属性和方法
4，判断是否返回了新对象，如果返回新对象，就用新对象的值，如果没有返回新对象或返回基本类型的值，就返回创建的对象

var A=function(){
tihs.name='张三'
return {}
}
var a=new A
console.log(a.neme)

undefined,返回的对象是{}，a={}

var A=function(){this.name='张三'; return 1}
var a=new A
console.log(a.name)

张三,返回的是基本类型，a={name:‘张三’}

var A=function(){this.name='张三'; return {name:'李四'}}
var a= new A
console.log(a.name)

李四，返回的是{name:‘李四’}

有关this 指向的就分享到此了，有兴趣的小伙伴可以留言讨论