前端面试常见的读代码题总结

开头

秋招如火如荼地进行中，面试到现在差不多有接近20场面试了，总结下来，腾讯、字节、美团这些大厂都喜欢进行这个环节，因此在此记录总结，便于回顾。

正文

一般面试官给的读代码题主要是考察JS中包括但不限于this指向、Promise、宏任务微任务、箭头函数等相关的问题，因此这里主要按知识点来划分。

this指向相关

1. 代码一

		Function.prototype.a=()=>{
    		return 1
		}
		Object.prototype.b=()=>{
    		return 2
		}
		function A(){}
		var a = new A();
		console.log(a.a()); //报错
		console.log(a.b()); //2
		console.log(A.a()); //1
		console.log(A.b()); //2

2. 代码二

		let a = {b:1}
		let b = a
		a.x = a = {c:2};
		console.log(a.x, b.x); //undefined, {c:2}

3. 代码三

		var name = 'John'
		function Fn(){
			console.log(this.name)
			this.name = 'Tom'
			this.getName = () => {
				this.name = 'bob'
				return {
					name: 'jack',
					fn1: () => {
						console.log(this.name)
					},
					fn2: function () {
						console.log(this.name)
					}
				}
			}
		}
		Fn();
		let person = new Fn();
		console.log(person.name)
		var obj =  person.getName();
		obj.fn1()
		obj.fn2()
		console.log(this.name)

4. 代码四

		function Foo(){
			Foo.getValue = function(){
				console.log(1)
			}
			this.getValue = function(){
				console.log(2)
			}
		}
		Foo.prototype.getValue = function(){
			console.log(3)
		}
		Foo.getValue = function(){
			console.log(4)
		}
		function Foo2(){
			
		}
		Foo2.prototype = Foo.prototype
		const obj2 = new Foo2()
		obj2.getValue()

5. 代码五

		function test(){
			var a = 0;
			return function(){
				a++;
				console.log(a);
			}
		}
		var a = test();
		a();

6. 代码六

		window.name = 'ByteDance';
		function A(){
			this.name = 123;
		}
		A.prototype.getA = function() {
			console.log(this.name);
			console.log(this);
			return this.name + 1;
		}
		let a = new A();
		let funcA = a.getA;
		funcA();
		a.getA();

7. 代码七

		function O(age) {    
			this.age = age;;
		}
		var o = new O(1)
		var age = 3;
		O.prototype.age = 2;
		setTimeout(function() {    
			age = 4;    
			O(5);    
			console.log(o.age, age);
		}, 1000)

8. 代码八

		window.name = 'bytedance';
		class A {
			constructor() {
				this.name = 123;
			}
			getA() {
				console.log(this.name);
				return this.name + 1;
			}
		}
		var a = new A();
		var funcA = a.getA;
		funcA();

9. 代码九

		this.a = 20;
		var test = {
			a: 40,
			// init: () => {
			init: function() {
				console.log(this.a);
				function go() {
					// this.a = 60;
					console.log(this.a);
				}
				go.prototype.a = 50;
				return go;
				}
		};
		var P = test.init();
		P();
		new P();

Promise相关

1. 代码一

		console.log("script start")
		setTimeout(function(){
			console.log('setTimeout')
		}, 0)
		new Promise(function(resolve, reject){
			console.log('promise1')
			resolve()
			console.log('promise2')
		}).then(function(){
			console.log('promise then')
		})
		console.log('script end')

2. 代码二

		const promise = new Promise((resolve, reject) => {
		setTimeout(() => {
			console.log("once");
			resolve("success");
		}, 1000)
		});

3. 代码三

		const start = Date.now();

		promise.then((res) => {
		console.log(res, Date.now() - start);
		})

		promise.then((res) => {
		console.log(res, Date.now() - start);
		})

		const promise1 = new Promise((resolve, reject) => {
		setTimeout(() => {
			resolve('success');
		}, 1000);
		});

4. 代码四

		const promise2 = promise1.then(() => {
		throw new Error('error');
		});

		console.log('promise1', promise1);
		console.log('promise2', promise2);

		setTimeout(() => {
		console.log('promise1', promise1);
		console.log('promise2', promise2);
		}, 2000)

5. 代码五

		const a = () => {
			new Promise((resolve) => {
				resolve(1)
				console.log('a')
			}).then(() => {
				console.log('b')
			})
		}
		a()
		console.log('c')