javascript基础笔试题

分析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>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,271评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,275评论 2赞 380
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,151评论 0赞 336
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,550评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,553评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,559评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,924评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,580评论 0赞 257
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,826评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2赞 320
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,363评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,940评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2赞 342

推荐阅读更多精彩内容