javascript - 大家来帮我看看这个程序是怎么运行的？

问题描述

问 题

        var name = "this is window"
        var a = {
            name:"this is a",
            callname:function(){
                alert(this.name)
            }
        }
        function B(){
            alert(this.name)//this is B
        }
        B.prototype.name = "this is B";
        B.prototype.callname = function(){
            alert(this.name)
        }
        B.callname = function(){
            alert(this.name)
        }
        //a.callname()
        //B.callname()
        //(new B()).callname()

最后三个分别得出的是什么值？？？

解决方案

造成你疑惑的原因有三点：
第一， 你定义的name属性，函数本身就有这么一个属性也叫name，扰乱了你对这个问题的理解。
第二， prototype没有理解好：函数的prototype中定义的属性，只有实例化（即new操作）后的对象可以用 变量.属性 的方式获取其值。
第三， this没有理解好： this指代的是调用该方法的对象

在回答你的问题前，我们先看一个例子

var function X() {};
console.log(X.name);  
// 输出 "X", 
// 任何函数都有一个叫做name的属性，其值为该函数名。

接下来一个一个拆解你的问题 （请使用Chrome浏览器的开发者工具验证）

1. B.callname() 输出什么？

   function B(){
     alert(this.name);
   }
   B.prototype.name = "this is B";
   B.callname = function(){
     alert(this.name)
   };

   B是一个函数，它的 name="B", B.callname这方方法被调用，调用者是B，那么 callname方法中的this就是指代B， B.name还记得是什么吗？ 往上看第一个例子就明白了。

   答案是  弹窗显示 B。

   你会追问，为什么不是 B.prototype.name定义的"this is B"？ 因为B的prototype中定义的属性只能被B的实例直接访问。
   你还是不信，那么请你将所有的 name 都改个名，比如 xname ，本题的答案就变为了 undefined

2. a.callname() 输出什么？

   var a = {
     name:"this is a",
     callname:function(){    
         alert(this.name);
     }
   };

   a本身就是个对象实例，它采用JSON方式定义。 以上代码相当于

   a.name = "this is a";
   a.callname = function() {
         alert(this.name);
   }

   callname的调用者是a，那么callname中的this就是a

   答案显而易见 弹窗显示  this is a
   

3. (new B()).callname() 输出什么？

   function B(){
     alert(this.name);
   }
   B.prototype.name = "this is B";
   B.callname = function(){
     alert(this.name)
   };

   首先， new B()先执行， 创建了一个匿名实例，我们暂且给他命名为b, 即 b = new B(), 函数B中的this此时被指代为 b, 然后才是依次执行B函数体内的方法alert， b.name是什么？b是个实例，它本身没有name属性， 就会去父类的prototype定义中找name，找到了 "this is B".
   然后， b.callname()执行， callname中定义的this此时指代了方法调用者b, 实例b本身没有name属性， 它会去找到父类中prototype的name属性值返回.

   答案是它会触发两次弹窗： 第一次弹窗 this is B， 第二次弹窗也是this is B
   

这篇关于javascript - 大家来帮我看看这个程序是怎么运行的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！