部分前端笔试题,仅供参考:
1.<canvas width="250" height="250"></canvas>有个矩形长20px,高10px,CSS中width:250px height:500px,请问这个矩形渲染出来的实际面积(A)?
A.400 B.200 C.300 D.800
解析:
画布大小和CSS中设置width:250px height:500px一致,其width和初始值比例为1:1,height和初始值比例为2:1。因此渲染出来的矩形的高度也将扩大一倍为20px,则矩形渲染出来的实际面积20X20=400。
2.代码输出?
function func(){
this.name = "Hellen";
}
console.log(typeof func.prototype);
func.prototype.getName = function(){
console.log(this.name);
}
const Obj = {};
Obj.__proto__= func.prototype;
func.call(Obj);
if(Obj.getName){
console.log("yes");
Obj.getName();
}
console.log("end");
解析:
- typeof func.prototype;func的prototype属性值为一个对象,对象的数据类型则为"object";
- Obj.__proto__= func.prototype;设置了Obj对象的__proto__属性,其值为构造函数func的prototype属性;func.call(Obj);立即调用func函数,调用函数时的this指向Obj对象。执行后Obj对象有一个"name"属性,其值为"Hellen";
- Obj.getName;由于Obj对象上没有getName属性,则会去对象的__proto__中寻找,返回一个函数,因此判断语句为真,继续向下执行;
- Obj.getName();执行getName()函数返回对象的name属性,即为"Hellen";
- 最后打印"end"。
注意: 去掉 func.call(Obj);和添加 func.call(Obj);
3.代码输出?
let a = 0;
const obj = {
a: 1,
b: function(){
console.log(this.a);
}
}
const obj1 = {
a: 2
}
const fun = obj.b;
fun();
fun.apply(obj);
fun.bind(obj1).apply(obj);
const fun1 = fun.bind(obj1);
new fun();
解析:
知识点:在ES5中,全局对象的属性与全局变量是等价的,即全局对象的属性赋值与全局变量的赋值是的等价的。未声明的全局变量自动成为全局对象window的属性。(这会导致无法在编译时报出变量未声明的错误,只有到运行的时候才知道,也在不知不觉中创建了一个全局变量。)
ES6为了改进,规定:var命令和function命令声明的全局变量,依旧是全局对象的属性;而let和const声明的全局变量,不属于全局对象的属性。
- fun();fun()直接函数调用,即作为一个独立的函数调用时,this默认绑定到window对象,而全局对象window没有a属性,因此返回undefined;
- fun.apply(obj);立即调用执行fun()方法,this指向obj对象,因此返回1;
- fun.bind(obj1).apply(obj);通过bind()方法为fun函数指定了内部的this的指向对象,这个指向对象便不会再被改变,因此返回2;
- new fun();执行new操作的时候创建一个新的对象,并且将构造函数的this指向新创建的对象,构造函数没有this.a,因此返回undefined。
4.Function prototype的原型链最终指向哪(A)?
A.Null B.Function C.Object D.Array
解析:Function.prototype.__proto__属性指向Object.prototype,Object.prototype.__proto__属性指向null