JavaScript中的this指向绑定规则及常见面试总结

export function getAction(url,parameter) {
  let headers = {}
  if (this && this.realReferer && this.realReferer !== '') {
    headers.realReferer = window.location.origin + this.realReferer
  }
  return axios({
    url: url,
    method: 'get',
    params: parameter,
    headers
  });
}

import { getAction } from '@api/request'
export default {
  methods: {
    getTableData() {
      getAction(this.url.requestUrl).then(res => {
        //1.这个时候getAction中的this将打印出什么
        //2.在该处打印this，会输出什么
        console.log(this)；
      })
    },
  }
}

var testObj = {
  name: "testObj",
  print: function () {
      console.log(name)
  }
} 
var name = "global name";
//想通过调用print()来调用testObj中的name
testObj.print();//global name

var testObj = {
  name: "testObj",
  print: function () {
      console.log(this.name)
  }
} 
var name = "global name";
testObj.print();//testObj

//全局执行上下文，当前对象是window
console.log(this);//window
//函数执行上下文外部对象是全局对象，所以指向全局对象window
function test(){
console.log(this);//window
}
//函数执行上下文外部对象是test，因此指向当前的对象test
var test = {
test: function(){
  console.log(this);//test{...}对象
}
}
//eval执行上下文，根据默认绑定规则，指向全局对象window
eval(`console.log(this); `) //window

//1. 定义在全局对象下的函数被独立调用
function test(){
  console.log("global:", this);
}
test();//window
//2. 定义在某个对象下的函数被独立调用
var testObj = {
test: function(){
  console.log("testObj:", this);
}
}
var testfun = testObj.test;
testfun();//window
//3. 定义在某个函数下的函数被独立调用
function testFun(fn){
  fn();
}
testFun(testObj.test); //window

const obj = {
name: 'innerObj',
fn:function(){
  return this.name;
}
}
//调用者是obj, this指向obj
console.log(obj.fn());//innerObj

const obj2 = {
name: 'innerObj2',
fn: function() {
  return obj.fn(); //此时是obj调用fn,所以此时this指向obj
}
}
//调用者是obj, this指向obj
console.log(obj2.fn())//innerObj

var test = {
}
function test2(){
  console.log(this);
}
//此时是独立函数，因此指向全局对象
test2();//window
//call显式绑定，将函数内部的this绑定至call中指定的引用对象
test2.call(test);//test

var test = {
}
function test2(name){
  console.log(this);
  console.log(name);
}
//此时是独立函数，因此指向全局对象
test2();//window
//call显式绑定，将函数内部的this绑定至call中指定的引用对象
test2.apply(test, ["name"]);//test, name
test2.call(test, "name"); //test

var test = {
  fun: function(){
      console.log(this);
      var test = function(){
          console.log("test", this);
      }
      //1. 因为test.fun()在全局作用域中，所以属于独立函数调用，默认绑定规则指向全局对象
      test(); //window
      //2. bind方法会创建一个原函数的拷贝，并将拷贝中的this指向bind参数中的上下文对象
      var test2 = test.bind(this);
      test2();//test
      //3. apply方法会将this指向参数中的上下文，并立即执行函数
      test.apply(this);//test
      
  }
}
test.fun();

function funtest(){
  this.name = "funtest"
}
var tete = new funtest();
console.log(tete.name); //"funtest"

var obj = {}
obj._proto_ = funtest.prototype
funtest.call(obj)

function testFun(){
    console.log(this);
}
var testobj = {
    name:"testobj",
    fun:testFun
}
//若输出window,则证明优先级默认绑定大于隐式绑定；
//若输出testobj,则证明优先级隐式绑定大于默认绑定;
testobj.fun()//testobj

function testFun(){
    console.log(this);
}
var testobj = {
    name:"testobj",
    fun:testFun
}
//若输出testobj,则证明优先级隐式绑定大于显式绑定
//若输出{}, 则证明优先级显式绑定大于隐式绑定
testobj.fun.call({})//{}

function testFun(){
    console.log(this);
}
var testobj = {
    name:"testobj",
    fun:testFun
}
//若输出testobj,则证明优先级隐式绑定大于显式绑定
//若输出{}, 则证明优先级显式绑定大于隐式绑定
testobj.fun.call({})//{}
testobj.fun.call(testobj)

function testFun(){
    console.log(this.name);
}
var testobj = {
    name:"testobj",
}
testFun.call(testobj);//testobj
//new 操作符创建了一个新的对象，并将this重新指向新对象
//覆盖了testFun原来绑定的testobj对象
var instance = new testFun();
console.log(instance.name) //undefined

var lostObj = {
  name: "lostObj",
  fun: function(){
    console.log(this);
    }
}
var lostfun = lostObj.fun;
lostfun();//window
lostObj.fun();//lostObj

var lostObj = {
  name: "lostObj",
  fun: function(){
    console.log(this);
    }
}
var lostObj2 = {
  name: "lostObj2",
  fun: lostObj.fun
}
var lostfun = lostObj.fun;
lostfun();//window
lostObj.fun();//lostObj
lostObj2.fun();//lostObj2

var lostObj3 = {
  name: "lostObj3",
  fun: function(){
    console.log(this.name);
    }
}
var name = "global"
function doFun(fn){
  fn();
}
doFun(lostObj3.fun);//global

var lostObj4 = {
  name: 'lostObj4',
  fun: function() {
    setTimeout(function() {
      console.log(`Hello, ${this.name}!`);
    });
  }
};
lostObj4.fun(); // Hello, undefined!

var lostObj5 = {
  name: 'lostObj5',
  fun: function() {
    function innerFun() {
      console.log(`Hello, ${this.name}!`);
    };
    innerFun();
  }
};
lostObj5.fun();// Hello, undefined!

var testObj2 = {
    name: "testObj2", 
    fun: function(){
        setTimeout(()=>{
            console.log(this);
        })
    }
}
var testObj3 = {
    name: "testObj3", 
    fun: function(){
        setTimeout(function(){
            console.log(this);
        })
    }
}
//即使独立调用函数，箭头函数内的this指向是在定义时就已经确定
testObj2.fun();//testObj
testObj3.fun();//window

var testObj4 = {
  arrowFun: ()=>{
    console.log(this);
  },
  normalFun: function(){
    console.log(this);
  }
}
//此时箭头函数的this继承全局上下文的this，显式绑定无法修改箭头函数中的this值
testObj4.arrowFun();//window
testObj4.arrowFun.apply({});//window
testObj4.normalFun();//testObj4
testObj4.normalFun.apply({});//{}

Function.prototype.mybind = function (thisArg) {
  //1.隐式绑定，当前的this指向目标函数
  var targetFn = this;
  //将参数列表转换为数组，并删除第一个参数
  var args = Array.prototype.slice.call(arguments, 1);
  //2.返回值一个函数
  return function bound() {
     var innerArgs = Array.prototype.slice.call(arguments);
     var finalArgs = args.concat(innerArgs);
    //解决返回函数使用new后，绑定this忽略问题
     var _this = targetFn instanceof this ? this: thisArg;
     return targetFn.apply(thisArg, finalArgs)
   }
 }
}