搜尋
首頁web前端js教程javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式_基础知识

在使用面向对象编程时,对象间的继承关系自然少不了!而原型正是实现javascript继承的很重要的一种方法!
我们首先来看以下代码:

复制代码 代码如下:

function person(name, age) {
this.name = name;
this.age = age;
}
person.prototype.getInfo = function() {
alert("My name is "+this.name+", and I have "+this.age+" years old");
}
var zhangchen = new person("zhangchen", 23);
zhangchen.getInfo(); //output My name is zhangchen, and I have 23 years old;

从运行的结果我们可以看出,通过关键字new创建的zhangchen这个对象继承了person中通过原型定义的getInfo()方法。下面我们具体来看新建的zhangchen这个对象是如何继承person对象的属性和方法的。
原型:在使用 JavaScript 的面向对象编程中,原型对象是个核心概念。在 JavaScript 中对象是作为现有示例(即原型)对象的副本而创建的,该名称就来自于这一概念。此原型对象的任何属性和方法都将显示为从原型的构造函数创建的对象的属性和方法。可以说,这些对象从其原型继承了属性和方法。当创建zhangchen对象时:
复制代码 代码如下:

var zhangchen = new company("zhangchen", 23);

zhangchen 所引用的对象将从它的原型继承属性和方法,对象 zhangchen 的原型来自构造函数(在这里是函数 person)的属性。

在 JavaScript 中,每个函数都有名为prototype的属性,用于引用原型对象。此原型对象又有名为constructor的属性,它反过来引用函数本身。这是一种循环引用, 下图更好地说明了这种循环关系。

javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式_基础知识

图1 循环关系

现在,通过new运算符用函数(上面示例中为 person)创建对象时,所获得的对象将继承 person.prototype 的属性。在上图,可以看到 person.prototype 对象有一个回指 person 函数的构造函数属性。这样,每个 person对象(从 person.prototype 继承而来)都有一个回指 person 函数的构造函数属性。

我们可以用以下代码来验证这种循环是否正确:

复制代码 代码如下:

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

person.prototype.getInfo = function() {
alert("My name is "+this.name+", and I have "+this.age+" years old");
}
var zhangchen = new person("zhangchen", 23);
alert(zhangchen.constructor == person.prototype.constructor); //output true
alert(zhangchen.constructor == person);// output true
alert(person.prototype.isPrototypeOf(zhangchen)); //output true

以上代码中的对"isPrototypeOf()"方法的调用来自哪里呢?是来自person.prototype对象吗?不对,实际上,在 person.prototype 和 person 实例中还可以调用其他方法,比如 toString、toLocaleString 和 valueOf,但它们都不来自 person.prototype。而是来自于JavaScript 中的 Object.prototype ,它是所有原型的最终基础原型。(Object.prototype 的原型是 null。)

在以上例中,zhangchen.prototype 是对象。它是通过调用 Object 构造函数创建的(尽管它不可见)相当于执行子以下代码:
复制代码 代码如下:

zhangchen.prototype = new Object();

因此,正如 person实例继承person.prototype 一样,zhangchen.prototype 继承 Object.prototype。这使得所有 zhangchen 实例也继承了 Object.prototype 的方法和属性。

原型链:每个 JavaScript 对象都继承一个原型链,而所有原型都终止于 Object.prototype。注意,这种继承是活动对象之间的继承。它不同于继承的常见概念,后者是指在声明类时类之间的发生的继承。因此,JavaScript 继承动态性更强。它使用简单算法实现这一点,如下所示:当您尝试访问对象的属性/方法时,JavaScript 将检查该属性/方法是否是在该对象中定义的。如果不是,则检查对象的原型。如果还不是,则检查该对象的原型的原型,如此继续,一直检查到 Object.prototype。下图说明了此解析过程:

javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式_基础知识
图2 toString()方法的解析过程

从以上解析过程中,如果在对象中定义了属性/方法 X,则该对象的原型中将隐藏同名的属性/方法。例如,通过在 person.prototype 中定义 toString 方法,可以改写 Object.prototype 的 toString 方法。

再看以下代码:

复制代码 代码如下:

function person(name, age) {
this.name = name;
this.age = age;
}
person.prototype.getInfo = function() {
alert("My name is "+this.name+", and I have "+this.age+" years old");
}
var zhangchen = new person("zhangchen", 23);
var luomi = new person("luomi", 23);
zhangchen.getInfo(); // output My name is zhangchen, and I have 23 years old;
luomi.getInfo(); // output My name is luomi, and I have 23 years old;
luomi.getInfo = function() {
alert("here can rewrite the function of getInfo!");
}
luomi.getInfo(); //here can rewrite the function of getInfo!
zhangchen.getInfo(); // output My name is zhangchen, and I have 23 years old;

从运行结果可以看到,虽然person的每个实例都继承了person.prototype中的方法,但是我们也可以在实例化的对象中重新定义原型对象中的方法,而且也不会影响到其它的实例!

以上是自己对原型及原型链继承方式的认识,参考( JavaScript: 使用面向对象的技术创建高级 Web 应用程序),希望大家共同讨论!
陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
原神4.4版本新地图介绍原神4.4版本新地图介绍Jan 31, 2024 pm 06:36 PM

原神4.4版本新地图介绍,小伙伴们原神这次4.4版本也是迎来了璃月的海灯节,同时将在4.4版本推出一个新的地图区域,名为沉玉谷。根据提供的信息,沉玉谷实际上是翘英庄的一部分,但玩家更习惯称其为沉玉谷。下面就让小编来给大家介绍一下新地图吧。原神4.4版本新地图介绍4.4版本将开放璃月北部的「沉玉谷·上谷」、「沉玉谷·南陵」和「来歆山」,在「沉玉谷·上谷」已为旅行者开启传送锚点。※完成魔神任务序章·第三幕巨龙与自由之歌」后,将自动解锁该传送锚点。二、翘英庄当春日温煦的柔风再度抚过沉玉的山野,那馥郁的

什么作用域链和原型链什么作用域链和原型链Nov 13, 2023 pm 01:46 PM

作用域链和原型链是JavaScript中两个重要的概念,分别对应着作用域和继承两个核心特性:1、作用域链是JavaScript中用来管理变量访问和作用域的机制,其形成是由函数创建时所处的执行上下文环境和词法作用域决定的;2、原型链是JavaScript中实现继承的机制,基于对象之间的原型关系,当访问对象的属性或方法时,如果该对象本身没有定义,会沿着原型链向上查找。

什么是原型和原型链什么是原型和原型链Nov 09, 2023 pm 05:59 PM

原型,js中的一个对象,用于定义其他对象的属性和方法,每个构造函数都有一个prototype属性,这个属性是一个指针,指向一个原型对象,当创建新对象时,这个新对象会从其构造函数的prototype属性继承属性和方法。原型链,当试图访问一个对象的属性时,js会首先检查这个对象是否有这个属性,如果没有,那么js会转向这个对象的原型,如果原型对象也没有这个属性,会继续查找原型的原型。

Go语言与Python的性能比较:哪个更适合高性能编程?Go语言与Python的性能比较:哪个更适合高性能编程?Jan 30, 2024 am 08:13 AM

Go语言和Python是两种非常流行的编程语言,都具有各自的优势和特点。在高性能编程方面,两者也有一些不同之处。本文将对Go语言和Python进行比较,以探讨哪个更适用于高性能编程。首先,让我们来了解一下Go语言。Go语言是由谷歌公司开发的一种开源编程语言,它专注于简洁、高效和并发性。Go语言的设计目标之一是提供高性能的编程体验。它具备轻量级的协程(goro

原型和原型链有什么区别原型和原型链有什么区别Nov 09, 2023 pm 04:48 PM

原型和原型链的区别是:1、原型是每个对象都具有的属性,包含了一些共享的属性和方法,用于实现对象之间的属性和方法的共享和继承,而原型链是一种通过对象之间的原型关系来实现继承的机制,定义了对象之间的继承关系,使得对象可以共享原型对象的属性和方法;2、原型的作用是定义对象的共享属性和方法,使得多个对象可以共享同一个原型对象的属性和方法,而原型链的作用是实现对象之间的继承关系等等。

选择合适的编程语言:比较Go语言和Python,确定适用于项目需求的最佳选择选择合适的编程语言:比较Go语言和Python,确定适用于项目需求的最佳选择Jan 30, 2024 am 08:00 AM

在当今科技进步迅猛的时代,编程语言的选择变得非常关键。随着软件开发领域的不断发展,Go语言和Python成为了两个备受关注的编程语言。本文将对Go语言和Python进行对比分析,以帮助读者根据项目需求选择合适的编程语言。首先,让我们来了解一下Go语言。Go语言是由Google公司开发的一种静态编译型编程语言。它具有强大的并发处理能力和高效的垃圾回收机制,非常

这款国产免费编程工具火了!清华博士团队开发,响应延迟短、准确率高这款国产免费编程工具火了!清华博士团队开发,响应延迟短、准确率高Jan 31, 2024 pm 05:03 PM

在过去一年中,随着大模型技术的广泛应用,我们已经见证了AI如何深刻地改变着我们的工作方式。在程序编写领域,AI的介入同样将为程序员们带来前所未有的便利。近日,非十科技推出了一款基于自研代码大模型打造的AI代码助手——FittenCode,它可以帮助程序员更迅捷、更准确、更高质量地完成编码任务,大幅提升编码效率,并且向用户免费开放使用!产品官网地址:https://code.fittentech.com/FittenCode自上次发布以来迅速走红。开发团队日以继夜地工作,带来了功能、

js原型和原型链有什么作用js原型和原型链有什么作用Nov 09, 2023 pm 04:56 PM

js原型和原型链的作用是实现对象的继承,节省内存空间,并提高代码的性能和可维护性。详细介绍:1、实现对象的继承,原型和原型链允许创建一个对象,并使其继承另一个对象的属性和方法,当创建一个新的对象时,可以将其原型指向另一个对象,这样新对象就可以访问到原型对象上的属性和方法;2、节省内存和提高性能,在JavaScript中,每个对象都有一个原型,通过原型链,对象可以共享原型上等等。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。