前端每天20个灵魂拷问系列二

个人网站已上线欢迎来访 https://zihanzy.com

二十一、es5中是如何定义一个函数模块

示例 假定函数模块为Promise.js

/** * * 自定义Promise函数模块 */ (function (window){ function Promise(executor){ } //向外暴露Promsie函数 window.Promise = Promise })(window)

二十二、置换元素与非置换元素

置换元素

浏览器根据元素的标签和属性，来决定元素的具体显示内容。 例如：浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来，而如果查看(x)html代码，则看不到图片的实际内容；<input>标签的type属性来决定是显示输入框，还是单选按钮等。 (x)html中的<img>、<input>、<textarea>、<select>、<object>都是置换元素。这些元素往往没有实际的内容，即是一个空元素。

非置换元素

html 的大多数元素是不可置换元素，即其内容直接表现给用户端（如浏览器）。 例如： <label>label中的内容</label> 标签<label>是一个非置换元素，文字label中的内容”将全被显示。

二十三、观察下面代码，给出运行结果

window.data = 5 var foo = { data:6, click(){ console.log(this.data) } } var div = document.getElementById('test') div.onclick = foo.click //输出5 还是6 原因

解答 输出undefined

因为给div元素绑定事件后此时this指向了div 而div里面是没有data属性的

//打印this返回 dom ... click(){ console.log(this) } ...

二十四、观察下面代码，给运行结果 （promise、宏队列、微队列）

第一题

setTimeout(()=>{ console.log(1) },0) Promise.resolve().then(()=>{ console.log(2) }) Promise.resolve().then(()=>{ console.log(3) }) console.log(4)

运行结果为 4231 这里主要考察了宏队列与微队列 dome 事件回调、ajax回调、定时器回调属于宏队列 promise回调 mutation回调属于微队列

先执行同步代码在执行异步代码，而异步代码分为宏队列与微队列 先执行微队列在执行宏队列 **第二题 **

setTimeout(()=>{ console.log(1) },0) new Promise((resolve)=>{ console.log(2) //同步1 resolve() }).then(()=>{ console.log(3) }).then(()=>{ console.log(4) }) console.log(5) //同步2 //运行结果为 2、5、3、4、1

分析 页面加载首先执行同步代码 因此可以先得到两个结果 2、5 接下来就是宏队列与微队列了 程序先执行微队列，首先排除定时器 程序继续往下执行

... new Promise((resolve)=>{ console.log(2) //同步1 resolve() ...

这个promise会立即成功，成功的结果为undefined,当它执行成功后（promise被改变了状态）他后面的then的回调就会被放到微队列里面 此时

宏：[1] 微：[3]

接下来程序继续往下执行

... .then(()=>{ console.log(3) }).then(()=>{ console.log(4) }) ...

由于第一个then并没有被执行（promise处于padding），而是被放入了微队列所以后面的then不会被放入微队列，而是存放到callback数组里面 此时程序运行完毕 返回的结果为 2、5、3、4、1 4是3所在的回调执行完毕后才被放入微队列执行

二十五、attribute与property的区别与同步关系

解答 attribute:html标签的预定义和自定义属性 property:js原生对象的直接属性

它们之间的同步关系如下 当属性值为为非布尔类型时（如 name属性）它们之间任何一个修改都会影响另一个的变化 当属性值为布尔类型时（如checked属性）proerty修改不会同步attribute，而在property没有修改的情况下 attribute可以同步property,一旦proerty被手动修改 attribute不会同步property

基于这种特性我们得出结论 由于浏览器默认识别的是property，用户操作的也是property;所以在涉及到布尔属性操作时用property，非布尔属性操作时用attribute

二十六、观察代码给出回答问题

一、（考察执行上下文与递归）

console.log('gb:'+i) var i = 1 foo(1) function foo(i){ if(i==4){ return } console.log('fb:'+i) foo(i+1) console.log('fe'+i) } console.log('ge'+i)

1.写出运行结果

gb:undefined ge:1 fb:1 fb:2 fb:3 fe:3 fe:2 fe:1

2.整个过程产生了几个执行上下文 整个过程产生了五个执行上下文，函数四个window一个

二、（考察变量提升） 1.

function a(){ } var a console.log(typeof a) //返回 function

**2. **

if(!(b in window)){ var b = 1 } console.log(b) //返回undefined

3.

var c = 1 function c(c){ console.log(c) //函数会先创建执行上下文 } c(2) //报错'c is not a function' //上述代码实际上 var c function c(c){ console.log(c) } c = 1 c(2)

三、（考察作用域）

var x = 10 function fn(){ console.log(x) } function show(f){ var x = 20 f() } show(fn) //10

四、考察原型

var A = 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) // 返回结果：1 undefined 2,3 function F(){} Object.prototype.a = function(){ console.log('a()') } Function.prototype.b = function(){ console.log('b()') } var f = new F() f.a() //a() f.b() //没有b F.a() //a() F.b() //b()

分析 f.a() 由于自身没有方法a,所以在原型链上查找 f.__proto__=F.prototype ，F.prototype.__proto__ = Object.prototype f.b() 同理

五、考察闭包

var name = 'The Window' var object = { name:'My Object', getNameFunc:function(){ return function(){ return this.name } } } alert(object.getNameFunc()()) // The Window var name = 'The Window' var object = { name:'My Object', getNameFunc:function(){ var that = this return function(){ return that.name } } } alert(object.getNameFunc()()) // My Object function fun(n,o){ console.log(o) return { fun:function(m){ return fun(m,n) } } } var a = fun(0) //undefined a.fun(1) // 0 a.fun(2) //0 a.fun(3) //0 var b = fun(0).fun(1).fun(2).fun(3) //undefined 0 1 2 var c = fun(0).fun(1) //0 c.fun(2) //1 c.fun(3) //1

个人网站已上线欢迎来访 https://zihanzy.com