前端复习之this面试题

前言

网上收集的题目，供自己复习使用。

题目一

let a = 10;
const b = 20;
function foo() {
  console.log(this.a);
  console.log(this.b);
}

foo();//undefined undefined
console.log(window.a);//undefined
//使用let和const定义的变量，不会绑定到window上

题目二

var a = 1;
function foo() {
  var a = 0;
  console.log(this);
  console.log(this.a);
  console.log(a);
}
foo();//window 1 0

题目三

function foo() {
  console.log(this.a);
}
function doFoo(fn) {
  console.log(this);
  fn();
}
var obj = { a: 1, foo };
var a = 2;
doFoo(obj.foo);// window 2

题目四

function foo() {
  console.log(this.a);
  return function () {
    console.log(this.a);
  };
}
var obj = { a: 1 };
var a = 2;

foo();//2
foo.bind(obj);
foo().bind(obj);//2

bind函数会返回一个新的函数，执行这个新函数，需要手动调用,返回的两个2，都是foo函数中第一句代码执行得到的

题目五

var name = "window";
var obj1 = {
  name: "obj1",
  foo: function () {
    console.log(this.name);
    return function () {
      console.log(this.name);
    };
  },
};
var obj2 = {
  name: "obj2",
  foo: function () {
    console.log(this.name);
    return () => {
      console.log(this.name);
    };
  },
};
var obj3 = {
  name: "obj3",
  foo: () => {
    console.log(this.name);
    return function () {
      console.log(this.name);
    };
  },
};
var obj4 = {
  name: "obj4",
  foo: () => {
    console.log(this.name);
    return () => {
      console.log(this.name);
    };
  },
};

obj1.foo()();//obj1 window
obj2.foo()();//obj2 obj2
obj3.foo()();//window window
obj4.foo()();//window window

题目六

var name = "window";
var obj1 = {
  name: "obj1",
  foo1: function () {
    console.log(this.name);
    return () => {
      console.log(this.name);
    };
  },
  foo2: () => {
    console.log(this.name);
    return function () {
      console.log(this.name);
    };
  },
};
var obj2 = {
  name: "obj2",
};
obj1.foo1.call(obj2)(); // 'obj2' 'obj2'
obj1.foo1().call(obj2); // 'obj1' 'obj1'
obj1.foo2.call(obj2)();// window window
obj1.foo2().call(obj2);// window obj2

题目七

function foo() {
  console.log(this.a);
}
var a = 2;
(function () {
  "use strict";
  foo();
})();//2

有点没搞懂

this手写题

1、call函数

Function.prototype.mycall = function (obj, ...args) {
  obj = obj === null || obj === undefined || obj === "" ? window : Object(obj);
  obj.fn = this;
  obj.fn(...args);
  delete obj.fn;
};

function foo() {
  console.log(this.name);
}

let obj = {
  name: "zs",
};

foo.mycall(obj);//zs

2、apply函数

Function.prototype.myapply = function (obj,args) {
  obj = obj === null || obj === undefined || obj === "" ? window : Object(obj);
  obj.fn = this;
  obj.fn(...args);
  delete obj.fn;
};

3、bind函数

Function.prototype.mybind = function (obj, ...args) {
  obj = obj === null || obj === undefined || obj === "" ? window : Object(obj);
  obj.fn = this;
  return function (...Arg) {
    let allArgs = [...args, ...Arg];
    obj.fn(...allArgs);
    delete obj.fn;
  };
};
function foo(name, age, height) {
  console.log(this, name, age, height);
}
let fun = foo.mybind({ name: "zhangsan" }, "张三", 22);
fun(1.88);

4、new函数

function myNew() {
  let obj = new Object();
  let Constructor = Array.prototype.shift.call(arguments);
  obj.__proto__ = Constructor.prototype;
  //这里要用apply，参数是一个数组
  Constructor.apply(obj, arguments);
  return obj;
}

function Student(name, age) {
  this.name = name;
  this.age = age;
}

let newPerson = myNew(Student, "hanson", 18);
console.log(newPerson.name); // hanson