一篇文章 讲透彻js 的原型链

当谈到 JavaScript 的核心特性之一时,原型链无疑是其中之一。原型链是 JavaScript 对象之间关系的基础,理解它有助于更好地掌握 JavaScript 的面向对象特性。让我们深入探讨一下原型链。

1. 理解原型

在 JavaScript 中,几乎所有东西都是对象。每个 JavaScript 对象都有一个原型。原型是一个对象,其他对象可以从中继承属性和方法。新对象可以通过一个称为 prototype 的特殊属性来访问原型。当你创建一个新对象时,它会从原型继承属性和方法。

2. 构建原型链

每个对象都有一个指向它的原型的内部链接。当你试图访问对象的属性或方法时,如果该对象本身没有这些属性或方法,JavaScript 会沿着这个链接向上搜索直到找到对应的属性或方法为止。这个链条就是所谓的原型链。

3. proto 与 prototype

__proto__ 是每个 JavaScript 对象都具有的属性,它指向该对象的原型。而 prototype 是函数对象特有的属性,它指向在调用构造函数时新对象的原型。

4. 实现继承

利用原型链,JavaScript 实现了对象之间的继承。通过将一个对象的原型指向另一个对象,可以使一个对象继承另一个对象的属性和方法。

5. 经典的原型链例子

ini 复制代码
javascriptCopy code
function Animal(name) {
  this.name = name;
}

Animal.prototype.makeSound = function() {
  console.log("Some sound");
};

function Dog(name, breed) {
  Animal.call(this, name);
  this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
  console.log("Woof!");
};

const myDog = new Dog("Buddy", "Golden Retriever");
myDog.makeSound(); // Outputs: Some sound
myDog.bark(); // Outputs: Woof!

在这个例子中,Dog 函数继承了 Animal 的属性和方法。通过 Object.create() 方法,Dog 的原型被设置为一个新的 Animal 实例,这样 Dog 就可以访问 Animal 的方法,同时也能拥有自己独特的方法。

有个图很形象可以参考

结论

原型链是 JavaScript 中对象之间关系的基础,它允许对象继承和共享属性和方法。了解原型链有助于更好地利用 JavaScript 的面向对象特性,并编写出更加灵活、高效的代码。

相关推荐
前端拾光者8 分钟前
利用D3.js实现数据可视化的简单示例
开发语言·javascript·信息可视化
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
endingCode1 小时前
45.坑王驾到第九期:Mac安装typescript后tsc命令无效的问题
javascript·macos·typescript
Myli_ing2 小时前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
I_Am_Me_3 小时前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
℘团子এ3 小时前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z3 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
前端百草阁3 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜3 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
Backstroke fish3 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue