Js中的this指向总结

137 阅读1分钟

this指向的5种情况不包含箭头函数中的this总结

Js中的this 代表的是当前行为执行的主体;js中的context代表的是当前行为执行的环境(区域)
如:杨紫 在肯德基 吃汉堡 this->杨紫(执行的主体) context -> 肯德基(地址/地方)

 function eat(){
     //当前执行的主体就是杨紫
     console.log(this)
 }
 杨紫.eat();//this->杨紫

this是谁 和函数在哪里定义的 ,在哪里执行的没有任何关系:如何区分this呢?

函数执行,首先看函数名前面是否有 ".",点前面是谁 this就是谁,没有的话就是window

function fun(){
    console.log(this);
};
var obj = {fn:fun};
fn();//this->window
obj.fn()//this->obj

function sum(){
    //this->window
    fn();//this->window
}
sum();

var objs = {
    sum:function(){
        //this-->objs
    }
}
objs.sum();

自执行函数中的this 始终是指向window

// [非严格模式]
// 1、自执行函数中的this永远是window
// [案例1]
var obj={
   fn:(function(i){
      //this->window
      return function(){
         this->obj
       }
    })(0)
 }

obj.fn();

// [严格模式]
// "use strict" //告诉浏览器我们接下来编写的js代码采用严格模式
// 1、自执行函数中的this永远是undefined

给元素的某一个事件绑定方法,当事件触发的时候,执行对应的方法,方法中的this是当前点击的元素

// [案例1]

// oDive.onclick = function(){
//   //this->oDive
// };

// [案例2]

// function fn(){
//   //this->window
// }
// oDive.onclick = function(){
//   //this->oDive
//    fn();
// }

构造函数执行时方法体中的this指向的是构造函数的实例

原型上的方法中this 指向问题:执行方法前面如果有'.'则该方法体中的this就指向谁,没有则指向window(谁调用原型方法 this就指向谁 否则就指向window)

使用call/apply来改变this的指向(一旦遇到call/apply上述的四条都没用了)