面试中的js基础题

最新推荐文章于 2024-07-19 17:33:21 发布
最新推荐文章于 2024-07-19 17:33:21 发布
阅读量101 收藏 1
点赞数
文章标签： 面试 javascript ViewUI
原文链接：https://juejin.im/post/5c822590e51d453e081b0234
版权
分析BAT等大公司的一些经典前端面试题

主要关注点是JS的一些核心技术的理解和运用

相关技术点
  • 引用变量赋值传递
  • 内存分析
  • 作用域与作用域链
  • 原型与原型链
  • 变量提升与函数提升
  • 变量查找与属性查找
  • 闭包
  • this
  • IIFE
  • 定时器
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01_百度1</title>
</head>
<body>
<!--
1. 难度系数: ★★★★
2. 相关技术点:
  1). 引用变量赋值
  2). 内存分析
  3). 函数调用传参
  4). 运算符的优先级
-->
<script type="text/javascript">
/*
  // 预热一
  var obj = {n: 1}
  var obj2 = obj
  obj2.n = 2
  console.log(obj.n) // ?



  // 预热二
  function fn1(a) {
    a.n = 3
  }
  fn1(obj)
  console.log(obj.n)  // ?



  // 预热三
  function fn2(a) {
    a = {n:4}
  }
  fn2(obj)
  console.log(obj.n) // ?
*/

/************************************************/
console.log('----------------------------------')

  var a = {n: 1}
  var b = a
  a.x = a = {n: 2}

  console.log(a.n, b.n) // ? ?
  console.log(a.x, b.x) // ? ?
</script>
</body>
</html>
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02_腾讯1</title>
</head>
<body>
<!--
1. 难度系数: ★★★
2. 技术点:
  1). 作用域与作用域链
  2). 变量查找
-->
<script type="text/javascript">
  var x = 10
  function fn() {
    console.log(x)
  }
  function show(f) {
    var x = 20
    f()
  }
  show(fn) // ?
</script>
</body>
</html>
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03_美团1</title>
</head>
<body>
<!--
1. 难度系数: ★★★
2. 技术点:
  1). 作用域与作用域链
  2). 变量查找
-->
<script type="text/javascript">

  var fn = function () {
    console.log(fn)
  }
  fn() // ? function定义

  var obj = {
    fn2: function () {
      // console.log(fn2)
      // 想输出fn2属性的值
      console.log(this.fn2) // obj.fn2也行, 但比较死
    }
  }
  obj.fn2() //  ? 报错
</script>
</body>
</html>
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04_阿里1</title>
</head>
<body>
<!--
1. 难度系数: ★★★
2. 技术点:
  1). 变量提升
  2). 函数提升
  3). 预处理
-->
<script type="text/javascript">

  // 预热一
  var a = 2
  function fn() { // 预计处理:
    /*
    var a;
     console.log(a)
     a = 3
    */
    console.log(a)
    var a = 3
  }
  fn() // ?

  function fn2() { // 预计处理:
    console.log(a)
    a = 3  // a是全局变量
  }
  fn2() // ?

  // 预热二   预计处理是变量先还是函数先?  变量--->函数
  function b() {
  }
  var b
  console.log(typeof b) // ? // function

/***********************************************/


/*
 var c
 function c(c) {
 console.log(c)
 var c = 3
 }
 c = 1
 console.log(c) // 1
 c(2) //报错
 */

  var c = 1
  function c(c) {
    console.log(c)
    var c = 3
  }
  console.log(c) // ? 1
  c(2) // ?

/*
1. 收集用var声明变量
2. 收集用function声明函数
函数与变量区别: 名=函数  名=非函数
 */
</script>
</body>
</html>
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>05_腾讯2</title>
</head>
<body>
<!--
1. 难度系数: ★★★
2. 技术点:
  1). 变量提升
  2). IIFE
  3). 作用域与作用域链
  4). 变量查找
-->
<script type="text/javascript">
  var name = 'World!'
  ;(function () {
    /*
     var name
     .....
     */
    if (typeof name === 'undefined') {
      var name = 'Jack'
      console.log(name)
    } else {
      console.log(name)
    }
  })()
</script>
</body>
</html>
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>06_阿里2</title>
</head>
<body>
<!--
1. 难度系数: ★★★
2. 技术点
  1). 定时器
  2). 意外全局变量
  3). 作用域与作用域链
  4). 变量查找
-->

<script type="text/javascript">

  var a = 6
  setTimeout(function () {
    console.log(0)
    alert(a)
    a = 666
  }, 0)
  console.log(1)
  a = 66

  /*
  1 , 0 ?
   */

</script>
</body>
</html>
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>07_腾讯3</title>
</head>
<body>

<button>测试1</button>
<button>测试2</button>
<button>测试3</button>
<!--
1. 难度系数: ★★★
2. 技术点:
  1). DOM事件处理
  2). 闭包
-->
<script type="text/javascript">
  /*
   需求: 点击某个按钮, 提示"第n个"
   问题: 下面的实现代码是否正确, 如果不正确, 请正确实现
   */
  /*var btns = document.getElementsByTagName('button')
  for(var i=0,length=btns.length;i<length;i++) { // i是一个全局变量, 遍历后是3
    var btn = btns[i]
    btn.onclick = function () {
      alert('第'+(i+1)+'个')
    }
  }*/

  var btns = document.getElementsByTagName('button')
  for(var i=0,length=btns.length;i<length;i++) { // i是一个全局变量, 遍历后是3
    (function (i) {
      var btn = btns[i]
      btn.onclick = function () {
        alert('第'+(i+1)+'个')
      }
    })(i) // 使用了闭包--->内存中产生了1+3个i
  }


  function fn1() {
    var a = 2
    function fn2 () {
      a++
      console.log(a)
    }
    return fn2
  }
  var f = fn1()
  f()
  f()



</script>
</body>

</html>
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>08_阿里3</title>
</head>
<body>
<!--
1. 难度系数: ★★★
2. 技术点:
  1). this
  2). 闭包
-->
<script type="text/javascript">
  var name = "A"
  var object = {
    name: "B",
    getNameFunc: function () {
      return function () {
        return this.name  // this是谁?  window
      }
    }
  }
  console.log(object.getNameFunc()())  //?  A


  var name2 = "A"
  var object2 = {
    name2: "B",
    getNameFunc: function () {
      var that = this  // 缓存this ? object2
      return function () {
        return that.name2
      }
    }
  }
  console.log(object2.getNameFunc()()) //?   B

</script>
</body>
</html>
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>09_百度2</title>
</head>
<body>

<!--
1. 难度系数: ★★★
2. 技术点:
  1). 原型与原型链
  2). 对象属性查找
-->
<script type="text/javascript">
  /*
  测试题1
   */
  function A () {
  }
  A.prototype.n = 1

  var b = new A()

  A.prototype = {
    n: 2,
    m: 3
  }
  var c = new A()

  console.log(b.n, b.m, c.n, c.m) // ? ? ? ?
</script>
</body>
</html>
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>10_京东1</title>
</head>
<body>

<!--
1. 难度系数: ★★★★
2. 技术点:
  1). 原型与原型链
  2). 实例对象,构造函数,Object, Function的关系
-->
<script type="text/javascript">
  var F = function(){}
  Object.prototype.a = function(){
    console.log('a()')
  }
  Function.prototype.b = function(){
    console.log('b()')
  }
  var f = new F()

  F.a() // ?
  F.b() // ?
  f.a() // ?
  f.b() // ?

</script>
</body>
</html>
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>11_阿里4</title>
</head>
<body>

<!--
1. 难度系数: ★★★★
2. 技术点:
  1). 变量提升
  2). this
  3). 运算符优先级
  4). 原型与原型链
  5). 全局变量污染
-->
<script type="text/javascript">

  function Person() {
    getAge = function () {
      console.log(10)
    }
    return this
  }

  Person.getAge = function () {
    console.log(20)
  }

  Person.prototype.getAge = function () {
    console.log(30)
  }

  var getAge = function () {
    console.log(40)
  }

  function getAge() {
    console.log(50)
  }


  Person.getAge() // ?
  getAge() // ?
  Person().getAge() // ?
  getAge() // ?
  new Person.getAge() // ?
  new Person().getAge() // ?

</script>
</body>
</html>
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>12_滴滴1</title>
</head>
<body>

<!--
1. 难度系数: ★★★★★
2. 技术点:
  1). 闭包
  2). 作用域与作用域链
  3). 变量查找
-->
<script type="text/javascript">
  function fun(n, o) {
    console.log(o)
    return {
      fun: function (m) {
        return fun(m, n)
      }
    }
  }

  // 测试一: undefined ? ? ?
  var a = fun(0)
  a.fun(1)
  a.fun(2)
  a.fun(3)

  // 测试二: undefined ? ? ?
  var b = fun(0).fun(1).fun(2).fun(3)

  // 测试三: undefined ? ? ?
  var c = fun(0).fun(1)
  c.fun(2)
  c.fun(3)

</script>
</body>
</html>
复制代码

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

weixin_33701251
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
两道关于prototype原型链的面试题
鸭绒的博客
11-11 1159
第一道： function A() {} A.prototype.n = 1 var b = new A() A.prototype = { n: 2, m: 3, } var c = new A() console.log(b.n, b.m, c.n, c.m) 题目分析：下面图中画出了上面程序执行时，变量在内存中的状态，A.prototype最后改变了指向，但实例b仍然指向原来的地址，
这些前端基础题你能答对几道？(附答案解析)
cpythonsz的博客
06-11 408
在三大框架盛行的时代, 基本上会个 Vue 就能在小公司浑水摸鱼。但是当想突破的时候就会意识到基础的重要性。 JavaScript 中有很多重要特性及概念。比如原型,原型链,this,闭包,作用域,隐式转换等等。如果不能熟练掌握,在进阶中级前端开发工程师的道路上必定是困难重重。 用一个小时把这些题做完。检测一下你的基础掌握程度。正题 1. if(false){ var a = 1; let b = 2; } console.log(a); console.log(b); 2. var a = 1; if(t
JavaScript基础5
Nana_0408的博客
07-04 160
在读取对象属性值时有“ . ”和[ ]方法，其中，使用[ ]更加灵活，用“ . ”容易写死 例1： var obj = new object(); obj.n="123"; obj.m="hello" console.log(obj.n); console.log(obj.m); 例2： var obj = new object(); var n = "123"; var m = "hello";...
深入学习javascript函数系列之一——函数概述
arthur的博客
03-30 345
目前对编程函数的理解只是停留在函数可以执行一些操作，虽说也能写出一些方法，但是缺少系统的认识，今天先初步深入一下，虽说也不能完全理解，总归是比以前有了更进一步的认识。相信不断的深入，会有更多的收获。函数的定义总共有3中函数的定义：1：函数声明使用function关键字，后面接上参数和函数体，function funcname([arg1 [,arg2 [...,argn]]]){ state
js深拷贝和浅拷贝
weixin_33807284的博客
01-10 155
走在前端的大道上 本篇将自己读过的相关文章中，对自己有启发的章节片段总结在这（会对原文进行删改）,会不断丰富提炼总结更新。 浅拷贝 var m = { a: 10, b: 20 } var n = m; n.a = 15; // 这时m.a的值是多少 m.a会输出15，因为这是浅拷贝，n和m指向的是同一个堆，对象复制只是复制的对象的引用。...
js 基础测试题
weixin_30367543的博客
01-25 1413
智能社javascript基础题测试姓名：________目前学过的获取元素的方式有哪些？并说出是通过什么获取的？获取出来几个？Answer:Document.getElementById();获取一个；Document.getELementsByTagName()//获取多个；Document.getELementsByClassName();//获取多个；简单写出一个div层垂直水平居中的代码...
JS进阶 九——面试题
weixin_44154094的博客
02-15 181
抛出两个问题 1.1 function A () { } A.prototype.n = 1 var b = new A() A.prototype = { n: 2, m: 3 } var c = new A() console.log(b.n, b.m, c.n, c.m) 1.2 function F (){} Object.prototype.a = function(){ console.log('a()') } F
前端面试题---3
ajiyi的博客
03-17 110
1、keep-alive 标签用法 用来缓存组件,避免多次加载相应的组件,减少性能消耗 参考：https://blog.csdn.net/Uncle_long/article/details/79656880 2、node.js 3、DOM 5、AJAX了解 6、HTTP协议 《HTTP指南》 7、异步处理 8、vue嵌jQuery 9、let,var,...
关于原型 /原型链/ 继承/ 的面试题
AnlanJion的博客
06-14 1340
                                不说废话了，直接上代码function Foo(){ getName=funtion(){ alert(1) } return this; } Foo.getName=function(){ alert(2) } Foo.prototype.getName=function(){ alret(3) } var getName=fun...
js学习-day05
weixin_30462049的博客
07-12 78
对象 <!DOCTYPE html> <html> <head> <title></title> </head> <body> <!-- 对象的属性值可以是任何的数据类型，也可以是个函数 obj.sayName = function(){ 语句...
prototype原型看起来真不要太晕
Hemx的博客
03-22 267
prototype原型 我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype。它默认指向一个Object空对象(即称为: 原型对象) prototype与constructor 原型对象中有一个属性constructor, 它指向函数对象 // 此处有一个Type对象，Type的prototype -->> Type的prototype(即Ty...
JavaScript 高级（二）——函数高级（原型（prototype）、显示原型与隐式原型、原型链（隐式原型链）、原型链属性问题、探索 instanceof、变量提升与函数提升、执行上下文）
WXY19990803的博客
03-13 233
目录 1. 原型（prototype） 2. 显示原型与隐式原型 3. 原型链（隐式原型链） 4. 原型链属性问题 5. 探索 instanceof 6. 变量提升与函数提升 7. 执行上下文 8. 执行上下文栈 知识一：原型 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01_原型(prototype)</title> </h
这些前端基础题你能答对几道？(测试你的基础掌握,附答案解析[中])
ZXH0122的博客
06-14 431
第 11 题： var name = "erdong"; var object = { name: "chen", getNameFunc: function () { return function () { return this.name; } } } console.log(object.getNameFunc()()); 解析： // 输出 erdong // 复制代码object.getNameFunc()(
原型与原型链的常见面试题
热门推荐
海空的博客
10-27 1万+
//测试题1 var A=function(){} A.prototype.n=1 var b=new A() A.prototype={ n:2, m:3 } var c=new A() console.log(b.n,b.m,c.n,c.m)//1,undefined,2,3 //测试题2 var F=function(){}; Object.prototype
前端疑难题 每日一题，365天就多掌握365个知识点 查漏补缺
鸭绒的博客
08-29 1007
这个题集是关于JS一些有点深度，且容易让人犯错的题目，每日更新一道，相信你们也能从中学到知识。 1.如下代码的输出结果： console.log(1 + "2" + "2"); console.log(1 + +"2" + "2"); console.log("A" - "B" + "2"); console.log("A" - "B" + 2); 知识点：隐式强制类型转换。“+”可以进行强制类型转换，而“-”号没有。 2.下面关于块内声明函数的做法哪些是.
阿里巴巴js面试题1
森森
07-31 7351
该题难度系数: ★★★ 考查的技术点:  1). 变量提升 2). 函数提升  3). 预处理  4). 调用顺序 var c = 1; function c(c) { console.log(c); var c = 3; } c(2); 运行结果: 看到这结果有没有大吃一惊？ 我们现在来分析下
js面试题集合
qq_44473483的博客
07-28 584
各个类型的js面试题
Nacos 面试题及答案整理，最新面试题
最新发布
Miss_SunHengYang的博客
07-19 395
适用于服务细分和微服务架构中的服务分类。随着服务实例的动态增减，Nacos能够实时更新服务信息，确保服务消费者能够及时发现新的服务实例。Nacos支持服务的注册与发现，允许服务实例在Nacos中注册，并被客户端发现和调用。Nacos能够检测到服务实例的故障，并自动切换到备份的服务实例，确保服务的持续可用性。Nacos能够解析服务间的依赖关系，并在服务发现时考虑这些依赖，确保依赖服务的可用性。实现区域感知的服务发现机制，优先发现和调用同一区域内的服务，以减少跨区域调用的延迟。
Vue 面试题集锦：JS 基础知识总结
本文档总结了 Vue 相关的 37 道面试题及答案，涵盖了 JavaScript 基础知识、Vue 框架知识等多方面内容。以下是对这些问题的详细解答和知识点总结： 1. JS 中 let 和 const 有什么用？ 在现代 JavaScript 中，let ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值