this 五种情况汇总

126 阅读2分钟

1. 在事件绑定中

给当前元素的某事件行为绑定方法,事件行为触发,此时方法中的this是当前操作元素

<body>
  <div id="box">11111</div>
  <script>
    box.onclick = function () {
      console.log(this)
    }
  </script>
</body>
输出结果:<div id="box">11111</div>

2. 普通方法执行看“点”

1)方法执行看前面有没有点,如果有,点前面是谁,this就是谁,如果没有,this就是window,或者严格模式下的undefined

function fn(){
  console.log(this)
}
fn();//这里的this就是window,在严格模式下就是undefined
var obj={
  name:"li",
  fn:fn,
}
obj.fn();//这里的this就是obj

2)自执行的函数一般是window,严格模式下是undefined

(function () {
      console.log(this)//window
})()

3)回调函数:一般来说是window,除非在执行回调函数「内部方法」做了特殊处理

3. 构造函数执行「new 执行」

构造函数体中的this是当前类的实例

function Student(name,age){
  this.name = name;
  this.age = age;
  this.say=function(){
    console.log(("我是学生"+this.name+"今年"+this.age+"岁"));
  }
}
let a = new Student("xiaoming",12);
a.say();//我是学生xiaoming今年12岁

4. 箭头函数中(含块级上下文)没有自己的this,所用的this是上级上下文「宿主环境」的this

箭头函数好用但是不能滥用,不涉及this随便用

//把2.1)例子改成箭头函数,最后obj.fn(),调用是箭头函数,this指向window
var fn = ()=>{
  console.log(this)
}
fn();//这里的this就是window,在严格模式下就是undefined
var obj={
  name:"li",
  fn:fn,
}
obj.fn();//这里的this就是window

5.基于Function.prototype上的call、bind、apply强制改变this指向

var name="xiaozhang",age=17;
var obj = {
    name:"obj",
    age:18,
    myfun:function(){
        console.log(this.name+"的年龄是:"+this.age);
    }
}
console.log(obj.age);//18
obj.myfun();//obj的年龄是:18
var f = obj.myfun;
f();//xiaozhang的年龄是:17 //this 指的是window

call()、apply()、bind() 都是用来重定义 this 这个对象的!

var db = {
    name:"newObj",
    age:99
};

obj.myfun.call(db);//newObj的年龄是:99
obj.myfun.apply(db);//newObj的年龄是:99
obj.myfun.bind(db)();//newObj的年龄是:99 多加一个()