前端面试中的this问题

最新推荐文章于 2025-04-21 17:48:32 发布

weixin_33958585

最新推荐文章于 2025-04-21 17:48:32 发布

阅读量452

点赞数

CC 4.0 BY-SA版权

文章标签：面试前端 ViewUI

原文链接：https://juejin.im/post/5ce2753bf265da1ba9154edf

该博客聚焦JS面试相关问题。介绍了this指向在函数定义时无法确定，只有执行时才明确，最终指向调用它的对象，还提及call、apply、bind问题以及其他JS经典问题，最后给出了整理的答案及转载来源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

this问题

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象

出自: 追梦子博客

例子1：

function a(){
    var user = "追梦子";
    console.log(this.user); //undefined
    console.log(this); //Window
}
a();
复制代码

例子2：

var o = {
    user:"追梦子",
    fn:function(){
        console.log(this.user);  //追梦子
    }
}
o.fn();
复制代码

例子3：

var o = {
    user:"追梦子",
    fn:function(){
        console.log(this.user); //追梦子
    }
}
window.o.fn();
复制代码

例子4：

var o = {
    a:10,
    b:{
        a:12,
        fn:function(){
            console.log(this.a); //12
        }
    }
}
o.b.fn();
复制代码

例子5：

var o = {
    a:10,
    b:{
        a:12,
        fn:function(){
            console.log(this.a); //undefined
            console.log(this); //window
        }
    }
}
var j = o.b.fn;
j();
复制代码

例子6：

function Fn(){
    this.user = "追梦子";
}
var a = new Fn();
console.log(a.user); //追梦子
复制代码

call,apply,bind问题

来自: 追梦子博客

js经典问题

来自: 小小沧海

function Foo() {
    getName = function () { console.log(1); };
    console.log(this)
    return this;
}
Foo.getName = function () { console.log(2);};
Foo.prototype.getName = function () { console.log(3);};
var getName = function () { console.log(4);};
function getName() { console.log(5);}

Foo.getName();//2
getName();//4
Foo().getName();//1
getName();//1
new Foo.getName();//2
new Foo().getName();//3
new new Foo().getName();//3
复制代码

自己整理的直接贴答案

    var a = 10;
	sayHi();
	function sayHi(){
		a = a+ 10;
		console.log(a);
		return a;
	}
	console.log(a);
	console.log(sayHi() + 10)
	// 20 20 30 40
复制代码

    var a = 10;
	sayHi();
	function sayHi(){
		var a = a+10;
		console.log(a)
		return a;
	}
	console.log(a);
	console.log(sayHi() + 10)
	//  NaN 10 nan nan
复制代码

    var length = 10;
	function fn(){
		console.log(this.length)
	}
	var obj = {
		length: 5,
		method: function(fn){
			fn()
			console.log(this.length)
		}
	}
	obj.method(fn)
	// 10  5
复制代码

    var uname = 'jack';
	function change(){
		console.log(uname);
		var uname = 'lily';
		console.log(uname)
	}
	change()
	// undefined   lily
复制代码

转载于:https://juejin.im/post/5ce2753bf265da1ba9154edf