练习题 - js函数

代码贴出来

1		function Cat() {
2		  getColor = function(){ console.log(1);}
3		  return this;
4		}
5		Cat.getColor = function(){console.log(2);}
6		Cat.prototype.getColor = function(){console.log(3);}
7		var getColor = function(){console.log(4);}
8		function getColor() {console.log(5);}
9
10		// 输出结果
11		Cat.getColor();
12		getColor();
13		Cat().getColor();
14		getColor();
15		new Cat.getColor();
16		new Cat().getColor();
17		new new Cat().getColor();

首先我们来理理这些代码的执行顺序：

先声明

1、var getColor [7]

2、function Cat(){...} [1]

3、function getColor(){...} [8]

接下来顺序执行代码

4、Cat.getColor = function(){...} [5]

5、Cat.prototype.getColor = function(){...} [6]

6、getColor = function(){console.log(4);} [7]

7、Cat.getColor(); [11]

8、getColor(); [12]

9、Cat().getColor(); [13]

10、getColor(); [14]

11、new Cat.getColor(); [15]

12、new Cat().getColor(); [16]

13、new new Cat().getColor(); [17]

所以，

Cat.getColor() //2

∵根据4，Cat.getColor被赋值了一个function，现在执行这个function则打印出2.

【涉及对象的静态方法】

getColor() //4

∵根据6，getColor被赋值了一个function，现在执行这个function则打印出4.

【涉及变量的声明和赋值】

Cat().getColor() //1

∵这个是先运行Cat(),再点上getColor的；Cat()之后是返回this，Cat没有被实例化，所以this是window，同时因为Cat()执行之后getColor被重新赋值，所以打印出1.

【涉及函数的运行、变量作用域、this】

getColor() //1

∵前面的代码把getColor改变了，所以打印了1

【涉及变量的赋值】

new Cat.getColor();//2

这个先执行Cat.getColor()

可以这么理解：

var a = Cat.getColor;   // a = Cat.getColor = function(){console.log(2);}
new a();  //打印2

【涉及变量的赋值、对象的实例化】

new Cat().getColor();//3

这个先new Cat(),实例化了，实例化的getColor()是Cat.prototype.getColor = function(){console.log(3);}

可以这么理解：

var a = new Cat();        // 实例化Cat
a.getColor();             // 实例执行这个：Cat.prototype.getColor = function(){console.log(3)}

【涉及对象的实例化，实例的原型方法】

new new Cat().getColor();//3

这个先new Cat(),实例化了，实例化的getColor()是Cat.prototype.getColor = function(){console.log(3);}，再new

可以这么理解：

var a = new Cat();        // 实例化Cat
var b = a.getColor;       // 实例执行这个：b = Cat.prototype.getColor = function(){console.log(3)}
new b();                  // 打印3

【涉及变量的赋值，对象的实例化，实例的原型方法】