容易出错的js面试题目

最新推荐文章于 2024-02-24 02:15:06 发布

置顶 weixin_41697323

最新推荐文章于 2024-02-24 02:15:06 发布

阅读量259

点赞数

分类专栏： js 文章标签：函数this指向 js中this指向原型继承原型链 js面试题目

本文链接：https://blog.youkuaiyun.com/weixin_41697323/article/details/99961743

版权

js 专栏收录该内容

14 篇文章

订阅专栏

本文探讨了JavaScript中常见的面试难题，包括原型对象继承、this的指向、变量作用域、for循环与for...of的区别，以及事件循环机制。详细解释了函数声明、var变量的预解析过程，展示了在不同阶段代码如何执行。

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

js原型对象继承

 // 函数表达式  
  var f = function () {
    this.s = 8
    f.prototype.s = 6
  }
  console.log(new f().s) //8 

  // 函数声明 
  function Func() {
    this.name = 1111
    console.log(this)
  }
  Func.prototype.name = 2222
  console.log(new Func().name) //111
  console.log(new Func()) //Func {name: 1111}
 
  //总结：当我们访问一个对象的属性时，首先会从自身查找有没有这个属性，当自身没有时，就会去它的原型对象查找，原型对象还没查找到，就去原型对象的对象上去查找，直到原型链的顶层找到为止

function Func1(name) {
    this.name = name || "sapi"
    this.say = function (prefix) {
      return prefix + this.name + "-self"
    }
  }
  Func1.prototype.say = function (prefix) {
    return prefix + this.name + "-prototype"
  }
  console.log(new Func1().say("welcome")) //welcomesapi-self

  function Func2(name) {
    this.name = name || "sapi"
    // 函数表达式 发现say方法不是Func2的属性
    function say(prefix) {
      return prefix + this.name + "-self"
    }
  }
  Func2.prototype.say = function (prefix) {
    return prefix + this.name + "-prototype"
  }
  console.log(new Func2().say("welcome")) //welcomesapi-prototype

js 中this指向

var obj = {
    fn: function () {
      setTimeout(() => {
        console.log(this)
      })
    }
  }
  obj.fn() //obj 在箭头函数里面没有 this ，箭头函数里面的 this 是继承外面的环境。

  var obj2 = {
    fn: function () {
      setTimeout(function () {
        console.log(this)
      })
    }
  }
  obj2.fn() //window

  var obj = {
    say: function () {
      setTimeout(() => {
        console.log(this)
      });
    }
  }
  obj.say(); // obj

  var obj = {
    say: function () {
      console.log(this) // obj
      var fn = () => {
        console.log(this); // obj
        setTimeout(() => {
          console.log(this); // obj
        })
      }
      fn();
    }
  }
  obj.say()
  
  var obj = {
    say: function () {
      var f1 = function () {
        console.log(this); // window, f1调用时,没有宿主对象,默认是window
        setTimeout(() => {
          console.log(this); // window
        })
      };
      f1();
    }
  }
  obj.say()

  var obj = {
    say: function () {
      'use strict';
      var f1 = function () {
        console.log(this); // undefined
        setTimeout(() => {
          console.log(this); // undefined
        })
      };
      f1();
    }
  }
  obj.say()

var let的考察

  for (var i = 0; i < 5; i++) {
    setTimeout(function () {
      console.log(i) //5
    }, 1000 * i)
  }
  for (let i = 0; i < 5; i++) {
    setTimeout(function () {
      console.log(i) // 0 1 2 3 4
    }, 1000 * i)
  }

for for in 与for of的区别

  array = ["aa", "bb", "cc"]
  //for of遍历的是数组元素值
  for (var item of array) {
    console.log(item) // aa bb cc
  }
  //for in遍历的是数组的索引（即键名）不能直接进行几何运算 通常用for in来遍历对象的键名 包括原型方法method和name属性
  for (var item in array) {
    console.log(item) //0 1 2 string
  }
  for (var i = 0; i < array.length; i++) {
    console.log(i) //0 1 2 number
  }



  console.log(undefined == null) //true
  console.log(1 == true) //true
  console.log(2 == true) //false
  console.log(0 == false) //true
  console.log(0 == '') //true
  console.log(NaN == NaN) //false
  console.log([] == false) //true
  console.log([] == ![]) //true

js 事件循环机制

  ES6 async wait函数 定时器 promise对象 考察

  console.log("script start")

  async function async1() {
    await async2()
    console.log("async1 end")
  }
  async function async2() {
    console.log("async2 end")
  }
  async1()
  setTimeout(function () {
    console.log("setTimeout")
  }, 0)

  new Promise(resolve => {
    console.log('Promise');
    resolve()

  }).then(function () {
    console.log('Promise1');
  }).then(function () {
    console.log('Promise2');
  })

  console.log("script end")
  
  // script start
  // async2 end
  // Promise
  // script end
  // async1 end
  // Promise1
  // Promise2
  // setTimeout

  ES6异步函数 定时器 promise对象 考察

  console.log("script start")

  async function async1() {
    console.log("async1 end")
    await async2()
  }
  async function async2() {
    console.log("async2 end")
  }
  
  async1()

  setTimeout(function () {
    console.log("setTimeout")
  }, 0)

  new Promise(resolve => {
    console.log('Promise');
    resolve()
  }).then(function () {
    console.log('Promise1');
  }).then(function () {
    console.log('Promise2');
  })

  console.log("script end")

  // script start
  // async1 end
  // async2 end
  // Promise
  // script end
  // Promise1
  // Promise2
  // setTimeout

构造函数对象属性 this指向原型对象变量提升变量作用域问题 js运算优先级考察

  构造函数 对象属性 this指向 原型对象 变量提升 变量作用域问题 js运算优先级 考察
  js执行机制：先声明找var function, 后执行
  
  function Foo() {
    //Foo函数执行更改变量赋值
    getName = function () {
      console.log("1");
    };
    //this指向window
    return this;
  }
  //构造函数静态属性 getName
  Foo.getName = function () {
    console.log("2");
  };
  //构造函数原型属性 getName
  Foo.prototype.getName = function () {
    console.log("3");
  };
  //声明一个全局变量 getName
  var getName = function () {
    console.log("4");
  };
 //声明一个函数getName
  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

如何实现每执行一次函数，结果都会自增1

 //如何实现每执行一次函数，结果都会自增1
  function f() {
    var cnt = 0;
    return function () {
      return ++cnt;
    }
  }
  var fa = f(); //将函数f的的返回值给变量fn
  console.log(fa()); //1
  console.log(fa()); //2
  console.log(fa()); //3
  console.log(fa()); //4
  console.log(fa()); //5
  console.log(fa()); //6

  
  var i = 0;

  function ch() {
    return ++i;
  }
  console.log(ch())
  console.log(ch())
  console.log(ch())

JavaScript中Function和var 的预解析

JavaScript(下列简称JS)的预解析主要有函数参数，函数声明，var变量的声明。JS中语句执行步骤为：
1.自身函数参数
2.函数声明
3.var变量
4.其他语句的执行。
接下来，我们将具体看看代码的体现：

  function b() {
    console.log(a); // function
    var a = 10;

    function a() {}
    a = 100;
    console.log(a); // 100
  }
  b();

  (function (num) {
    console.log(num); //100
    var num;
    console.log(num); //100
  })(100);

  (function (num) {
    console.log(num); // function
    var num;

    console.log(num); // function
    function num() {};
  })();

具体执行过程为：
**1.执行函数参数-->无函数参数
2.执行函数声明--> function a(){}
3.执行var 声明 --> var a;与函数声明重名，被忽略
4.执行其他语句:
console.log(a) -->function,
a = 10;
console.log(a) --> 10;**