H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【Web前端问题】几道比较绕的前端面试题

这是在博客园看到的几道题一直着摸不透,我重新编辑了过来。请各位大大解下思路!
原地址:http://www.cnblogs.com/rexy/p/4086186.html

第一题

var fun = function(){
    this.name = 'peter';
    return {
    name: 'jack'
    };
}

var p = new fun();
//请问p.name是:

第二题

var fun = function(){
    this.name = 'peter';

    return 'jack';    
    }

var p = new fun();
//请问p.name是:

第三题

var fun = function(){}

fun.prototype = {
    info : {
    name : 'peter',
    age : 25
    }
}

var a = new fun();
var b = new fun();

a.info.name = 'jack';
b.info.name = 'tom';

//请问a.info.name和b.info.name分别是:

第四题

var fun = function(){
    this.info = {
    name : 'peter',
    age : 25
    }
}

var a = new fun();
var b = new fun();

a.info.name = 'jack';
b.info.name = 'tom';
//请问a.info.name和b.info.name分别是:

第五题

var fun = function(){}

fun.prototype = {    
    name : 'peter',    
    age : 25    
}

var a = new fun();
var b = new fun();

a.name = 'jack';
b.name = 'tom';
//请问a.name和b.name分别是:

第六题

var fun = function(){
    this.info = {
    name : 'peter',
    age : 25
    }
}

fun.prototype = {
    info : {
    name : 'peter',
    age : 25
    }
}

var a = new fun();
var b = new fun();

a.info.name = 'jack';
b.info.name = 'tom';
//请问a.info.name和b.info.name分别是:

回答:

1,2题考察的是构造函数的返回值的问题。

每个函数都有返回值,如果使用了return语句,则返回return后跟的值,如果没有使用return,则默认返回undefined.
特别的,如果这个函数是构造函数,则默认返回this对象,如果构造函数内使用了return语句,并且return后跟的是一个对象,则这个构造函数返回的是这个对象,否则返回this.
所以1题中的p = {name: 'jack'},而2题中的p = {name: 'peter'}.


3, 4, 5, 6题都是考察prototype的知识。
以下内容我假设你知道一些面向对象的概念。

js里面,一个实例(以下都用p)的[[proto]]属性指向这个类(以下用fun)的原型,如果用等号表示指向的话就是
p.[[proto]] = fun.prototype
然后另一条规则就是,当访问一个对象a的属性时,会先检查a是否有这个属性,如果有,则返回这个属性的值,如果没有则检查a的[[proto]]是否有该属性,有则返回,无则继续检查a的[[proto]]的[[proto]]直到检查到或者[[proto]]为null为止。
注:[[proto]]是ECMAScript标准里的属性,浏览器实现的时候使用的是__proto__

所以第3题:

javascripta.info = a.__proto__.info = b.info = b.__proto__.info = fun.prototype.info = {name: 'peter', age: 25}

他们是属于引用相等,所以更改a.info.name的值时,b.info.name, fun.prototype.info的值也会跟着改变。
4,5,6 题不再累述。

回答:

1.p.namejackthis在这里指代fun,相当于fun.name = "peter";但函数的返回值覆盖了name属性,所以fun.name的值是jack

2.p.namepeter。因为p对象的name属性是peter,return jack,只是返回值,并不是属性。

3.两个都输出tom。首先你要知道原型模式的执行流程:

1.先查找构造函数实例里的属性或方法,如果有,就立即返回。
2.如果构造函数的实例没有,就去它的原型对象里找,如果有,就立即返回

看这个:

<script type="text/javascript">
    function Box(){                 
        this.name = "Bill";
    }

    Box.prototype.name = "trigkit4";//原型属性
    Box.prototype.age = "21";
    Box.prototype.run = function()//原型方法
    {  
            return this.name + this.age + 'studying';
    }

    var box1 = new Box();
    alert(box1.name);//Bill,原型里的值
    box1.name = "Lee";
    alert(box1.name);//Lee,就进原则
</script>

4 .a.info.namejackb.info.nametom。原因我想你从第三题已经得出来了。

5.a.name输出jack,b.name输出tom。原因我想你从第三题已经得出来了。

6.a.info.namejackb.info.nametom。原因我想你从第三题已经得出来了。

看看我这篇文章:http://segmentfault.com/a/1190000000662547

回答:

可以通过这个小工具,一步一步解析JS代码http://pythontutor.com/visualize.html

回答:

都是基础的一些问题:
1.原型
2.数值和引用类型的区别

这俩搞懂了就哦了

回答:

这几个问题挺好的。
不过第五个和第三个理解上有点问题。
其他的按照上面的说法都很好的理解。
这边补充一下。

var fun = function(){}

fun.prototype = {
    info : {
    name : 'peter',
    age : 25
    }
}

var a = new fun();
var b = new fun();

a.info.name = 'jack';
b.info.name = 'tom';//这句如果改成 b.info = {};b.info.name='123';这样就和第五个一样的效果了。

//请问a.info.name和b.info.name分别是:
jack , 123
b.info.name = ‘tom’; 赋值的时候并不能在b下 找到b.info 所以只能去fun.prototype中把tom赋值给fun.prototype中的name值了。
而如果b.info已经存在的情况,他就不需要去fun.prototype下去寻找和赋值了。

回答:

上面各位大神都说得很详细啦,我只有一点要补充的。看看某一个属性是实例属性还是原型对象属性,可以用obj.hasOwnProperty("property")来检测。返回 True 则是实例属性,返回 Flase 则是原型对象属性。

回答:

都是基础的一些问题:
1.原型
2.数值和引用类型的区别

本文地址:H5W3 » 【Web前端问题】几道比较绕的前端面试题

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址