原型链理解(实例分析)

这两天开始接触原型链，有点难理解，就记录了几种不同情况下的原型链查找情况。感觉大体查找情况类似，跟着console.dir打印出来的东西查找几次更有助于理解。理解各种对象的原型是基本要求。

情况一：

<script type="text/javascript">
	function Person(name,age) {
		this.name = name;
		this.age = age;
	}
	Person.say = function(){
		alert('Person的say');
	}
	Object.prototype.say = function(){
		alert('Object原型的say');
	}
	Function.prototype.say = function(){
		alert('Function原型的say');
	}	
	Function.say = function(){
		alert('Function的say');
	}
	Person.prototype.say = function() {
		alert(this.name);
	};
	let p = new Person('月初',16);
	p.say();
</script>

结果：

分析：

//p.say -> p._proto_ ->Person.prototype

情况二：

<script type="text/javascript">
	function Person(name,age) {
		this.name = name;
		this.age = age;
	}
	Person.say = function(){
		alert('Person的say');
	}
	Object.prototype.say = function(){
		alert('Object原型的say');
	}
	Function.prototype.say = function(){
		alert('Function原型的say');
	}	
	Function.say = function(){
		alert('Function的say');
	}

      // Person.prototype.say = function() {
      //       alert(this.name);
      // };

let p = new Person('月初',16);p.say();</script>

结果：

分析：

//p.say -> p._proto_ ->Person.prototype -> Person.prototype._proto_ ->Object.prototype

如果Object.prorotype.say不存在，程序会报错，因为Object.prototype不存在某属性和方法，就说明真的不存在次=此属性和方法。

情况三：

<script type="text/javascript">
	function Person(name,age) {
		this.name = name;
		this.age = age;
	}
	Person.say = function(){
		alert('Person的say');
	}
	Object.prototype.say = function(){
		alert('Object原型的say');
	}
	Function.prototype.say = function(){
		alert('Function原型的say');
	}	
	Function.say = function(){
		alert('Function的say');
	}
	Person.prototype.say = function() {
		alert(this.name);
	};
	let p = new Person('月初',16);
	Person.say();
</script>

结果：

分析：

//Person.say 

情况四：

	function Person(name,age) {
		this.name = name;
		this.age = age;
	}
	// Person.say = function(){
	// 	alert('Person的say');
	// }
	Object.prototype.say = function(){
		alert('Object原型的say');
	}
	Function.prototype.say = function(){
		alert('Function原型的say');
	}	
	Function.say = function(){
		alert('Function的say');
	}
	Person.prototype.say = function() {
		alert(this.name);
	};
	let p = new Person('月初',16);
	Person.say();

结果：

分析：在此应该注意一个概念，构造函数原型下的属性和方法只能给他的实例化对象用，就是Person.prototype.say只能给他的实例化对象p用，而他自己的原型对象则是Function

情况五:

<script type="text/javascript">
function Person(name,age) {
	this.name = name;
	this.age = age;
}
Person.say = function(){
	 alert('Person的say');
}
Object.prototype.say = function(){
	alert('Object原型的say');
}
// Function.prototype.say = function(){
//	alert('Function原型的say');
//}	
Function.say = function(){
	alert('Function的say');
}
Person.prototype.say = function() {
	alert(this.name);
};
let p = new Person('月初',16);
Person.say();
</script>

结果:

分析：

//Person.say() -> Person._proto_ -> Function.prototype -> Function.prototype._proto_ -> Object.prototype

情况六：

<script type="text/javascript">
	function Person(name,age) {
		this.name = name;
		this.age = age;
	}
	Person.say = function(){
		alert('Person的say');
	}
	Object.prototype.say = function(){
		alert('Object原型的say');
	}
	Function.prototype.say = function(){
		alert('Function原型的say');
	}	
	Function.say = function(){
		alert('Function的say');
	}
	Person.prototype.say = function() {
		alert(this.name);
	};
	let p = new Person('月初',16);
	Function.say();
</script>

结果:

情况七：

<script type="text/javascript">
	function Person(name,age) {
		this.name = name;
		this.age = age;
	}
	Person.say = function(){
		alert('Person的say');
	}
	Object.prototype.say = function(){
		alert('Object原型的say');
	}
	Function.prototype.say = function(){
		alert('Function原型的say');
	}	
	// Function.say = function(){
	// 	alert('Function的say');
	// }
	Person.prototype.say = function() {
		alert(this.name);
	};
	let p = new Person('月初',16);
	Function.say();
</script>

结果：

分析：因为Function的原型就是Function