广告
返回顶部
首页 > 资讯 > 精选 >JavaScript的原型及原型链的用法
  • 604
分享到

JavaScript的原型及原型链的用法

2023-06-02 11:06:34 604人浏览 泡泡鱼
摘要

这篇文章给大家介绍javascript的原型及原型链的用法,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。JavaScript 是世界上最流行的脚本语言。 JavaScript 是属于 WEB 的语言,它适用于 PC、笔

这篇文章给大家介绍javascript的原型及原型链的用法,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

JavaScript 是世界上最流行的脚本语言。 JavaScript 是属于 WEB 的语言,它适用于 PC、笔记本电脑、平板电脑和移动电话。 JavaScript 被设计为向 html 页面增加交互性。 许多 HTML 开发者都不是程序员,但是 JavaScript 却拥有非常简单的语法。几乎每个人都有能力将小的 JavaScript 片段添加到网页中。

原型

  • 原型的出现,就是为了解决 构造函数的缺点也就是给我们提供了一个给对象添加函数的方法不然构造函数只能给对象添加属性,不能合理的添加函数就太 LOW 了

prototype

  • 每一个函数天生自带一个成员,叫做 prototype,是一个对象空间即然每一个函数都有,构造函数也是函数,构造函数也有这个对象空间这个 prototype 对象空间可以由函数名来访问

function Person() {}

console.log(Person.prototype) // 是一个对象

  • 即然是个对象,那么我们就可以向里面放入一些东西

function Person() {}

Person.prototype.name = 'prototype'

Person.prototype.sayHi = function () {}

  • 我们发现了一个叫做 prototype 的空间是和函数有关联的并且可以向里面存储一些东西重点: 在函数的 prototype 里面存储的内容,不是给函数使用的,是给函数的每一个实例化对象使用的那实例化对象怎么使用能?

__proto__

  • 每一个对象都天生自带一个成员,叫做 __proto__,是一个对象空间即然每一个对象都有,实例化对象也是对象,那么每一个实例化对象也有这个成员这个 __proto__ 对象空间是给每一个对象使用的当你访问一个对象中的成员的时候

  • 如果这个对象自己本身有这个成员,那么就会直接给你结果如果没有,就会去 __proto__ 这个对象空间里面找,里面有的话就给你结果未完待续。。。

  • 那么这个 __proto__ 又指向哪里呢?

  • 这个对象是由哪个构造函数 new 出来的那么这个对象的 __proto__ 就指向这个构造函数的 prototype

function Person() {}

var p1 = new Person()

console.log(p1.__proto__ === Person.prototype) // true

  • 我们发现实例化对象的 __proto__ 和所属的构造函数的 prototype 是一个对象空间我们可以通过构造函数名称来向 prototype 中添加成员对象在访问的时候自己没有,可以自动去自己的 __proto__ 中查找那么,我们之前构造函数的缺点就可以解决了

  • 我们可以把函数放在构造函数的 prototype 中实例化对象访问的时候,自己没有,就会自动去 __proto__ 中找那么也可以使用了

function Person() {}

Person.prototype.sayHi = function () {

console.log('hello Person')

}

var p1 = new Person()

p1.sayHi()

  • p1 自己没有 sayHi 方法,就会去自己的 __proto__ 中查找p1.__proto__ 就是 Person.prototype我们又向 Person.prototype 中添加了 sayHi 方法所以 p1.sayHi 就可以执行了

  • 到这里,当我们实例化多个对象的时候,每个对象里面都没有方法

  • 都是去所属的构造函数的 protottype 中查找那么每一个对象使用的函数,其实都是同一个函数那么就解决了我们构造函数的缺点

function Person() {}

Person.prototype.sayHi = function () {

console.log('hello')

}

var p1 = new Person()

var p2 = new Person()

console.log(p1.sayHi === p2.sayHi)

  • p1 是 Person 的一个实例p2 是 Person 的一个实例也就是说 p1.__proto__ 和 p2.__proto__ 指向的都是 Person.prototype当 p1 去调用 sayHi 方法的时候是去 Person.prototype 中找当 p2 去调用 sayHi 方法的时候是去 Person.prototype 中找那么两个实例化对象就是找到的一个方法,也是执行的一个方法

  • 结论

  • 当我们写构造函数的时候属性我们直接写在构造函数体内方法我们写在原型上

插个小消息,也方便想学习入行成为程序员的同学,在文章下方留言即可试听课程外加领取千锋HTML5、UI交互设计、PHP、Java+云数据、大数据开发、VR/AR/Unity游戏开发python人工智能linux云计算、全栈软件测试网络安全等全部的视频学习教程

原型链

  • 我们刚才聊过构造函数了,也聊了原型那么问题出现了,我们说构造函数的 prototype 是一个对象又说了每一个对象都天生自带一个 __proto__ 属性那么 构造函数的 prototype 里面的 __proto__ 属性又指向哪里呢?

一个对象所属的构造函数

  • 每一个对象都有一个自己所属的构造函数比如: 数组

// 数组本身也是一个对象

var arr = []

var arr2 = new Array()

  • 以上两种方式都是创造一个数组我们就说数组所属的构造函数就是 Array

  • 比如: 函数

// 函数本身也是一个对象

var fn = function () {}

var fun = new Function()

  • 以上两种方式都是创造一个函数我们就说函数所属的构造函数就是 Function

constructor

  • 对象的 __proto__ 里面也有一个成员叫做 constructor这个属性就是指向当前这个对象所属的构造函数

链状结构

  • 当一个对象我们不知道准确的是谁构造的时候,我们呢就把它看成 Object 的实例化对象也就是说,我们的 构造函数 的 prototype 的 __proto__ 指向的是 Object.prototype那么 Object.prototype 也是个对象,那么它的 __proto__ 又指向谁呢?因为 Object 的 js 中的顶级构造函数,我们有一句话叫 万物皆对象所以 Object.prototype 就到顶了,Object.prototype 的 __proto__ 就是 null

原型链的访问原则

  • 我们之前说过,访问一个对象的成员的时候,自己没有就会去 __proto__ 中找接下来就是,如果 __proto__ 里面没有就再去 __proto__ 里面找一直找到 Object.prototype 里面都没有,那么就会返回 undefiend

对象的赋值

  • 到这里,我们就会觉得,如果是赋值的话,那么也会按照原型链的规则来但是: 并不是!并不是!并不是! 重要的事情说三遍赋值的时候,就是直接给对象自己本身赋值

  • 如果原先有就是修改原先没有就是添加不会和 __proto__ 有关系

总结

  • 到了这里,我们就发现了面向对象的思想模式了

  • 当我想完成一个功能的时候先看看内置构造函数有没有能给我提供一个完成功能对象的能力如果没有,我们就自己写一个构造函数,能创造出一个完成功能的对象然后在用我们写的构造函数 new 一个对象出来,帮助我们完成功能就行了

  • 比如: tab选项卡

我们要一个对象对象包含一个属性:是每一个点击的按钮对象包含一个属性:是每一个切换的盒子对象包含一个方法:是点击按钮能切换盒子的能力那么我们就需要自己写一个构造函数,要求 new 出来的对象有这些内容就好了然后在用构造函数 new 一个对象就行了。

关于JavaScript的原型及原型链的用法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

--结束END--

本文标题: JavaScript的原型及原型链的用法

本文链接: https://www.lsjlt.com/news/229834.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript的原型及原型链的用法
    这篇文章给大家介绍JavaScript的原型及原型链的用法,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。JavaScript 是世界上最流行的脚本语言。 JavaScript 是属于 web 的语言,它适用于 PC、笔...
    99+
    2023-06-02
  • 详解JavaScript的原型与原型链
    目录详解原型与原型链构造函数原型对象 访问原型设置原型检测原型prototype、__proto__、constructor之间的关系原型链原型链的作用普通对象与函数对象经...
    99+
    2022-11-13
  • javascript的原型和原型链是什么
    小编给大家分享一下javascript的原型和原型链是什么,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! ...
    99+
    2022-10-19
  • 详解JavaScript中的原型和原型链
    目录原型链图原型必备知识prototype属性(显示原型)proto属性(隐式原型)constructor属性总结 原型链图 原型必备知识 要了解原型就必须搞清三个属性:__pro...
    99+
    2022-11-12
  • JavaScript原型链及常见的继承方法
    目录原型链原型链的概念原型链的问题几种常见的继承方法盗用构造函数组合继承原型式继承寄生式继承寄生组合式继承原型链 原型链的概念 在JavaScript中,每一个构造函数都有一个原型,...
    99+
    2022-11-13
  • JavaScript 原型与原型链详情
    目录1、prototype(显式原型)2、__proto__(隐式原型)3、constructor(构造函数)4、new的原理5、原型链5.1 原型链的作用5.2 构造函数的__pr...
    99+
    2022-11-12
  • Javascript的原型和原型链你了解吗
    目录一、为什么要使用原型?怎样去理解原型的出现1、对象字面量创建对象的缺点2、工厂函数3、构造函数二、使用原型三、原型概念辨析四、原型链练习总结一、为什么要使用原型?怎样去理解原型的...
    99+
    2022-11-13
  • 彻底理解JavaScript的原型与原型链
    目录前言基础铺垫prototypecontructor属性__proto__原型链提高总结后语前言 原型与原型链知识历来都是面试中考察的重点,说难不算太难,但要完全理解还是得下一定...
    99+
    2022-11-12
  • JavaScript中的原型和原型链是什么
    这篇文章主要介绍“JavaScript中的原型和原型链是什么”,在日常操作中,相信很多人在JavaScript中的原型和原型链是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JavaScript中的原型和...
    99+
    2023-06-21
  • JavaScript原型与原型链是什么
    这篇文章主要介绍“JavaScript原型与原型链是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“JavaScript原型与原型链是什么”文章能帮助大家解决问题...
    99+
    2022-10-19
  • 带你理解JavaScript 原型原型链
    目录一、原型、原型链相等关系理解二:原型、原型链的意思何在 看完这篇文章,你会发现,原型、原型链原来如此简单!  上面经典的原型链相等图,根据下文的学习,你会轻易掌握。 一...
    99+
    2022-11-12
  • JavaScript原型与原型链深入探究使用方法
    目录原型(prototype)显示原型与隐式原型原型链原型链属性问题原型链 instanceof 使用练习原型(prototype) 每一个函数都有一个 prototype 属性,它...
    99+
    2022-11-13
    JavaScript原型链 JavaScript原型 JS原型与原型链
  • Javascript的原型和原型链是什么意思
    这篇文章主要介绍Javascript的原型和原型链是什么意思,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!一、为什么要使用原型?怎样去理解原型的出现1、对象字面量创建对象的缺点想要介绍原型,就不得不提为什么我们要使用...
    99+
    2023-06-29
  • 如何理解JavaScript中的原型与原型链
    本篇文章给大家分享的是有关如何理解JavaScript中的原型与原型链,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。原型和原型链关系贯穿Jav...
    99+
    2022-10-19
  • Javascript原型和原型链的知识点整理
    这篇文章主要讲解了“Javascript原型和原型链的知识点整理”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Javascript原型和原型链的知识点整理”...
    99+
    2022-10-19
  • JavaScript中的原型和原型链怎么理解
    这篇文章主要介绍“JavaScript中的原型和原型链怎么理解”,在日常操作中,相信很多人在JavaScript中的原型和原型链怎么理解问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大...
    99+
    2022-10-19
  • javascript中原型与原型链的示例分析
    这篇文章主要为大家展示了“javascript中原型与原型链的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“javascript中原型与原型链的示例分析...
    99+
    2022-10-19
  • javascript原型链继承的使用方法
    这篇文章主要讲解了“javascript原型链继承的使用方法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“javascript原型链继承的使用方法”吧!说明即使不自定义类型,也可以通过原型实...
    99+
    2023-06-20
  • JavaScript原型链的原理是什么
    这篇文章主要讲解了“JavaScript原型链的原理是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript原型链的原理是什么”吧!解析原型...
    99+
    2022-10-19
  • Javascript 原型与原型链深入详解
    目录前言对象原型原型链javascript中的类new的实现instanceof的实现javascript的继承总结前言 在前端这块领域,原型与原型链是每一个前端 er 必须掌握的概...
    99+
    2022-11-13
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作