js中关于this的指向和js原型的一些经验

原型总结：
对象原型的作用是，在对象内部查找不到属性时，对__proto__属性指向对象进行属性查找，直到找到Object.prototype为止。
对象原型链本质就是__proto__属性的链式指向。链式搜索到Object.protoType为止，因为Object.protoType这个对象的__proto__属性为null,通过原型链找到function属性函数被执行时，this指向原型链起始点对象。

this总结：
一、function
function的this指向是执行时确定的
3种执行方式
一是直接执行，this指向就是window，
二是对象属性执行，this就指向此对象(在原型对象中找到的属性函数 执行时this也是指向此对象)
三是new执行（创建新对象并执行函数），thiis指向new创建的新对象

//创建一个新函数输出this,a.a属性存了新函数对象堆内存地址
let a={a:function(){console.log(this)}}
//b也存了a.a的属性存的 新函数对象堆内存地址
let b=a.a
a.a.haha='objName'
//存的是同一个堆内存地址,取值为同一个函数对象
console.log(b==a.a,b.haha)
//执行，this指向不同
b();a.a()
VM2034:7 true 'objName'
VM2034:2 Window {window: Window, self: Window, document: document, name: '', location: Location, …}
VM2034:2 {a: ƒ}

function fun(){                                                   
    function fun2(){
        this.name2='setValue2ToWindow'
    }
    this.testFun=function(){
       this.name='setValueToWindow'
       //直接调用，那this指向就是window
       fun2()
    }
}
//一、直接调用，那this指向就是window
fun()
testFun()
console.log(window.name,name2)
===================================================================
setValueToWindow setValue2ToWindow
===================================================================
//二、对象属性调用，那this就指向此对象 obj对象
let obj={name:'objValue',attr:fun}
obj.attr()
console.log(obj)
obj.testFun()
console.log(obj)
===================================================================
{name: "objValue", attr: ƒ, testFun: ƒ}
{name: "setValueToWindow", attr: ƒ, testFun: ƒ}
===================================================================

二、箭头函数
箭头函数的this指向是创建时决定的（fuctionCode里的this是固定的在创建时就决定了[&d6]）

箭头函数this指向创建时最近的this，对象的属性箭头函数b在是在new componetA执行componetA函数给新对象设置b属性时创建的，由于是new操作触发的compoentA函数执行，那this指向的是一个新创建对象，那这个箭头函数b创建时最近的this就是compoentA函数this，箭头函数b执行时内部又创建了一个let fun箭头函数，离let fun箭头函数最近的this就是箭头函数b的this，那也是指向新创建的对象

这也是在写vue组件代码时，传事件回调函数时，使用function声明时this会丢失问题，而使用箭头函数正常指向组件对象，因为这些回调箭头函数都是在vue对象中的属性函数执行时创建的，那最近的this都是属性函数中的this，指向的不就是组件对象吗？

function componentA(){
    this.name='componentA'
    this.a=function(){
        function fun(){
            return(this.name+' from a this='+this)
        }
        console.log('a',this.name,fun(),this)
    }
    this.b=()=>{
        let fun=()=>{
            return(this.name+' from b this='+this)
        }
        console.log('b',this.name,fun(),this)
    }
}
let a=new componentA
a.a()
a.b()
==================
VM1625:7 a componentA  from a this=[object Window] componentA {name: 'componentA', a: ƒ, b: ƒ}
VM1625:8 b componentA componentA from b this=[object Object] componentA {name: 'componentA', a: ƒ, b: ƒ}

例2
箭头fun函数创建在控制台中，离箭头fun函数最近的this是window，fun中的所有this都是window

//this==window
let fun=()=>{                                                   
    function fun2(){
        this.name2='setValue2ToWindow'
    }
    this.testFun=function(){
       this.name='setValueToWindow'
       //直接调用，那this指向就是window
       fun2()
    }
}
//把箭头函数赋值给obj.attr,obj.attr与fun都指向一个函数对象所在的堆内存（&d1），都可以通过()调用函数对象的funtionCode
let obj={name:'objValue',attr:fun}
//执行箭头函数，给window设置一个testFun函数属性
obj.attr()
//window对象属性执行testFun函数（加不加window都一样）,testFun中的this指向window,设置window.name
console.log(window.testFun(),name)