首页 > 编程语言 >JavaScript 中的原型和原型链

JavaScript 中的原型和原型链

时间:2024-11-30 18:32:13浏览次数:9  
标签:proto JavaScript Person 原型 Employee prototype myDog

JavaScript 中的原型和原型链也是一个相对较难理解透彻的知识点,下面结合详细例子来进行说明:

一、原型的概念

在 JavaScript 中,每个函数都有一个 prototype 属性,这个属性指向一个对象,这个对象就是所谓的 “原型对象”。当通过构造函数创建一个新的实例对象时,该实例对象会自动拥有一个指向构造函数原型对象的内部属性(在大多数浏览器中可以通过 proto 来访问这个内部属性,虽然它并非标准属性,但方便理解)。
例如:

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

Person.prototype.sayHello = function () {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
};

let john = new Person('John', 30);
john.sayHello(); 
// 输出:Hello, my name is John and I'm 30 years old.

在这个例子中:
首先定义了一个 Person 函数作为构造函数,用来创建 Person 类型的实例。
然后给 Person 函数的 prototype 属性添加了一个 sayHello 方法。
当通过 new Person(‘John’, 30) 创建了 john 这个实例后,john 本身并没有 sayHello 这个方法的定义,但是它可以通过内部的 proto 属性(指向 Person.prototype)找到并调用 sayHello 方法。

二、原型链的形成

当在一个对象上访问某个属性或方法时,如果该对象本身没有这个属性或方法,JavaScript 就会自动沿着它的原型链去查找。原型链就是由对象的 proto 属性连接起来的一系列对象。
继续上面的例子,假设我们有这样一个情况:

function Employee(name, age, department) {
    Person.call(this, name, age);
    this.department = department;
}

Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;

Employee.prototype.sayDepartment = function () {
    console.log(`I work in the ${this.department} department.`);
};

let jane = new Employee('Jane', 25, 'Engineering');
jane.sayHello(); 
// 输出:Hello, my name is Jane and I'm 25 years old.
jane.sayDepartment(); 
// 输出:I work in the Engineering department.

在这个例子中:
首先定义了 Employee 函数作为构造函数来创建 Employee 类型的实例,并且在构造函数内部通过 Person.call(this, name, age) 调用了 Person 构造函数,以便让 Employee 实例继承 Person 实例的 name 和 age 属性。
然后通过 Employee.prototype = Object.create(Person.prototype) 让 Employee 的原型对象继承自 Person 的原型对象,这样 Employee 实例就可以沿着原型链找到 Person 原型对象上的方法(如 sayHello)。同时,重新设置了 Employee.prototype.constructor 为 Employee,以保证构造函数的正确性。
最后给 Employee 原型对象添加了 sayDepartment 方法。
当我们在 jane(Employee 实例)上调用 sayHello 方法时,jane 本身没有 sayHello 方法,它会通过自己的 proto 属性(此时指向 Employee.prototype)找不到,就继续沿着 Employee.prototype 的 proto(因为 Employee.prototype = Object.create(Person.prototype),所以 Employee.prototype.proto 指向 Person.prototype)找到 Person.prototype 上的 sayHello 方法并调用。

三、原型链的查找顺序

为了更清楚地展示原型链的查找顺序,我们再看一个例子:

function Animal() {}
Animal.prototype.eat = function () {
    console.log('Eating...');
};

function Dog() {}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.bark = function () {
    console.log('Woof!');
};

let myDog = new Dog();
myDog.eat(); 
// 输出:Eating...
myDog.bark(); 
// 输出:Woof!

// 查看原型链
console.log(myDog.__proto__ === Dog.prototype); 
// 输出:true
console.log(myDog.__proto__.__proto__ === Animal.prototype); 
// 输出:true
console.log(myDog.__proto__.__proto__.__proto__ === Object.prototype); 
// 输出:true
console.log(myDog.__proto__.__proto__.__proto__.__proto__ === null); 
// 输出:true

在这个例子中:
定义了 Animal 函数和其原型对象上的 eat 方法。
定义了 Dog 函数,并让其原型对象继承自 Animal 原型对象,同时在 Dog 原型对象上添加了 bark 方法。
当创建了 myDog 这个 Dog 实例后,在 myDog 上调用 eat 方法时,首先 myDog 本身没有 eat 方法,它会沿着原型链查找。先通过 myDog.proto(指向 Dog.prototype)找不到,再通过 myDog.proto.proto(指向 Animal.prototype)找到并调用 eat 方法。同样,调用 bark 方法时,在 myDog 本身找不到,通过 myDog.proto 就能找到并调用。
从 myDog 的原型链可以看出,查找顺序是先在实例本身查找,然后沿着 proto 指向的对象依次查找,一直到 Object.prototype,最后 Object.prototype.proto 为 null,表示原型链的尽头。

四、原型和原型链的难点

概念的抽象性:原型和原型链涉及到对象、函数、构造函数、原型对象等多个概念的相互关系,理解起来比较抽象。例如,要清楚地区分函数的 prototype 属性和实例对象的 proto 属性,以及它们之间是如何相互作用来实现属性和方法的继承的,这对于初学者来说并不容易。
复杂的继承关系:当涉及到多层继承时,如上面例子中的 Employee 继承自 Person,再加上可能还有更多层的继承关系,要准确把握每个实例沿着原型链查找属性和方法的路径以及如何正确设置继承关系(比如通过 Object.create 等方式),这需要对原型链的机制有深入的理解。
与其他语言的差异:对于有其他编程语言背景的开发者来说,JavaScript 的原型继承方式与基于类的继承(如 Java、C++ 等)有很大的不同。在基于类的继承中,继承关系通常是通过类的定义和关键字(如 extends)来明确规定的,而 JavaScript 是通过原型和原型链这种相对更灵活但也更抽象的方式来实现继承的,所以习惯了类继承的开发者可能会觉得难以适应。
原型和原型链在 JavaScript 中是非常重要的概念,虽然理解起来有一定难度,但掌握它们对于深入理解 JavaScript 的对象系统以及编写高效、灵活的代码至关重要。

标签:proto,JavaScript,Person,原型,Employee,prototype,myDog
From: https://blog.csdn.net/qq_33158550/article/details/144147511

相关文章

  • C# mvc +angular+ $http+ web api + javascript
    下面分享在ASP.NETMVC环境中,使用angular的$http访问WebAPI,javascript可写成一个独立js代码文档,再引入MVC视图里,也可以直接写在视图内。多少内容与下2篇有得参考:C#mvc+axios+webapi+javascript https://www.cnblogs.com/insus/p/18577591asp.netmvc视图传递数据至另......
  • C# mvc +axios + web api + javascript
    2024年,是Insus.NET生命中转折的一年,许久没有更新博客了。许多网友在通讯或邮件私聊,希望在博客上更新内容,分享一些技能与通用的博文。 回归正题,在C#mvc使用javascriptaxios访问webapi。在mssqlserver创建数据表 存储过程... C#MVC程序与数据库交互,创建entity:上......
  • 学习javascript基础这一篇就够了(2024最新版)
    目录前言什么是JavaScript?BOM-浏览器对象模型DOM-文档对象模型JavaScript与Java的关系JavaScript与ECMAScript的关系JavaScript能做什么?前端领域后端领域APP桌面应用图形/游戏嵌入式与IOT开发为什么要学JavaScript?学习JavaScript所需要的的环境与设备......
  • JavaScript零基础入门速通(完整)
     JavaScript(简称JS)是现代网页开发中不可或缺的编程语言之一。它为网页增加了动态交互性,是一种前端编程语言,用于处理网页上的各种用户行为,如按钮点击、表单提交、页面加载等。它的强大不仅体现在浏览器端,也可以通过Node.js在服务器端运行。本文将详细介绍JavaScript的基础......
  • JavaScript 数组方法详解与实践
    #JavaScript  #前端 在JavaScript中,数组是一个非常强大的数据结构,提供了多种内置方法来处理和操作数据。本文将详细介绍几种常用的数组方法:push(), unshift(), splice(), filter(), find(), forEach(), reverse(), map()。我们将逐一探讨它们的使用方法、测试用例......
  • JavaScript异步编程和与之相关的概念
    JavaScript中有很多具有一定难度的知识点,很难绝对地说哪一点是最难的,不过异步编程和与之相关的概念(如回调函数、Promise、async/await等)常常被认为是较难掌握的部分,下面结合例子来全方位说明一下:一、异步编程的概念及产生背景在JavaScript中,异步编程主要是为了处理那......
  • 玩转JavaScript事件委托,性能与效率双重提升
    玩转JavaScript事件委托,性能与效率双重提升前言大家好,我是倔强青铜三。是一名热情的软件工程师,我热衷于分享和传播IT技术,致力于通过我的知识和技能推动技术交流与创新,欢迎关注我,微信公众号:倔强青铜三。什么是事件委托?在现代JavaScript开发中,事件处理在使Web应用交互性和......
  • javaScript 中一起走过的那些场景
    文章目录js立即执行函数能否访问到全局变量不同网站之间的存储可以互读嘛什么是CDN深浅克隆以及特殊应用函数克隆实例JWT鉴权token放在url中行否js立即执行函数能否访问到全局变量JavaScript中的立即执行函数可以访问到全局变量。原理在JavaScript中,全局变......
  • 这些 JavaScript 编码习惯,让你最大程度提高你的项目可维护性!
    前言:因为JavaScript语言是一门极其松散、极其自由的语言,这意味着我们可以随心所欲的操作它,这是他的优点,但同时也是它的缺点。在编码过程中,我们需要一种良好的规范或者习惯来保持应用程序的一致性和可维护性。而今天我们要说的就是,怎么在日常编码中通过一些的良好的编码习惯,从你......
  • [Javascript] 等号运算符的运算和转换规则
    ==从上到下按照规则比较,直到能够得到确切结果为止:1.两端存在NaN,返回false2.undefined和null只有与自身比较,或者互相比较时,才会返回true,和其他原始类型比较返回false3.两端类型相同,比较值4.两端都是原始类型,转换成数字重新比较5.一端是原始类型,一端是对象类型,把对象......