一道考察JS new 以及 instanceof 的面试题

摘要:一道面试题,考察 是否理解  new FunctionName 原理 以及 instanceof 的原理

声明:这道题目灵感来源淘宝UED部门玉伯的blog。

(1) 关于 new

大家对构造函数,估计都知道。 但是JavaScript 中的构造函数是否跟你理解中的一模一样呢?

让我们从一道面试题中,看原理:

function Dog(name) {
    this.name = name;
    Dog.prototype = {
        shout: function() { alert("I am " + this.name); }
    };
}
var dog1 = new Dog("Dog 1");
var dog2 = new Dog("Dog 2");
dog2.shout();
dog1.shout();

请问运行结果是什么?

结果如果没有出乎你的意料,建议不用在此浪费时间。

如果觉得答案有点难理解请继续……

在执行new 的时候,都做了什么:

// var dog1 = new Dog() 的等价伪代码:
var dog1 = (function(name) {
    var o = {};
    o.__proto__ = Dog.prototype; // line 2
    Dog.call(o);
 dog1.name = name;
    Dog.prototype = {/* some code */}; // line 4
    return o; // line 5
})();

我没做什么铺垫,直接将new 的过程用伪代码表示出来。发现在new 的过程也就是执行构造函数的时候做的事情是产生一个对象 并且是将原Dog 的prototype 继承了过来。

注意line 4 ,这个时候Dog的prototype 发生了改变。

这导致了一个本质的转变: dog1 instanceof Dog 这将变为false

引出这道题目的第二个知识点考察。

(2) 关于 instanceof
 
 
 结论:看隐藏的 dog1.__proto__ 属性是否等于 Dog.prototype !
 
看了这么多有趣的解释是否试试手呢?

好吧,让我们看看下面的题目:(注意由于浏览器不同,javascript脚本引擎也不同,建议至少在firefox 或者 chrome 里面来看看,当然也顺便用IE 不同版本看看)

function Bird() {}
var bird = {};
bird.__proto__ = Bird.prototype;
alert(bird instanceof Bird); // true or false?

posted on 2010-10-11 00:28 -274°C 阅读(208) 评论(0)  编辑  收藏 所属分类: web前端

只有注册用户登录后才能发表评论。


网站导航:
 

常用链接

留言簿(21)

随笔分类(265)

随笔档案(242)

相册

JAVA网站

关注的Blog

搜索

  •  

积分与排名

  • 积分 - 871686
  • 排名 - 37

最新评论