专栏首页grain先森前端-JavaScript排坑指南

前端-JavaScript排坑指南

JavaScript总是给人以惊喜,学习不止,进步不断,今天继续补充JS容易搞错的几道笔试/面试题,为了秋招继续努力,欢迎一起为秋招努力的小伙伴共勉。

”老生常错“的this与作用域相关

Q1. 下面程序的输出结果是?

var length = 10;
function fn() {
    console.log(this.length);
}

var obj = {
  length: 5,
  method: function(fn) {
    fn();
    arguments[0]();
  }
};

obj.method(fn, 1);

output:

10
2

这个我做错在第二个输出上,其实对this了解后就知道,第一个输出10应该是很显然的:虽然在程序执行时,使用了obj.method方法,让this指向了obj,但是真正的函数执行在函数体内部,也即当fn()执行的时候,this是指向window的,所以第一次执行结果是10

那么这里第二次执行arguments[0]为什么结果是2

分析下在method(fn,1)执行时,经历了什么: 首先两个参数fn1会被放入arguments中,在arguments中第一个参数就是我们传入的函数;接下来fn执行,此时this没有绑定因此指向window,输出10。 然而到了arguments[0]()这一句,相当于把arguments[0]中的第一个参数拿来执行, 效果如下:

arguments[0]()  //执行,等同于下面的
arguments.0() //当然这句话是不合法的,但是这样我们可以更清楚知道,this是指向arguments实例本身

arguments.length就是它本身的长度(arguments是一个类数组,具有length属性),因此输出2


Q2. try..catch程序的输出结果

(function () {
    try {
        throw new Error();
    } catch (x) {
        var x = 1, y = 2;
        console.log(x);
    }
    console.log(x);
    console.log(y);
})();

输出结果:

1
undefined
2

我们都知道var是在预编译阶段会有一个变量提升,这种类型很容易解决,但是当遇到在catch(x)中与已有变量重名的情况,一定要区分两者之间的关系。

用变量提升的方法,把程序重写并分析如下:

(function () {
    var x,y;  // 外部变量提升
    try {
        throw new Error();
    } catch (x/* 内部的x */) {
        x = 1; //内部的x,和上面声明的x不是一回事!!
         y = 2; //内部没有声明,作用域链向上找,外面的y
        console.log(x); //当然是1
    }
    console.log(x);  //只声明,未赋值,undefined
    console.log(y);  //就是2了
})();

这样子就很清晰,之后注意预编译的过程,把变量和函数定义进行提升后,进行分析,会清楚很多


Q3. 下面程序的输出

var x = 21;
var girl = function () {
    console.log(x);
    var x = 20;
};
girl ();

输出:

undefined

说实话,这个题目我没做错,我没做错,我没做错!

因为和Q2一样,而且还没有Q2难,一句话解释就是: 函数内部变量提升。 相当于

var x = 21;
var girl = function() {
    var x;
    console.log(x); // undefined
    x = 20;
}
}

那些诡异的边角知识

Q1. 运算符考点: 下面程序输出是什么?

console.log(1 < 2 < 3);
console.log(3 > 2 > 1);

输出:

true
flase

第一个输出结果是好理解的,主要看下第二个为什么是false

核心在于js怎么去解析<>运算符。 在JS中,这种运算符是从左向右运算的,所以3>2>1就被转换成了true>1,而true的值是1,接着比较1>1就返回false了。


Q2. typeof,下面输出结果是什么

console.log(typeof typeof 1);

答案是string

会输出string,这个题目不仅仅是typeof的考察,也是对js运算的一个考察。 在js中一般有两种操作

1、赋值操作,例如a = b 2>3之类的,上面的题目提到过,是从左向右的顺序

2、取值操作, js问内存:有没有见过这个家伙?,比如console.log(a)typeof a 都属于这个类型,是从右向左的

因此,这个题就被分解为typeof 1返回"number",注意是一个字符串。 接下来typeof "number",返回string


Q3. typeof undefined == typeof NULL输出结果是什么

首先搞清楚两点:

1、typeof undefined 输出是undefined

2、typeof null输出是object

但是,另一方面,因为js对大小写敏感,null ≠ NULL,所以``typeof NULL返回undefined`

结果是: true

Q4. 递归设计。 实现一个函数,给该函数一个DOM节点,函数访问其所有子元素(所有子元素,不仅仅是直接子元素),每次访问子元素的时候,并为其传一个callback。

访问一个DOM tree,是一个经典的深度优先搜索的算法

function Traverse(DOM,callback) {
    callback(DOM);
    var list = DOM.children;
    Array.prototype.forEach.apply(list,(item)=>{
        Traverse(item,callback); //递归
    })
}

https://github.com/forrany 作者: forrany

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 解除谷歌浏览器Chrome无法安装扩展插件的限制

    今天将谷歌浏览器升级到了最新版本,在安装扩展脚本的时候,却发现Chrome 21+系列增加了对扩展插件安装的限制, 用户只能安装谷歌浏览器(Chrome Sto...

    Enjoy233
  • Expected indentation of 10 spaces but found 20

    遇到过两次这个问题,第一次是用vue做商城时,第二次是做mpvue项目时,这是因为安装vue-cli时,直接安装了ESLint。

    honey缘木鱼
  • Dreamweaver PHP 图片上传:

    在 Dreamweaver 中,上传图片到数据可以比较容易的实现,但是上传到一个目录,需要借助于 PHP 代码来实现。我的学生大多没有 PHP 的编程经验,所以...

    Enjoy233
  • Spring Boot 配置接口 WebMvcConfigurer

    WebMvcConfigurer配置类其实是Spring内部的一种配置方式,采用JavaBean的形式来代替传统的xml配置文件形式进行针对框架个性化定制 基...

    JavaEdge
  • 详解Vue Native

    译者按: 一家叫GeekyAnts的印度公司开发了Vue Native,基于React Native实现。

    Fundebug
  • Truffle Link 的解释

    Solidity在语法层面,定义了共享库的概念,而Truffle Linker(链接器)就是在编译环节之后,将共享库和其它合约链接到一起的工具。看完这篇文章,我...

    lambeta
  • Chorme浏览器渲染MathJax时出现竖线的解决方法

    新版的Chorme浏览器在解析css时,会对其中的值进行向上取整(四舍五入),而其他浏览器不会,且Chrome较旧版本(比如Chrome 40 稳定版)也是不会...

    Enjoy233
  • 在Azure Stack上部署Kubernetes

    要参加微信课堂以及日常技术交流,请给我们发微信(微信号:markpah),请注明加入以下哪个群:

    盆盆
  • 使用Phalcon框架开发一个简易的博客系统

    最近在做Phalcon(Phalcon在英文中指的是鸟类中飞得最快的那一个物种,由于是高性能框架,借用了这个词)相关的项目,由于刚开始学习,不太熟悉,先搞一个"...

    Enjoy233
  • 聊聊flink的slot.idle.timeout配置

    flink-release-1.7.2/flink-core/src/main/java/org/apache/flink/configuration/JobM...

    codecraft

扫码关注云+社区

领取腾讯云代金券