侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

五个JavaScript基础问题

Java  /  管理员 发布于 3年前   406

下面是五个关于前端相关的基础问题,但却很能体现JavaScript的基本功底。

问题1:Scope作用范围

考虑下面的代码: 

(function() {   var a = b = 5;})();console.log(b);

什么会被打印在控制台上? 

回答:

        上面的代码会打印 5。

        这个问题的诀窍是,这里有两个变量声明,但 a 使用关键字var声明的。代表它是一个函数的局部变量。与此相反,b 变成了全局变量。

        这个问题的另一个诀窍是,它没有使用严格模式 ('use strict';) 。如果启用了严格模式,代码就会引发ReferenceError的错误:b没有定义(b is not defined)。请记住,严格模式,则需要明确指定,才能实现全局变量声明。比如,你应该写:

(function() {   'use strict';   var a = window.b = 5;})();console.log(b);

 

问题2:创建“原生”(native)方法

给字符串对象定义一个repeatify功能。当传入一个整数n时,它会返回重复n次字符串的结果。例如: 

console.log('hello'.repeatify(3));

应打印 hellohellohello。 

回答:

        一个可能的实现如下所示: 

String.prototype.repeatify = String.prototype.repeatify || function(times) {   var str = '';   for (var i = 0; i < times; i++) {      str += this;   }   return str;};

        这个问题测试开发者有关JavaScript继承和prototype的知识点。这也验证了开发者是否知道该如果扩展内置对象(尽管这不应该做的)。 

        这里的另一个要点是,你要知道如何不覆盖可能已经定义的功能。通过测试一下该功能定义之前并不存在: 

String.prototype.repeatify = String.prototype.repeatify || function(times) {/* code here */};

        当你被要求做好JavaScript函数兼容时这种技术特别有用。 

 

问题3:声明提升(Hoisting)

执行这段代码,输出什么结果? 

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

回答:

        这段代码的结果是 undefined 和 2。 

        变量和函数的声明都被提前了(移到了函数的顶部),但变量不分配任何值。因此,在打印变量的时候,它在函数中存在(它被声明了),但它仍然是 undefined 。表示换句话说,上面的代码等同于以下内容:

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

 

问题4:this在JavaScript中如何工作的

下面的代码会输出什么结果?给出你的答案。 

var fullname = 'John Doe';var obj = {   fullname: 'Colin Ihrig',   prop: {      fullname: 'Aurelio De Rosa',      getFullname: function() {         return this.fullname;      }   }};console.log(obj.prop.getFullname());var test = obj.prop.getFullname;console.log(test());

回答 :

        是Aurelio De Rosa和John Doe。

        在一个函数中,this的行为,取决于JavaScript函数的调用方式和定义方式,而不仅仅是看它如何被定义的。 

        在第一个 console.log()调用中,getFullname() 被调用作为obj.prop对象的函数。所以,上下文指的是后者,函数返回该对象的fullname。与此相反,当getFullname()被分配到test变量时,上下文指的是全局对象(window)。这是因为test是被隐式设置为全局对象的属性。出于这个原因,该函数返回window的fullname,即定义在第一行的那个值。 

 

问题5:call() 和 apply()

现在让你解决前一个问题,使最后的console.log() 打印 Aurelio De Rosa。 

回答:

该问题可以通过强制使用 call() 或者 apply() 改变函数上下文。在下面我将使用call(),但在这种情况下,apply()会输出相同的结果: 

console.log(test.call(obj.prop));

 

文章来源:http://tomcat-oracle.iteye.com/blog/2147792


  • 上一条:
    java常见的ClassNotFoundException
    下一条:
    学习Spring必学的Java基础知识(5)—注解
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • java 正则表达式基础,实例学习资料收集大全 原创(0个评论)
    • java正则表达式彻底研究(0个评论)
    • java正则表达式验证函数(0个评论)
    • MVC、MVP和MVVM分别是什么(0个评论)
    • java 单例模式(饿汉模式与懒汉模式)(0个评论)
    • 近期文章
    • 如何优雅处理async await错误推荐:await-to-js库(0个评论)
    • lodash工具库(0个评论)
    • 在Laravel项目中使用中间件方式统计用户在线时长功能代码示例(0个评论)
    • 在Laravel中构建业务流程模型(0个评论)
    • windows系统中安装FFMpeg及在phpstudy环境php7.3 + php-ffmpeg扩展的使用流程步骤(0个评论)
    • 在go语言中对浮点的数组、切片(slice)进行正向排序和反向排序(0个评论)
    • 在go语言中对整数数组、切片(slice)进行排序和反向排序(0个评论)
    • 在go语言中对字符串数组、切片(slice)进行排序和反向排序(0个评论)
    • 最新国内免注册ChatGPT体验站_ChatGPT镜像站访问链接地址2023/3/28持续更新(0个评论)
    • 在Laravel项目中的实现无密码认证之:发送邮箱链接授权(0个评论)
    • 近期评论
    • 博主 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 @ xiaoB 你只管努力,剩下的叫给天意;天若有情天亦老,..
    • xiaoB 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 会不会春节放假后又阳一次?..
    • BUG4 在

      你翻墙过吗?国内使用vpn翻墙可能会被网警抓,你需了解的事中评论 不是吧?..
    • 博主 在

      go语言+beego框架中获取get,post请求的所有参数中评论 @ t1  直接在router.go文件中配就ok..
    • Jade 在

      如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..
    • 2016-11
    • 2018-03
    • 2020-03
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客