美文网首页
javascript基础笔试题

javascript基础笔试题

作者: 董董董董董董董董董大笨蛋 | 来源:发表于2019-03-08 16:19 被阅读0次

    分析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>

    相关文章

      网友评论

          本文标题：javascript基础笔试题

          本文链接：https://www.haomeiwen.com/subject/fkaqpqtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|javascript基础笔试题|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！