Javascript之深入浅出prototype

深入了解JavaScript中的prototype

想象一下一个巨大的池塘，里面的鱼都是我们共享的。我们可以从集市买鱼回家，这些鱼就成了我们的私有财产。在JavaScript中，我们可以把这个池塘比作prototype（原型对象），池塘里我们共享的鱼则是原型中的属性和方法，而我们自己，就是对象的实例。

现在，让我们通过代码来深入理解prototype。

一、理解prototype

在JavaScript中，我们创建的每一个函数都有一个prototype属性，这个属性是一个指向对象的指针。当我们使用构造函数模式创建对象时，我们可以将对象实例中不可共享的属性及方法定义在构造函数中，而将可共享的属性及方法放在原型对象中，也就是通过函数的prototype属性指向的对象中。

例如：

```javascript

function Person(name, age) {

this.name = name;

this.age = age;

}

Person.prototype = {

sayName: function() {

console.log(this.name);

}

};

var p1 = new Person("Wind", 20);

p1.sayName(); // "Wind"

var p2 = new Person("Nic", 20);

p2.sayName(); // "Nic"

```

在这个例子中，我将name和age属性定义在构造函数中，将sayName方法定义在原型中。p1和p2对象实例各自拥有自己独立的name和age属性，但它们共享同一个sayName方法。

如果我们不用prototype，而是直接将sayName方法写在构造函数里，那么每个对象实例都会有一份自己的sayName方法，这会浪费内存。使用prototype的好处之一就是提高代码的复用性，减少内存占用。

在理解原型对象的我们还需要知道，当代码读取一个对象的属性时，会按照一条特定的路径进行搜索，这条路径就是：对象实例本身——>原型对象——>对象所继承的父类对象——>父类对象的原型……——>原型链的末端。

二、prototype的注意点

1. 不可变性：尽管prototype是共享的，但不能通过对象实例来直接修改原型中的值。也就是说，只能由对象统一修改，而不能由单个对象实例进行修改。这种不可变性对于基本类型尤为明显。例如：

```javascript

function Person() {}

Person.prototype = { num: 0 };

var p1 = new Person();

var p2 = new Person();

p1.num++; // p2的num值不变

```

但对于非基本类型（如数组或对象），情况会有所不同。在这种情况下，对原型中的对象进行修改会影响到所有使用该原型的实例。

2. 同名覆盖性：如果在对象实例中添加了一个与原型中同名的属性，那么这个属性会覆盖掉原型中的相应属性。也就是说，对象实例中的属性会优先于原型中的属性被访问。这为我们提供了在保持原型功能的为每个实例定制自己特性的能力。例如：如果我们在p1中添加一个num属性并赋值，那么访问p1的num属性时就会得到我们新赋的值，而不会去原型中寻找。而p2则不受影响。理解原型链与构造函数的交互：JavaScript中的

在JavaScript中，构造函数和原型链是创建和继承对象的重要机制。让我们深入一下这两个概念以及它们如何协同工作。

让我们从简单的对象创建开始。在JavaScript中，我们可以使用构造函数来创建一个新的对象。例如：

function Person(name) {

this.name = name;

}

通过这种方式，我们定义了一个Person构造函数，它接受一个name参数并为新创建的对象设置了一个name属性。如果我们想要为新创建的对象添加更多的属性或方法，比如年龄，我们通常会使用原型链。原型链允许我们在所有对象实例之间共享属性和方法。例如：

Person.prototype.age = 18; // 所有Person实例默认年龄为18岁

现在，当我们创建新的Person实例时，它们将自动继承这些共享的属性和方法。例如：

var p1 = new Person("Wind"); // p1具有name和age属性（从原型链继承）

var p2 = new Person("Nic"); // 同样，p2也有name和age属性

p1.age = 20; // 为p1设置特定的年龄值

console.log(p1.age); // 输出：20，因为覆盖了原型链上的值

console.log(p2.age); // 输出：18，继承了原型链上的默认值

Person.prototype = {

sayName: function() { console.log(this.name); }

}; // 定义一个新的原型方法sayName()

Person.prototype = { age: 20 }; // 切断了之前的原型链，覆盖了sayName方法，使得之前的实例无法访问这些方法了。但是此时的原型指向了旧对象，所以会产生错误。当我们再次尝试访问sayName方法时，会得到一个错误，因为原型指针不再指向包含该方法的老对象。同样的道理也适用于我们尝试访问新的属性age。我们必须谨慎使用对象字面量来定义原型链。否则，我们可能会无意中丢失之前定义的属性和方法。构造函数模型用于定义实例的特定属性，而原型模型用于定义共享的方法和属性。这允许我们在不重复代码的情况下创建多个具有相似属性和方法的对象实例。希望这篇文章能帮助你更好地理解JavaScript中的原型链和构造函数的工作原理以及它们如何协同工作。本文结束之际，感谢您的阅读和支持狼蚁SEO的每一份努力！如有更多疑问或需要进一步的，请随时联系我们！另外提醒一下：在进行前端开发时请记得关注我们的网站以获得更多有价值的技术资讯和资源哦！如果您对文章内容感兴趣或觉得对您有帮助的话请多多支持我们的网站哦！您的支持和认可是我们前进的动力！最后感谢大家的阅读和支持！接下来我们会继续为大家带来更多优质的技术文章和内容让我们一起努力提升技术能力共同追求更美好的未来！感谢您的支持！在这里需要提醒的是以上内容纯属虚构请根据自身情况选择适合的素材进行修改。在这里我们没有提及到Cambrian render的内容因此我们无法进行相关解答。再次感谢提问者的关注和信任如果您有任何其他问题或需要帮助请随时向我们提问我们将尽力解答您的问题并提供有价值的建议和信息！希望以上内容能对您有所帮助！再次感谢大家的阅读和支持谢谢！