你真的知道JS吗?

你真的知道JavaScript吗

    JavaScript是一门奇怪的语言,要真正掌握并不容易。废话不多说,来一个快速测试,5道题目,看看你对JavaScript是否真正掌握。准备好了吗?开始咯?

题目

No.1

if (!("a" in window)) {
    var a = 1;
}

console.log(a);

No.2

var a = 1,
    b = function a(x) {
        x && a(--x);
    };
console.log(a);

No.3

function a(x) {
    return x * 2;
}
var a;
console.log(a);

No.4

function b(x, y, a) {
    arguments[2] = 10;
    console.log(a);
}
b(1, 2, 3);

No.5

function a() {
    console.log(this);
}
a.call(null);

解析

No.1

    在浏览器环境中,全局变量都是window的一个属性,即
var a = 1 等价于 window.a = 1in操作符用来判断某个属性属于某个对象,可以是对象的直接属性,也可以是通过prototype继承的属性。
    再看题目,在浏览器中,如果没有全局变量 a ,则声明一个全局变量 a (ES5没有块级作用域),并且赋值为1。很多人会认为打印的是1。非也,大家不要忘了变量声明会被前置!什么意思呢?题目也就等价于

var a;

if (!("a" in window)) {
    a = 1;
}

console.log(a);

所以其实已经声明了变量a,只不过if语句之前值是undefined,所以if语句压根不会执行。
最后答案就是 undefined

No.2

这道题有几个需要注意的地方:

  1. 变量声明、函数声明会被前置,但是函数表达式并不会,准确说类似变量声明前置,举个栗子:

console.log('b', b); // b undefined
var b = function() {}
console.log('b', b); // b function () {}

2.具名的函数表达式的名字只能在该函数内部取到,举个例子(排除老的IE?):

var foo = function bar () {}

console.log('foo', foo); 
// foo function bar(){}

console.log('bar', bar);
// Uncaught ReferenceError: bar is not defined

    综合这两点,再看题目,最后输出的内容就为 1

No.3

函数声明会覆盖变量声明,但不会覆盖变量赋值,举个栗子简单粗暴:

function foo(){
    return 1;
}
var foo;
console.log(typeof foo);    // "function"

函数声明的优先级高于变量声明的优先级,但如果该变量foo赋值了,那结果就完全不一样了:

function foo(){
    return 1;
}
var foo = 1;
console.log(typeof foo);    // "number"

变量foo赋值以后,变量赋值初始化就覆盖了函数声明。这个需要注意
再看题目

function a(x) {
    return x * 2;
}
var a;
console.log(a); // function a(x) {...}

No.4

这题考察 arguments 对象的用法(详看?JavaScript中的arguments对象)
一般情况arguments与函数参数是动态绑定关系(为什么说是一般稍后会解释),所以很好理解,最后输出的是10

但是但是但是,我们不要忘了一个特殊情况--严格模式,在严格模式中 arguments 与相当于函数参数的一个拷贝,并没有动态绑定关系,举个栗子:

'use strict'
// 严格模式!!

function b(x, y, a) {
    arguments[2] = 10;
    console.log(a);
}
b(1, 2, 3); // 3

No.5

function a() {
    console.log(this);
}
a.call(null);

关于 a.call(null); 根据ECMAScript262规范规定:
如果第一个参数传入的对象调用者是null或者undefined的话,call方法将把全局对象(浏览器上是window对象)作为this的值。所以,不管你什么时候传入null或者 undefined,其this都是全局对象window。所以,在浏览器上答案是输出 window 对象。

但是但是但是,我们依旧不能忘记一个特殊情况--严格模式,在严格模式中,null 就是 nullundefined 就是 undefined ,举个栗子:

'use strict';
// 严格模式!!

function a() {
    console.log(this);
}
a.call(null); // null
a.call(undefined); // undefined

提醒

  1. 在浏览器中的全局对象是window,Node.js中是global;

  2. 为了使代码更加严谨与健壮,建议写JS都加上严格模式'use strict';

  3. ES6已经成为前端必备技能,呼吁大家都使用ES6,方便高效,可以使用babel把ES6转成ES5甚至ES3,尽量使用ES6推动前端的发展?

About

GitHub: ?https://github.com/microzz
个人网站: ?https://microzz.com/


前端开发
前端开发

[链接]

334 声望
148 粉丝
0 条评论
推荐阅读
Redis命令大全
title: Redis命令大全date: 2017-05-20 20:47:52tags: Redis 数据库 命令 Redis命令大全 Redis介绍     Redis是一个key-value存储系统。和Memcached类似,它支持存储的value类型相对更多,包括string(字符串)、li...

microzz1阅读 2.8k

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木140阅读 11.8k评论 10

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木60阅读 5.9k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.1k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木39阅读 7k评论 6

【关于Javascript】--- 正则表达式篇
基础知识一、元字符 {代码...} 二、量词 {代码...} 三、集合 字符类 {代码...} 四、分支 {代码...} 五、边界 开始结束 {代码...} 六、修饰符 {代码...} 七、贪婪模式和非贪婪模式js默认贪婪模式即最大可能的匹配...

Jerry35阅读 2.9k

从零搭建 Node.js 企业级 Web 服务器(二):校验
校验就是对输入条件的约束,避免无效的输入引起异常。Web 系统的用户输入主要为编辑与提交各类表单,一方面校验要做在编辑表单字段与提交的时候,另一方面接收表单的接口也要做足校验行为,通过前后端共同控制输...

乌柏木32阅读 6k评论 9

[链接]

334 声望
148 粉丝
宣传栏