A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

”老生常错“的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:
102复制代码这个我做错在第二个输出上,其实对this了解后就知道,第一个输出10应该是很显然的:虽然在程序执行时,使用了obj.method方法,让this指向了obj,但是真正的函数执行在函数体内部,也即当fn()执行的时候,this是指向window的,所以第一次执行结果是10
那么这里第二次执行arguments[0]为什么结果是2?
分析下在method(fn,1)执行时,经历了什么: 首先两个参数fn和1会被放入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);})();复制代码输出结果:
1undefined2复制代码我们都知道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);复制代码输出:
trueflase复制代码第一个输出结果是好理解的,主要看下第二个为什么是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中一般有两种操作
  • 赋值操作,例如a = b 2>3之类的,上面的题目提到过,是从左向右的顺序
  • 取值操作, js问内存:有没有见过这个家伙?,比如console.log(a) typeof a 都属于这个类型,是从右向左的
因此,这个题就被分解为typeof 1返回"number",注意是一个字符串。 接下来typeof "number",返回string

Q3. typeof undefined == typeof NULL输出结果是什么首先搞清楚两点:
  • typeof undefined 输出是undefined
  • 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); //递归    })}

【转载】
作者:Vincent Ko
链接:https://juejin.im/post/5b6e60a05188251afe7bbc0e



3 个回复

倒序浏览
回复 使用道具 举报
回复 使用道具 举报
奈斯
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马