js中的原型理解

最新推荐文章于 2025-06-12 10:47:39 发布

原创最新推荐文章于 2025-06-12 10:47:39 发布 · 537 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #原型的内存理解

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

本文详细解析了JavaScript中如何通过构造函数Person创建对象，并解释了对象如何通过原型链访问属性与方法。从构造函数到原型属性的设置，再到对象自身属性的赋值与查找过程，最后介绍了原型重写的概念及其影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以上是第一种状态：对应的js代码如下

function Person() {

}

Person函数中有一个prototype的属性指向Person的原型对象，在原型对象中有一个construct的属性指向了Person函数，所以可以通过new
Person() 来创建对象。
这里写图片描述

以上是第二种状态用过Person.prototype.name为原型设置值之后，这些属性和方法都是设置在Person的原型中的。js代码如下：

Person.prototype.name = "Leon";
Person.prototype.age = 22;
Person.prototype.say = function() {
    alert(this.name + "," + this.age);
}

这里写图片描述

第三种状态
是，当时用Person创建对象之后，会在对象中有一个prop 属性（这个属性是不能被访问的）指向了Person原型，当使用对象调用原型的时候，首先会在对象中查找是否有这个属性，如果没有在通过prop 去原型中找该属性，所以在调用p1.say()，在自己空间找不到这个方法就会去原型中寻找，找到之后完成say()方法的调用。js代码如下：

var p1 = new Person();
p1.say();
//以下方式是可以检测出p1是否有_prop_指向Person原型
alert(Person.prototype.isPrototypeOf(p1));

这里写图片描述

第四种状态，当创建了一个新的p2之后，依然会有一个prop
属性只想Person原型，之后如果有通过p2.name设置了属性之后，会在对象自己的内存空间存储name的值，当调用say法去寻找name的值时，先在自己的对象空间找到之后，就不会去原型中查找了（特别注意原型中的值是不会被替换的，仅仅只是在查找时暂时被覆盖而已）。js代码如下：

var p2 = new Person();
//在自己的内存空间赋值
p2.name = "Som";
p2.say();
//这里的name是原型中的name值
p1.say();

原型的重写模型（在new之后重写）

这里写图片描述

function Person(name, age){
}
var p1 = new Person();
Person.prototype.sayHi = {
    alert(this.name + "," + this.age);
}
Person.prototype = {
    constructor:Person,
    name:"Leno",
    age:22,
    say:function(){
        alert(this.name + "," + this.age);
    }
}
p1.sayHi();//不会报错但是name没有定义只有函数
var p2 = new Person();
p2.sayHi();//会报错，因为新创建的p2在原型重写之后没有指向原来的原型，//所以不存在sayHi()函数
p2.say();//正确的