huaqi_前端相关错题记录_2021-12-20
huaqi_前端相关错题记录_2021-12-20
- 1、flash 和 js 通过什么类如何交互？
- 2、用 js 让一个 input 的 背景颜色 变为 红色
- 3、以下js代码会输出什么？
- 4、请给出以下代码的运行结果：
- 5、有关 JavaScript 中 call() 和 apply() 方法的描述。
- 6、border: none 和 border: 0 的区别。
- 7、关于 CSS sprites
- 8、关于浏览器内核
1、flash 和 js 通过什么类如何交互？
解析：Flash提供了 ExternalInterface 接口与JavaScript通信， ExternalInterface 有两个方法，call 和 addCallback。
在flash中调用js方法，ExternalInterface.call(jsFunName, params)。jaFunName：js方法名；params：flash传递给js方法的参数。
注册flash函数用于js调用，ExternalInterface.callback(flashFunName,flashFun)。flashFunName：flash方法名；flashFun：flash方法体。
2、用 js 让一个 input 的 背景颜色 变为 红色
解析：
（1）思路
① 获取该元素。
② 通过该元素拥有的属性或方法修改元素的样式。
（2）细节
① 获取元素可以使用document.getElementById()、document.getElementByTagName()等若干方法，也可以利用元素的层级关系（父子关系、兄弟关系等）。
② 通过js改变元素样式的两个最常见的API为：style、ClassName。通过style接口，一次只能修改元素的一个样式。通过className接口，一次可以修改元素的多个样式，前提是css中已经定义了所使用类名的元素相关样式。
③ backgroundColor与background-color
在使用“.”运算符时，浏览器无法正确解析“-”符号，所以无法正常解析background-color字符串，在这种情况下，只能使用驼峰命名法表示变量。
在使用“[ ]”运算符时，“-”被浏览器理解为字符串中的内容，可以正常解析background-color字符串。
eg:
inputElement.style.backgroundColor = 'red'; // 正确
inputElement.style.background-color = 'red'; // 错误
inputElement.style["background-color"] = 'red'; // 正确
（3）表示红色的若干种方法
① 颜色名称：red
② rgb方式-百分比：rgb(100%, 0, 0)
③ rgb方式-数值：rgb(255, 0, 0)
④ 十六进制：#FF0000
⑤ 简写十六进制：#F00
3、以下js代码会输出什么？
function Foo() {
var i = 0;
return function() {
console.log(i++);
};
};
var f1 = Foo(),
f2 = Foo();
fl();
f1();
f2();
正确答案：0 1 0
解析：
（1）function是引用类型，保存在堆中；变量f1、f2保存在栈中。
（2）闭包：一个函数（产生新的作用域）定义的局部变量、子函数的作用域在函数内。一旦离开该函数，局部变量无法访问。通过返回子函数到变量f1的方法，让f1指向堆中的函数作用域，这样可以使用局部变量i。
（3）代码执行过程：
① 第一次 f1() 执行：f1 = Foo()；i = 0，return值赋值给变量f1（f1指向子函数 f1() = function(){...}，因为子函数未定义变量i，所以向上找到父函数定义的变量i），执行子函数（输出i = 0，子再自加使i = 1，覆盖父函数Foo定义的变量i值）。
② 第二次 f1() 执行：此时变量f1 仍然指向原函数Foo()，所以执行子函数 function(){...}，输出父函数Foo()定义的变量i = 1，再自加使i = 2。
③ 第一次 f2() 执行：由于f2 指向堆中新创建的Foo()函数，其余执行过程同 ①，输出i = 0。
4、请给出以下代码的运行结果：
<SCRIPT LANGUAGE="JavaScript">
var bb = 1;
function aa(bb) {
bb = 2;
alert(bb);
};
aa(bb);
alert(bb);
</SCRIPT>
正确答案：2 1
解析：
ECMA中所有函数的参数都是按值传递的
值传递：把一个值类型（亦称基本类型）传递给另一个变量时，其实是分配了一块新的存储空间，因此就本题来说，在内部改变量bb的值时，对函数外部的变量bb没有影响。
5、有关 JavaScript 中 call() 和 apply() 方法的描述。
call()和apply()都属于Function.prototype的一个方法，所以每个function实例都有call、apply属性。
call()方法和apply()方法的作用相同，区别在于接收参数的方式不同。对于call()方法来说，第一个参数的this值没有变化，变化的是其余参数都直接传递给函数。
call()传入的则是直接的参数列表。call()方法可将一个函数的对象上下文从初始的上下文改变未由 thisObj 指定的新对象。
apply()传入的是一个参数数组，也就是将多个参数组合成为一个数组传入。
以上差别如下代码做出解释：
function add(c, d){
return this.a + this.b + c + d;
};
var o = {
a: 1,
b: 3
};
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34
6、border: none 和 border: 0 的区别。
（1）效果
border-style: none; // 无边框
border-width: 0; // 边框宽度为0px
（2）性能差异
border: 0; // 浏览器对border-width、border-color进行渲染，占用内存
border: none; // 浏览器不边框进行任何渲染，不占用内存
① Chrome：
border: none; // border: initial none initial
border: 0; // border: 0 initial initial
② Firefox、360:
border: none; // border: medium none;
border: 0; // border: 0 none;
（3）浏览器兼容
IE7 不支持border: none;
W3C提示：请始终把border-style属性声明到border-color属性之前，元素必须在改变颜色之前获得边框。
7、关于 CSS sprites
（1）简介 CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中， 利用 CSS 的 “background-image”，“background- repeat”，“background-position” 的组合进行背景定位， 访问页面时避免图片载入缓慢的现象。
（2）优点
① CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因。
② CSS Sprites能减少图片的字节。
③ CSS Sprites解决了网页设计师在图片命名上的困扰，只需对一张集合的图片命名，不需要对每一个小图片进行命名，从而提高了网页制作效率。
④ CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。
（3）缺点
① 图片合并麻烦：图片合并时，需要把多张图片有序的合理的合并成一张图片，并留好足够的空间防止版块出现不必要的背景。
② 图片适应性差：在高分辨的屏幕下自适应页面，若图片不够宽会出现背景断裂。
③ 图片定位繁琐：开发时需要通过工具测量计算每个背景单元的精确位置。
④ 可维护性差：页面背景需要少许改动，可能要修改部分或整张已合并的图片，进而要改动css。在避免改动图片的前提下，又只能（最好）往下追加图片，但这样增加了图片字节。
8、关于浏览器内核
Webkit是一个开源的Web浏览器引擎，也就是浏览器的内核。Apple的Safari、Google的Chrome、Nokia S60平台的默认浏览器、Apple手机的默认浏览器、Android手机的默认浏览器均采用Webkit作为浏览器内核。2013年后，Chrome使用Webkit分支Blink内核。
Firefox使用Gecko内核。
微软的IE系列使用Trident内核。
搜狗浏览器的双核运行：所有网页（标准通用标记语言的应用超文本标记语言）由Webkit内核处理，只有银行网站使用Trident内核处理。
查看5道真题和解析
投递牛客等公司10个岗位 >