js面向对象的一些小练习

今天来说一下js面向对象的小练习，废话不多说直接上练习，如果你能做出这个练习，说明你对js对象的一些知识已经很清晰了

一、代码

---

        function Foo(){
            getName = function(){
                alert(1);
            };
           return this;
        }

        Foo.getName = function (){alert(2);};
        Foo.prototype.getName=function () {alert(3);};
        var getName = function (){ alert(4);};
        function getName(){alert(5);}


// 写出下面的结果

        // 1 Foo.getName(); 
        // 2 getName(); 
        // 3 Foo().getName(); 
        // 4 new Foo.getName(); 
        // 5 new Foo().getName(); 
        // 6 new new Foo().getName(); 

怎么样你已经知道答案了么？

二、具体分析

1.Foo.getName(); 结果 弹出 2
分析：这个应该很简单，直接执行Foo.getName 函数表达式。

2.getName(); 结果 4 ，这个不难
分析：这里有一些知识点，我来详细的说一下，
① 当变量名字（没有赋值的情况下）和 函数名相同时，优先读取函数，也就是：

var getName
function getName(){alert(5);}

getName();  //结果会是5

3.Foo().getName()； 结果 1

这一块知识点比较多，我们来慢慢分析。

Foo() 函数执行完时，因为Foo()函数中返回了this, 当执行完时，Foo函数内的数据就暴露在了全局环境下，所以 返回的this 也就是Foo()指的是window,
那么你可能会说 在window下getName 函数有两个呀

getName = function(){
                alert(1);
            };

var getName = function (){ alert(4);};

为啥不弹出 4， 原因在于var声明的变量被提升了，而 没有用var声明的变量没有被提升（属于全局变量），其次，函数中如果用var 声明的变量，它的作用域是在函数内的，这里没有用var 声明getName 函数表达式，所以Foo().getName() 结果为1 ;

4.new Foo.getName(); 结果 2

这个结果不知道你有没有想对，对于这个结果首先我们需要知道 new 操作符背后做了些什么。可以看一看我以前的文章http://blog.csdn.net/webxiaoma/article/details/65937768

其实在用new 操作符创建对象时，它背后给我们做的一些工作类似于：

var obj1= (function(){
    var o={}; //创建一个新对象
    o.__proto__=obj.prototype; //将新对象的原型链指向obj的原型
    obj.call(o,"hello")  //执行obj函数，将o对象指针指向obj函数，及o拥有了obj原型的属性和方法(引用)
    return o;
})()

这里new 出来的构造函数，会继承实例的原型上边的所有属性和方法。
这里弹出来的是 2 ，的原因是
① new操作符在执行时，执行了call 函数（或者apply函数），Foo.getName() 在new 创建对象时，在其内部执行了。你这里这样写new Foo.getName 也会弹出 2；

②这里生成的构造函数是Foo.getName 的构造函数，如果你不信，可以自己手动为Foo.getName的原型添加一个属性或方法（例如： Foo.getName.prototype.name = 4;），然后让后利用创建的构造函数去访问。

var ac = new Foo.getName();   
console.log(ac.name) // 4

5.new Foo().getName(); 结果是 3；
如果你上边的结果看懂了，那么这个你将很容易明白。这里和上边的唯一区别就是 函数 Foo 加了括号，这这个区别就改变了构造函数的实例，上边构造出来的函数的实例是Foo.getName，而这个构造函数的实例是 Foo 函数。
这里 new Foo().getName(); 的写法 其实就相当于：

var a = new Foo();
a.getName();

好了以上就是我分析的过程，如果有什么错误或问题，欢迎留言。