详解js中的this指向

this指向问题是个老生常谈的问题了，现在我给大家一个例子

var obj={
  bar:'Cynthia' ,
   foo:function(){
    console.log(this.bar,"wahahah")
    }
}

var foo=obj.foo;
foo(); // 0 "wahahah" 
obj.foo(); //  Cynthia wahahah

虽然obj.foo和foo指向同一个函数,但是执行结果却不一样。

造成这种差异的原因,就在于函数体内部使用了this关键字。很多教材里面会告诉你，this指向的是其运行时所在的环境。但是光看这句话是不是有点懵

下面我把this的指向都列给大家

浏览器

非严格模式下

function add(x,y){
    console.log(this); // window
    return x+y;
}
add(1,40);

在非严格模式下的时候，this的运行环境所在的环境是windows，所以返回的是window

严格模式下

function add(x,y){
    'use strict'
    console.log(this); // undefined
    return x+y;
}
add(1,40);

JavaScript高级程序设计中有这样一句话：在严格模式下，未指定环境对象而调用函数，则this值不会转为window。除非明确把函数添加到某个对象或者调用appy()或call(),否则this值将是undefined

看是否绑定了new

如果绑定了new的话，并且构造函数没有返回function或object，那么this指向这个新对象

function Person(name,age){
    this.name=name;
    this.age=age;
    this.sayHi=function(){
    console.log(this.age)
}
}
let person=new Person("那抓",6);
person.sayHi();// 6

构造函数返回值是function或者object，返回的是构造函数返回的对象

function Super(age){
    this.age=age;
    let obj={a:'2'};
    return obj;
}
let instance=new Super(30);
console.log(instance);// {a:2}
console.log(instance.age);// undefined

箭头函数

箭头函数没有自己的this，继承外层上下文绑定的this

let obj={
    age:20,
    info:function(){
    return ()=>{
        console.log(this,this.age); // this继承的是外层上下文绑定的this
        }
    }
}
let person={age:30};
let info=obj.info();
info(); // 指向的是obj
let info2=obj.info.call(person);
info2();

node环境中

node环境中无论是否在严格模式下，在全局执行环境中（在任何函数体外部）this都指向空对象{}