标签：面试题 name 前端 objA say objB let fun 相关

通过面试题来说明this的使用

文章目录

• • • • 直接调用函数
      • 直接调用对象方法
      • 箭头函数的this
      • 面试题
      • • 题解

循序渐进，从调用函数到this本质。本次实验在浏览器基础上可以实现，直接使用node是不能实现部分内容的（原因是浏览器自动转化的全局对象）

直接调用函数

function get(content){
	console.log(content)
}
get('hello')
// 上述的用法，相当于下面这行代码的语法糖
get.call(window,'hello')  

直接调用对象方法

let name ="Window"
let person ={
	name:"person",
	get:function(){
		console.log(this.name)
	}
}
person.get() // outs: person
// 同理，上述用法为下面代码的语法糖
person.get.call(person) // outs: person

person.get.call(window) // outs: Window

箭头函数的this

• 箭头函数的this是定义函数时绑定的，而不是执行函数时
• 箭头函数中this是固定的，本身没有this，内部的this就是外层代码块的this（即继承自父元素的执行上下文）
  • 也是这个原因，箭头函数不能作为构造函数

let x = 111
let obj = {
	x:222,
	say:()=>{
		console.log(this.x)
	}
}
obj.say()   /// 111  
// 因为 定义箭头函数时，父元素的执行上下文为window对象,所以this.x 为111

如何指定对象内部的x呢？

let x= 111
let obj ={
	x:222,
	say:()=>{
		let fn = ()=> console.log(this.x)
		fn()
	}
}
obj.say() // 222

面试题

看一道面试题，巩固一下之前的知识

var name = 222
let  objA = {
    name:111,
    say:function(){
        console.log(this.name)
    }
}
let objB = {
    name:333,
    say:function(fun){
        fun()
    }
}
let fun = a.say
fun() 
objA.say() 
objB.say(objA.say) 
objB.say = objA.say
objB.say() 

题解

var name = 222 // let 声明的不在window对象上（html中处于script 域中）
let  objA = {   // 不能通过作用域链找到，但是可以objA来进行使用，上面同
    name:111,
    say:function(){
        console.log(this.name)
    }
}
let objB = {
    name:333,
    say:function(fun){
        fun()
    }
}
let fun = objA.say
fun()  // => 222  等效于 fun.call(window)   运行时绑定当前this(window)
objA.say()   // 111  等效于 objA.say.call(objA) 
objB.say(objA.say)   // 222  等效于 objB.say.call(objB,objA.say).call(window)
			//  函数运行时绑定执行上下文,运行内部的fun() 时候，上下文为window对象
objB.say = objA.say 
objB.say()  // 333 等效于 objB.say.call(objB)  (objA.say.call(objB))

标签：面试题,name,前端,objA,say,objB,let,fun,相关
来源： https://blog.csdn.net/qq_48626600/article/details/123210401

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。