this指向面试题总结

在上几篇文章中我们学习了this的指向规则。

javascript中的this指向总结（一）

javascript中的this指向总结（二）

javascript中的this指向（三）

javascript中的this指向（四）

那么今天我们来练习几个关于this指向的面试题吧。

this面试题一

var name = "window";

var person = {
  name: "person",
  sayName: function () {
    console.log(this.name);
  }
};

function sayName() {
  var sss = person.sayName;
  sss(); 
  person.sayName(); 
  (person.sayName)();
  (b = person.sayName)(); 
}

sayName();

解析：

function sayName() {
  var sss = person.sayName;
  sss(); // window(独立函数调用)
  person.sayName(); // person(隐式绑定)？
  (person.sayName)(); // person(隐式绑定)
  (b = person.sayName)(); // window(赋值表达式，独立函数调用)
}

this面试题二

var name = 'window'

var person1 = {
  name: 'person1',
  foo1: function () {
    console.log(this.name)
  },
  foo2: () => console.log(this.name),
  foo3: function () {
    return function () {
      console.log(this.name)
    }
  },
  foo4: function () {
    return () => {
      console.log(this.name)
    }
  }
}

var person2 = { name: 'person2' }

person1.foo1(); 
person1.foo1.call(person2); 

person1.foo2();  
person1.foo2.call(person2); 

person1.foo3()(); 
person1.foo3.call(person2)(); 
person1.foo3().call(person2); 

person1.foo4()(); 
person1.foo4.call(person2)(); 
person1.foo4().call(person2); 

解析：

person1.foo1(); // person1(隐式绑定)
person1.foo1.call(person2); // person2(显示绑定优先级大于隐式绑定) 

person1.foo2();  // window(箭头函数不绑定this，上层作用域是全局，this是window)
person1.foo2.call(person2); // window(箭头函数，上层作用域的this是window)

person1.foo3()(); // window(默认绑定，独立函数调用)
person1.foo3.call(person2)(); // window(默认绑定，独立函数调用) 
person1.foo3().call(person2); // person2(显示绑定)

person1.foo4()(); // person1(箭头函数，上层作用域的this是person1)
person1.foo4.call(person2)(); // person2(箭头函数，上层作用域的this是person2)
person1.foo4().call(person2); // person1(箭头函数，上层作用域的this是person1)

this面试题三

var name = 'window'

function Person (name) {
  this.name = name
  this.foo1 = function () {
    console.log(this.name)
  },
  this.foo2 = () => console.log(this.name),
  this.foo3 = function () {
    return function () {
      console.log(this.name)
    }
  },
  this.foo4 = function () {
    return () => {
      console.log(this.name)
    }
  }
}

var person1 = new Person('person1')
var person2 = new Person('person2')

person1.foo1() 
person1.foo1.call(person2) 

person1.foo2() 
person1.foo2.call(person2)

person1.foo3()() 
person1.foo3.call(person2)() 
person1.foo3().call(person2)

person1.foo4()()
person1.foo4.call(person2)() 
person1.foo4().call(person2)

解析：

person1.foo1() // person1
person1.foo1.call(person2) // person2(显示绑定高于隐式绑定)

person1.foo2() // person1（箭头函数，上层作用域的this是person1）
person1.foo2.call(person2) // person1 （箭头函数，上层作用域的this是person1）

person1.foo3()() // window（独立函数调用）
person1.foo3.call(person2)() // window
person1.foo3().call(person2) // person2

person1.foo4()() // person1
person1.foo4.call(person2)() // person2 
person1.foo4().call(person2) // person1

this面试题四

var name = 'window'

function Person (name) {
  this.name = name
  this.obj = {
    name: 'obj',
    foo1: function () {
      return function () {
        console.log(this.name)
      }
    },
    foo2: function () {
      return () => {
        console.log(this.name)
      }
    }
  }
}

var person1 = new Person('person1')
var person2 = new Person('person2')

person1.obj.foo1()() 
person1.obj.foo1.call(person2)() 
person1.obj.foo1().call(person2) 

person1.obj.foo2()() 
person1.obj.foo2.call(person2)() 
person1.obj.foo2().call(person2)