几道前端比较绕的前端面试题

第一题

var fun = function(){
    this.name = 'peter';
    return {
    name: 'jack'
    };
} 
var p = new fun();
//请问p.name是：jack

 

第二题

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

    return'jack';    
    }

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

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

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

 

第三题（涉及到get了）

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分别是：tom  tom

第四题

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分别是：jack tom

 

第五题 （只有set）

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分别是：jack tom

关于第五题的理解：

给某个对象设置一个属性的时候，是不涉及访问该属性的。

给a设置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分别是：jack tom

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题：

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

 

不过第五个和第三个理解上有点问题。

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

 

以上摘抄网上的内容，作为自己的笔记