JavaScript This的指向——

This的指向——

1.普通对象的this：谁调用我，我就指向谁1

2.构造函数的this：指向实例化对象

3.监听器中的this：指向的是事件源 （绑定事件的节点）

4.普通函数的this：指向的是window

5.箭头函数中的this：取决于所处环境（声明的环境） 箭头函数没有argument和this.

//普通对象的this
let obj = {
      name = `xxx`,
      age = 20,
      gender = `male`,
      say(){
         console.log(`hello, my name is ${this.name}, i'm ${this.age} years old, i'm ${this.gender}`);
      }
}
let obj1 = {
      name = `xx`,
      age = 22,
      gender = `female`,
}
obj1.say = obj.say;
obj1.say();//输出"hello, my name is xx, i'm 20 years old, i'm female


//构造函数中的this
function Obj(name,age,gender){
    this.name = name;
    this.age = age;
    this.gender = gender;
}
let obj2 = new Obj(`qwe`,28,`male`);
console.log(obj2.age)//28 

//事件监听器中的this
let divEle = document.getElementsByTagName("div")[0];
divEle.addEventListener("click",function(e){
      console.log(this.nodeName);//DIV
})

//普通函数的this
function normalFn(){
  this.temp = 0;//相当于在全局 var temp = 0;
  console.log(this);//window
 }


//箭头函数的this   根据声明的环境的this指向决定
divEle.addEventListener("click",function(e){
      let fn = (a) => console.log(this); //divEle 
})
function normalFn(){
  let fn1 = (a) => console.log(this); //window
 }
 obj.say=function (){
   let fn2 = (a) => console.log(this); //obj
 }

改变this的指向

call

​ 书写格式：stu1.say.call(stu2,参数234)

​ 参数1：对象 将this指向它

​ 参数234：参数 调用函数的实参

apply

​ 书写格式：stu1.say.call(stu2,[参数2，参数3，参数4])

​ 同call 只是参数书写方式不同

bind

​ 书写格式：let fn = obj.f70.say.bind(obj1,参数234`);

​ 不会直接运行函数，会返回一个新函数

​ 接收返回值，需要的时候调用

​ 注：bind中参数234可以在调用的时候写在fn中 所以bind只需要传对象即可

let obj = {
    name:`123`,
    innerObj:{
        name:"A",
        say(weitht,height){
            console.log(this.name,weitht,height);
        }
    }
}
let obj1 = {
    name:`abc`,
}
obj.innerObj.say.call(obj1,`60kg`,`188`); //abc,`60kg`,`188`
obj.innerObj.say.apply(obj1,[`60kg`,`188`]); //abc,`60kg`,`188`

let fazd = obj.f70.say.bind(obj1,`60kg`);
fazd(`188`); //abc,`60kg`,`188`