JavaScript中this面试题, 四道题彻底清楚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();

打印结果:

• window person person window

解释:

• sss(): 默认绑定, 是独立函数调用, this指向window
• person.sayName(): 隐式绑定, this指向发起调用的对象, 因此this指向person
• (person.sayName)(): 隐式绑定, 不要被小括号迷惑, "."的优先级很高的, 他依然是隐式绑定, this指向发起调用的对象person
• (b = person.sayName)(): 默认绑定, 这是规则之外的间接函数引用(不懂的话可以看上一篇), 赋值语句最终返回一个函数, 函数后面跟小括号就是默认绑定, 独立函数调用, 因此this指向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 person2
• window window
• window window person2
• person1 person2 person1

解释:

• person1.foo1(): 隐式绑定, this指向发起调用的对象person1

• person1.foo1.call(person2): 显示绑定, this指向person2

• person1.foo2(): foo2是一个箭头函数, 箭头函数中没有this, 会向上级作用域寻找, 上级作用域this指向window

• person1.foo2.call(person2): foo2是一个箭头函数, 对箭头函数绑定this是不生效的, 依然会去上一层作用域寻找this, this指向window

• person1.foo3()(): 默认绑定, 调用foo3返回一个function定义的独立函数, 在对独立函数调用, this指向window

• person1.foo3.call(person2)(): 默认绑定, 通过显式绑定调用foo3, 再对foo3返回的函数独立调用, this指向window

• person1.foo3().call(person2): 显式绑定, 通过隐式绑定调用foo3, 在对foo3返回的函数显式绑定person2, this指向person2

• person1.foo4()(): 通过隐式绑定调用 foo4, 调用foo4返回一个箭头函数, 箭头函数的this会向上级寻找, this指向person1

• person1.foo4.call(person2)(): 通过显式绑定调用foo4, 调用foo4返回一个箭头函数, 箭头函数的this会向上级寻找, this指向person2

• person1.foo4().call(person2): 通过隐式绑定调用foo4, 在对返回的箭头函数进行显式绑定, 由于箭头函数中并不存在this, 所以显式绑定call并不生效, 箭头函数的this会向上级寻找, this指向person1

this面试题三

面试题三和面试题四大同小异, 提供给大家练习

var name = 'window'

/*
	通过new进行调用会执行如下操作
  1.创建一个空的对象
  2.将这个空的对象赋值给this
  3.执行函数体中代码
  4.将这个新的对象默认返回
*/
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)
    }
  }
}

// person1/person都是对象(实例instance)
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 person2
• person1 person1
• window window person2
• person1 person2 person1

解释

• person1.foo1(): 隐式绑定, this指向person1

• person1.foo1.call(person2): 显式绑定, this指向person2

• person1.foo2(): 通过隐式绑定调用foo2, 调用foo2返回一个箭头函数, 箭头函数的上一级时Person构造函数, Person函数中的this指向person1

• person1.foo2.call(person2): 箭头函数中没有this, 显式绑定不起作用, 上层作用域构造函数中Person指向person1

• person1.foo3()(): 默认绑定: 独立函数调用, this指向window

• person1.foo3.call(person2)(): 默认绑定: 独立函数调用, this指向window

• person1.foo3().call(person2): 显式绑定: this指向person2

• person1.foo4()(): 箭头函数找上层作用域, 上层作用域被隐式绑定, this指向person1

• person1.foo4.call(person2)(): 箭头函数找上层作用域, 上层作用域被显式绑定, this指向person2

• person1.foo4().call(person2): 显式绑定对箭头函数无作用, 箭头函数找上层作用域, 上层作用域被隐式绑定, this指向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)

打印结果:

• window window person2
• obj person2 obj

解释:

• person1.obj.foo1()(): 默认绑定: 通过隐式绑定调用foo1, 再对foo1返回的函数独立调用, this指向window

• person1.obj.foo1.call(person2)(): 默认绑定, 独立函数调用, this指向window

• person1.obj.foo1().call(person2): 显式绑定, this指向person2

• person1.obj.foo2()(): 箭头函数找上层作用域, 上层作用域被隐式绑定, this指向obj

• person1.obj.foo2.call(person2)(): 箭头函数找上层作用域, 上层作用域被显式绑定, this指向person2

• person1.obj.foo2().call(person2): 显式绑定对箭头函数不生效, 箭头函数找上层作用域, 上层作用域被隐式绑定, this指向obj