使用this.__proto__[key]=obj[key];为什么浏览器会多多处一段输出内容

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body><script type="text/javascript">function a() {
    console.log("I'am a function.");
}
//b是实例化对象，a是构造函数
var b = new a();
//console.log(b.__proto__)var $ = function() {
extend = function(obj)
{
console.log(obj)
console.log('扩展')
for(var key in obj)
{
console.log('key');
console.log(key);

console.log('obj');
console.log(obj);
 
this.__proto__[key]=obj[key];
}
}  
return { extend : extend };  
}();  $.extend({
myFunction:function(obj)
{
console.log('我函数')  
}
})console.log('第二次')$.extend({
showScreen:function(obj)
{
console.log('展示的大屏幕')  
}
})
$.showScreen();$.myFunction();</script>
</body>
</html>

解决方案 »

  1.   

    因为_proto_属性是浏览器加出来，这个属性只是一个Object的prototype的引用。你的代码里$是个对象，也继承自Object，所以当你第一次执行$.extend的时候，等于是给Object.prototype加了一个属性。第二次调用的时候传进去的obj参数的_proto_属性里也就有了myFunction属性。而for循环会遍历出所有自身属性以及prototype中的属性，所以在第二次执行的时候，for循环执行了2次，但是由于_proto_属性一般是不可见的，所以在控制台里看不到。        for(var key in obj)
            {
                if(obj.hasOwnProperty(key)){ // 添加一个判断key是否是自身属性就可以解决这个问题。
                    console.log('key');
                    console.log(key);
                     
                    console.log('obj');
                    console.log(obj);
                  
                    this.__proto__[key]=obj[key];
                }
            }
        }