JavaScript，从示例理解重写原型后的指针指向

最新推荐文章于 2025-12-08 09:18:56 发布

转载最新推荐文章于 2025-12-08 09:18:56 发布 · 152 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000002788875

文章标签：

#javascript #ViewUI

本文通过实例详细解析了JavaScript中构造函数与原型对象的关系。探讨了如何通过重写原型对象来改变实例的行为，并分析了实例化过程中原型链的变化。

我们知道，调用构造函数时会为实例添加一个指向最初原型的指针，而把原型修改为另外一个对象就等于切断了构造函数与最初原型之间的联系。

怎么理解这句话，下面我们通过实例来解释下，如有不对，请指正，虚心受教。

function Person(){

}

Person.prototype.sayName=function(){
    alert("TONY");
}
var friend1=new Person();
var keys1=Object.keys(Person.prototype);

//重写原型
Person.prototype = {
         constructor:Person,
         name:"TIMY",
         age:29,
         job:"SOFT ENGINEER",
         sayName:function(){
             alert(this.name);
         }
     };

var friend2=new Person();
var keys2=Object.keys(Person.prototype);

friend1.sayName();  //TONY
friend2.sayName();  //TIMY
alert(keys1);       //sayName
alert(keys2);       //constructor,name,age,job,sayName

为什么friend1和friend2输出的结果不同，因为friend1时还没有重写，friend2时已经重写原型。

那么问题来了，这中间指针是怎么指向的？

因为在实例化的时候，firend1的原型指针指向了构造函数的原型对象，这个的原型对象只有一个sayName方法，输出的是TONY。

随后，给构造函数附上了新的原型对象，即将构造函数指向新的原型对象，但是实例friend1的原型指针依然还傻傻的指向原来的空原型对象{}

这个时候再实例化的对象friend2，就有了新的原型的sayName方法了，输出是TIMY。
其实通过Object.keys(Person.prototype)语句就看出了不同情况下原型的所有属性和方法。
重写前指向的是最初原型，只有一个sayName方法，重写后，构造函数就指向了新的原型，虽然新的原型也有sayName方法，但是注意，这已经不是之前的了，只是名字相同而已。

就酱紫滴，还在学习中。。。