JS中关于this的指向问题

1. 如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window

function foo() {
    var user = "name123";
    console.log(this.user); //undefined
    console.log(this); //Window
}
foo();
// foo();等价于 window.foo();

function foo() {
    this.user = "name123";
    console.log(this.user); // "name123"
    console.log(this); //Window
}
foo();
// foo();等价于 window.foo();

var user 只是声明了一个变量，并不是往这个对象添加属性，this.user 才是给对象添加属性，所以第一段代码调用该对象的时候，它没有user这个属性，输出就是 undefined

2. 如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象

const o = {
    user:"追梦子",
    fn:function(){
        console.log(this.user);  //追梦子
    }
}
o.fn();

var o = {
    a:10,
    b:{
        a:12,
        fn:function(){
            console.log(this.a); // 12
            console.log(this); // 输出 b对象
        }
    }
}
o.b.fn();

注意： 用var来声明变量会出现全局变量挂载到全局对象造成全局对象成员污染问题，const / let 在全局作用域下定义的变量不会挂在到顶层对象window上

var user = "out";
var o = {
    user:"in",
    fn:function(){
        console.log(this.user); // in
    }
}
window.o.fn();

const o = {
    user:"追梦子",
    fn:function(){
        console.log(this.user); 
    }
}
window.o.fn(); // "TypeError: Cannot read property 'fn' of undefined

3. this永远指向的是最后 调用 它的对象，也就是看它执行的时候是谁 调用 的

var o = {
    a:10,
    b:{
        a:12,
        fn:function(){
            console.log(this.a); //undefined
            console.log(this); //window
        }
    }
}
var j = o.b.fn; // 只是将fn赋值给变量j并没有执行
j(); // 此时执行上下文环境为全局

　　var name = "The Window";
　　var object = {
　　　　name : "My Object",
　　　　getNameFunc : function(){
　　　　　　return function(){
　　　　　　　　return this.name;  // 这个this是有上下文的限制的
　　　　　　};
　　　　}
　　};
   var tmp = object.getNameFunc(); // 此时没有执行this.name
   var a = tmp(); // 这个时候才执行，这时候的this上下文为全局
   console.log(a); // The Window

4. 构造函数中的 this

function Fn() {
    this.user = "追梦子";
}
const a = new Fn();
console.log(a.user); //追梦子

这里之所以对象a中含有user是因为new关键字就是创建一个对象实例，用变量a创建了一个Fn的实例（相当于复制了一份Fn到对象a里面），new关键字可以改变this的指向，将这个this指向对象a

补充：

使用new关键字（var a = new ClassA(…)）的过程：

1. 创建空对象；
   　　var obj = {};

2. 设置新对象的constructor属性为构造函数的名称，设置新对象的_ proto _属性指向构造函数的prototype对象；
   　　obj. _ proto _ = ClassA.prototype;

3. 使用 apply/call 将函数中的this被指向新的实例对象：
   　　ClassA.call(obj);

4. 将初始化完毕的新对象地址，保存到等号左边的变量a中

注意：若构造函数中返回this或返回值是基本类型（number、string、boolean、null、undefined）的值，则返回新实例对象；若返回值是引用类型的值，则实际返回值为这个引用类型。

返回值为引用类型举例：

function Fn()  
{  
    this.user = '123';  
    return {}; 
    // return new Object();
    // return function() {};
    // return [];
}
const a = new Fn();  
console.log(a.user); // undefined

返回值为基本类型举例：

function Fn()  
{  
    this.user = 'aaa';  
    return 1;
    // return undefined
    // return true;  
}
const a = new Fn();  
console.log(a.user); // aaa

虽然null也是对象，但是在this还是指向那个函数的实例，因为null比较特殊，（null是完全空的对象没有原型链）
console.log(typeof null); // "object"
console.log(null instanceof Object); // false

function Fn()  
{  
    this.user = 'aaa';  
    return null;
}
const a = new Fn();  
console.log(a.user); // aaa

几种特定场景的 this 指向

• 在严格模式下"use strict",为undefined
• 由于 setTimeout() setInterval() 调用的代码运行在与所在函数完全分离的执行环境上. 这会导致这些代码中包含的 this 关键字会指向 window (或全局)对象

可以利用bind()将this绑定在函数上

bind()方法是在Function.prototype上的一个方法，当被绑定函数执行时，bind方法会创建一个新函数，并将第一个参数作为新函数运行时的this

function Obj () {
 this.num = 1,
 this.getNum = function() {
 console.log(this.num);
 },
 this.getNumLater = function() {
   setTimeout(function(){
    console.log(this.num);
   }.bind(this), 1000) //利用bind()将this绑定到这个函数上
 }
}
const obj = new Obj; 
obj.getNum();//1　　
obj.getNumLater()//1　　

参考 https://www.cnblogs.com/pssp/p/5216085.html