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内核处理。