这两天开始接触原型链,有点难理解,就记录了几种不同情况下的原型链查找情况。感觉大体查找情况类似,跟着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>
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