phpstudy集成环境

 首页 > 几道比较绕的前端面试题

几道比较绕的前端面试题

这是在博客园看到的几道题一直着摸不透，我重新编辑了过来。请各位大大解下思路！
原地址：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分别是：

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

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下去寻找和赋值了。

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

这俩搞懂了就哦了

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

2.p.name是peter。因为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.name 为jack，b.info.name为tom。原因我想你从第三题已经得出来了。

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

6.a.info.name 为jack，b.info.name为tom。原因我想你从第三题已经得出来了。

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

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

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 题不再累述。

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

【热门文章】
【热门文章】