对于 JavaScript 中 this 指向问题 和 如何改变this指向常用方法的一个简单总结 :

对于 JavaScript 中 this 指向 问题 和 如何 改变this指向 常用方法比较绕人，写这篇文章做一个简单的总结 :

---

this : 它的指向在函数定义的时候是确定不了的，只有 函数执行 的时候才能确定，this 最终指向调用它的对象。

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

function a(){
    var user = "追梦子";
    console.log(this.user); //undefined
    console.log(this); //Window
}
a();
window.a();

• 如果一个函数中有 this，这个函数有被上一级的对象所调用，那么 this 指向的就是 上一级的对象：

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

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

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

• 比较 特殊 的情况：

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();

 

---

 

• 通过函数名直接调用，this 指向 window

function func(){
console.log(this)
}
test() // this -> window
window.test()// this -> window

• 函数作为 window 内置函数的回调函数调用，this 指向 window

setTimeout(function func(){
console.log(this)
},100)
// this -> window

• 通过对象调用函数，this 指向这个对象

var obj = {
    func: function(){
    console.log(this)
  } 
}
obj.func() // this -> obj

• 函数作为构造函数，this 指向新 new 出的对象

function func(){
console.log(this)  // this -> window
}
var newfunc = new func() // this -> newfunc

---

 

• 当 this 碰到 return 时:

规则：如果返回值是一个对象，那么 this 指向的就是那个返回的对象，如果返回值不是一个对象那么 this 还是指向函数的实例。

function fn()  
{  
    this.user = '追梦子';  
    return {};  
}
var a = new fn;  
console.log(a.user); //undefined
//=======================================
function fn()  
{  
    this.user = '追梦子';  
    return function(){};
}
var a = new fn;  
console.log(a.user); //undefined
//=====================================
function fn()  
{  
    this.user = '追梦子';  
    return 1;
}
var a = new fn;  
console.log(a.user); //追梦子
//=========================================
function fn()  
{  
    this.user = '追梦子';  
    return undefined;
}
var a = new fn;  
console.log(a.user); //追梦子

特殊 : 虽然 null 也是对象，但是在这里 this 还是指向那个函数的实例;

function fn()  
{  
    this.user = '追梦子';  
    return null;
}
var a = new fn;  
console.log(a.user); //追梦子

---

 

• call() 方法改变 this 的指向 :

第一个参数：this 指向 ; 如果要传参，后面依次是参数

function fn(x,y){
   console.log(this);  
}
var obj = {
   name:"zs"
}
fn(1,2);//this -> window
fn.call(obj,1,2);//this -> obj

• apply() 方法改变 this 的指向 :

与第一种方法不同的是，用数组的形式表示参数;

function fn(x,y){
   console.log(this);  
}
var obj = {
   name:"zs"
}
fn(1,2);//this -> window
fn.apply(obj,[1,2]);//this -> obj

• bind() 方法改变 this 的指向 :

bind 只改变 this 指向 需要手动调用 ，该方法会返回一个函数。并且我们可以通过 bind 实现柯里化

function fn(x,y){
   console.log(this);  
}
var obj = {
   name:"zs"
}
fn(1,2);//this -> window
fn.bind(obj,1,2)();//this -> obj

---

• 如何实现一个 bind 函数 ？

Function.prototype.myBind = function (context) {
  if (typeof this !== 'function') {
    throw new TypeError('Error');
  }
  var _this = this;
  var args = [...arguments].slice(1);
  // 返回一个函数
  return function F() {
    // 因为返回了一个函数，我们可以 new F()，所以需要判断
    if (this instanceof F) {
      return new _this(...args, ...arguments);
    }
    return _this.apply(context, args.concat(...arguments));
  }
}

• 如何实现一个 call 函数 ？

Function.prototype.myCall = function (context) {
  var context = context || window;
  // 给 context 添加一个属性
  // getValue.call(a, 'TJH', '24') => a.fn = getValue
  context.fn = this;
  // 将 context 后面的参数取出来
  var args = [...arguments].slice(1);
  // getValue.call(a, 'TJH', '24') => a.fn('TJH', '24')
  var result = context.fn(...args);
  // 删除 fn
  delete context.fn;
  return result;
}

• 如何实现一个 apply 函数 ？

Function.prototype.myApply = function (context) {
  var context = context || window;
  context.fn = this;
  var result;
  // 需要判断是否存储第二个参数
  // 如果存在，就将第二个参数展开
  if (arguments[1]) {
    result = context.fn(...arguments[1]);
  } else {
    result = context.fn();
  }
  delete context.fn;
  return result;
}