彻底理解前端原型链

简介: 【8月更文挑战第14天】彻底理解前端原型链

在JavaScript中,原型链(Prototype Chain)是一个核心概念,它定义了对象如何基于其原型继承和共享属性和方法。

一、基本概念

  1. 对象:JavaScript中的对象是一组无序的键值对集合。对象可以通过字面量方式创建({}),也可以通过构造函数创建。

  2. 构造函数:是一种特殊的函数,主要用于创建对象。构造函数的函数名通常以大写字母开头,通过new关键字调用时,会执行一系列操作来初始化新对象。

  3. prototype属性:每个函数都有一个prototype属性,它指向一个对象,这个对象默认拥有一个constructor属性,指向该函数本身。当通过new关键字创建一个实例时,这个实例会内部链接到一个原型对象,即其构造函数的prototype属性指向的对象。

  4. __proto__属性:虽然__proto__不是一个官方标准属性,但它被广泛用来表示一个对象的原型。然而,在现代JavaScript开发中,建议使用Object.getPrototypeOf()来获取对象的原型。

二、原型链的形成

当通过new关键字调用构造函数创建一个新对象时,JavaScript会执行以下步骤:

  1. 创建一个新对象。
  2. 将这个新对象的内部[[Prototype]](在ES5及以后,通常通过__proto__访问,但应使用Object.getPrototypeOf())属性链接到构造函数的prototype对象。
  3. 将构造函数的this指向这个新对象,并执行构造函数体内的代码。

例如:

function Person(name) {
   
    this.name = name;
}

Person.prototype.sayHello = function() {
   
    console.log("Hello, " + this.name);
};

const person1 = new Person("Alice");
person1.sayHello(); // 输出: Hello, Alice

在这个例子中,person1Person构造函数的一个实例。person1__proto__(或更准确地,通过Object.getPrototypeOf(person1))指向Person.prototype,后者包含一个sayHello方法。因此,person1能够继承并调用sayHello方法。

三、原型链的作用

  1. 实现继承:通过原型链,可以实现对象之间的继承,即子类可以继承父类的属性和方法。

  2. 共享属性和方法:所有通过同一构造函数创建的对象都会共享构造函数的prototype属性上的属性和方法。

四、代码演示

接下来,我们通过一个简单的例子来演示原型链:

function Animal(name) {
   
    this.name = name;
}

Animal.prototype.eat = function() {
   
    console.log(this.name + " is eating.");
};

function Dog(name) {
   
    Animal.call(this, name); // 借用构造函数继承属性
}

Dog.prototype = Object.create(Animal.prototype); // 原型链继承方法
Dog.prototype.constructor = Dog; // 修复constructor指向

Dog.prototype.bark = function() {
   
    console.log(this.name + " is barking.");
};

const dog1 = new Dog("Buddy");
dog1.eat(); // 继承自Animal的方法
dog1.bark(); // Dog特有的方法

在这个例子中,Dog通过Animal.call(this, name)继承了Animalname属性,并通过设置Dog.prototypeAnimal.prototype的一个新实例(使用Object.create),继承了Animaleat方法。然后,Dog原型上添加了bark方法。这样,Dog的实例就可以访问到从Animal继承来的属性和方法,以及自己特有的方法。

五、总结

原型链是JavaScript中一个强大的特性,它允许对象通过原型来继承属性和方法。通过深入理解原型链的工作原理,我们能够编写出更加灵活和可扩展的JavaScript代码。在上面的代码演示中,我们展示了如何通过构造函数和原型链来实现继承和属性共享。

目录
相关文章
|
6月前
|
前端开发 JavaScript C++
详解链表在前端的应用,顺便再弄懂原型和原型链!
该文章深入解析了链表在前端开发中的应用,并详细阐述了JavaScript中的原型和原型链的概念及其工作原理。
|
7月前
|
前端开发 JavaScript
前端必修之一 彻底理解原型和原型链
【8月更文挑战第2天】理解原型和原型链
112 11
|
10月前
|
前端开发 JavaScript
前端 js 经典:原型对象和原型链
前端 js 经典:原型对象和原型链
59 1
|
10月前
|
前端开发 JavaScript
【Web 前端】什么是原型链?
【4月更文挑战第22天】【Web 前端】什么是原型链?
|
10月前
|
JavaScript 前端开发
前端 JS 经典:原型和原型链
前端 JS 经典:原型和原型链
73 0
|
前端开发
前端原型和原型链构造函数的使用
前端原型和原型链构造函数的使用
100 0
|
前端开发
前端原型和原型链构造函数的使用
前端原型和原型链构造函数的使用
83 0
|
前端开发
前端学习笔记202306学习笔记第三十六天-js-原型链练习题2
前端学习笔记202306学习笔记第三十六天-js-原型链练习题2
49 0
|
前端开发
前端学习笔记202306学习笔记第三十六天-js-什么是原型链2
前端学习笔记202306学习笔记第三十六天-js-什么是原型链2
60 0
|
前端开发
前端学习笔记202306学习笔记第三十七天-js-原型链作业1
前端学习笔记202306学习笔记第三十七天-js-原型链作业1
65 0
前端学习笔记202306学习笔记第三十七天-js-原型链作业1

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    从前端视角聊聊通义灵码使用经验,如何更好地提升研发效率
  • 3
    巧用通义灵码,提升前端研发效率
  • 4
    详解智能编码在前端研发的创新应用
  • 5
    VSCode AI提效工具,通义灵码前端开发体验
  • 6
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
  • 7
    【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
  • 8
    课程预告|前端开发者如何用好通义灵码,这份实战指南请查收
  • 9
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
  • 10
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线