前端面试必备(2)this的大场面试题

前言

前端面试题大全来啦,本文已收录于:《前端面试题大全》专栏

此专栏目的在于,解决找工作中所有常见的前端面试题,助您找个好工作,每周持续更新中,欢迎免费订阅!!!

前端面试必备(2)this的大场面试题_第1张图片


 

gitee仓库地址获取代码:https://gitee.com/CMD-UROOT/case-interview


文章目录

目录

1.阿里面试题

2.解题思路

3.正确答案

4.图解


1.阿里面试题

建议自己先思考怎么解决,再看解题思路

 

2.解题思路

先看两个例子

例子1: 在函数中直接使用

//在函数中直接使用
    function get(content) {
      console.log(content)
    }

    get('你好')
    get.call(window,'你好') //get('你好')就是get.call(window,'你好')的语法糖

打印结果:

在函数中直接使用,this指向window

前端面试必备(2)this的大场面试题_第2张图片

 例子2: 函数作为对象的方法被调用(谁调用我 我就指向谁)

//函数作为对象的方法被调用(谁调用我 我就指向谁)
    var person = {
      name: '张三',
      run: function (time) {
        console.log(`${this.name} 在跑步 最多${time}min就不行了`)
      }
    }

    person.run(30)
    person.run.call(person,30)

打印结果:

这里是person调用的,所以this指向person

前端面试必备(2)this的大场面试题_第3张图片

 总结:在函数中直接使用指向window,函数作为对象的方法被调用(谁调用我 我就指向谁)

 

3.正确答案

    var name = 222
    var a = {
      name: 111,
      say: function () {
        console.log(this.name)
      }
    }

    var fun = a.say
    fun() // fun.call(window)  //222
    a.say() //a.say.call(a)    //111  

    var b = {
      name: 333,
      say: function (fun) {
        fun() // fun.call(window) //222
      }
    }
    b.say(a.say)
    b.say = a.say
    b.say() // b.say.call(b) //333

打印结果: 

前端面试必备(2)this的大场面试题_第4张图片 

4.图解

前端面试必备(2)this的大场面试题_第5张图片

 前端面试必备(2)this的大场面试题_第6张图片

 前端面试必备(2)this的大场面试题_第7张图片

 

你可能感兴趣的:(面试题大全,面试,职场和发展,javascript,前端)