0

0

深入理解JavaScript中的继承与原型链

yulia

yulia

发布时间:2018-09-14 17:07:52

|

1397人浏览过

|

来源于php中文网

原创

这篇文章将详细讲述javascript中的继承与原型链,文字和代码全面解析,具有一定的参考价值,需要的小伙伴可以参考一下,希望可以帮助到你。

Javascript里的一切几乎都是对象,每一个对象都有一个链接到其他对象的内部属性,我们称之为prototype (原型)。原型对象自己也有自己的原型对象,以此类推,这时候原型链就出来了。如果你追踪原型链,你最终会到达原型为 null的内核 Object,这是原型链的终点。

原型链的作用是什么呢?当我们访问一个对象并不拥有的属性时,Javascript会检索原型链,直到它找到了这个属性或是原型链的终点。这个行为保证了我们可以去创建“类”与实现继承。

如果还不理解的话,没有关系,让我们在实践中理解。现在看一个Javascript最简单的例子:一个在方法对象中创建的“类”

function Animal() {}
var animal = new Animal();

 有两种方法可以让我们给这个Animal类添加属性:设置实例的属性或者添加Animal 原型。

立即学习Java免费学习笔记(深入)”;

function Animal(name) {
    // Instance properties can be set on each instance of the class
    this.name = name;
}
// Prototype properties are shared across all instances of the class. However, they can still be overwritten on a per-instance basis with the `this` keyword.
Animal.prototype.speak = function() {
    console.log("My name is " + this.name);
};
var animal = new Animal('Monty');
animal.speak(); // My name is Monty

当查看控制台Animal 对象的结构就会变得很清晰。我们可以看到 name属性是属于对象本身,而speak 则是属于Animal 原型的。

HTTPie AI
HTTPie AI

AI API开发工具

下载

现在请看一下我们是如何扩展Animal 类来创建一个Cat 类:

function Cat(name) {
    Animal.call(this, name);
}
Cat.prototype = new Animal();
var cat = new Cat('Monty');
cat.speak(); // My name is Monty

我们所做的设置Cat的原型为一个Animal 实例,所以Cat 会继承Animal的所有属性。同样的我们使用Animal.call 使用来继承Animal 的构造函数。call  是一个特殊的函数,它允许我们调用函数且在函数中指定this的值。所以当this.name在Animal 的构造函数中,Cat的名称就被设定了,而不是Animal的。

让我们一起看一下Cat 对象:

cat.png

如我们所期望的一样,Cat 对象有了自己的name 实例属性。当我们查看对象的原型我们会看到它同样继承了Animal 的name 实例属性,speak 原型属性也是如此。这就是原型链的样子,当访问 cat.name,JavaScript就会查找name实例属性,不会往下去搜索原型链。不管怎样,当我们去访问 cat.speak,JavaScript就必须往下去搜索原型链直到它发现从Animal现继承的speak 属性。

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
vlookup函数使用大全
vlookup函数使用大全

本专题整合了vlookup函数相关 教程,阅读专题下面的文章了解更多详细内容。

26

2025.12.30

金山文档相关教程
金山文档相关教程

本专题整合了金山文档相关教程,阅读专题下面的文章了解更多详细操作。

28

2025.12.30

PS反选快捷键
PS反选快捷键

本专题整合了ps反选快捷键介绍,阅读下面的文章找到答案。

25

2025.12.30

表格中一行两行的方法
表格中一行两行的方法

本专题整合了表格中一行两行的相关教程,阅读专题下面的文章了解更多详细内容。

3

2025.12.30

cpu温度过高解决方法大全
cpu温度过高解决方法大全

本专题整合了cpu温度过高相关教程,阅读专题下面的文章了解更多详细内容。

5

2025.12.30

ASCII码介绍
ASCII码介绍

本专题整合了ASCII码相关内容,阅读专题下面的文章了解更多详细内容。

31

2025.12.30

GPS是什么
GPS是什么

本专题整合了GPS相关内容,阅读专题下面的文章了解更多详细内容。

3

2025.12.30

wifi拒绝接入
wifi拒绝接入

本专题整合了wifi拒绝接入相关教程,阅读下面的文章了解更多详细方法。

9

2025.12.30

丰网速运介绍
丰网速运介绍

本专题整合了丰网速运查询入口以及相关内容,阅读专题下面的文章了解更多内容。

3

2025.12.30

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Go语言教程-全程干货无废话
Go语言教程-全程干货无废话

共100课时 | 9.4万人学习

JavaScript设计模式完整视频教程
JavaScript设计模式完整视频教程

共60课时 | 12.1万人学习

Python进阶视频教程
Python进阶视频教程

共30课时 | 7.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号