JavaScript中this面试题, 四道题彻底清楚this指向问题

深碍√TFBOYSˉ_ 2023-10-02 19:51 1阅读 0赞

### this面试题一 ###

**如果不清楚this绑定规则可以看上一篇有详细说明**

**打印结果:**

*  window person person window

**解释:**

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

### this面试题二 ###

**打印结果**

*  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