深入理解JS原型及其扩展

JavaScript 原型与原型链:深入理解面向对象编程 我们的目的是帮助大家深入理解 JavaScript 中的原型和原型链概念,以及它们在面向对象编程中的应用。我们会从基础概念讲起,逐步深入到实际代码示例,让大家不仅知道是什么,还能明白怎么用。本文首先会介绍相关的术语,然后通过有趣的故事引入原型和原型链的概念,接着详细解释核心概念及其之间的关系,给出原理和架构的示意图。之后会介绍核心算法原理和具体操作步骤,展示数学模型和公式,通过项目实战进行代码分析。再探讨实际应用场景,推荐相关工具和资源,分析未来发展趋势与挑战。 阅读详情

相信各位一定看到过Array.prototype.slice.call(arguments,1);这样的写法。(我是清楚的记得在看函数柯里化的时候遇到的,这儿我们不讨论它)

先查slice的定义:


上面的写法和我们看到MDN的例子看起来有很大的差别,其实殊途同归。

首先,简单向大家提及一下call,apply,bind的区别:

apply:(...).apply(context,[...args]);  //绑定this之后,立即执行改变上下文之后的函数,获取结果。参数以数组形式传递

call:(...).call(context,arg1,arg2...) 绑定this之后,立即执行改变上下文呢之后的函数,获取结果。参数按函数定义的顺序排列。

bind: (...).bind(context),返回一个绑定了this之后的函数,也就说 需要手动调用。
其次,假如我们自己想在某个对象的原型对象上扩展一个方法,这儿我们以Array举例:

Array.prototype.isAllNumber=function(){  return this.every(x=>typeof x==“number”);  }

//判断一个数组里面是否全部是数字。

根据刚才call的知识点可知道:

var array=new Array(1,2,3,4,5);

array.isAllNumber() //返回true,因为原型上已经定义了这样的方法。

接下来就是,既然isAllNumber是一个函数,函数就可以调用,关键在于怎样调用。

如果直接Array.prototype.isAllNumber() 肯定是会错误的,因为在这里面this是什么呢,我们不得而知。

但是 根据call的使用场景,我们可以手动为其指定this指向。

那么 稍作修改Array.prototype.isAllNumber.call([1,2,3,4,5,6]),因为这个函数没有参数,所以只需要指定this即可。

这样跟使用new 申明数组,再调用数组的方法本质即相同了。那么我们明白了Array.prototype.slice.call(arguments,1);

其实它的意思就是[...arguments].slice(1);//  "...“是ES6的扩展运算符,arguments并不是一个真正的数组,使用这样的操作,它就变成了一个真正的数组。

于是知道这样的使用方法之后,我们便可以将一些实用的原型方法当静态方法实用了,ES5还为我们定义了以下7个方法:分别是 every,some,map,forEach,filter,reduce,reduceRight方法,具体的函数参数及用法大家可以参考MDN。

【JavaScript 中的原型链是什么?】 原型链是 JavaScript 语言设计的核心特性,理解原型链有助于:深入理解 JavaScript 对象模型掌握面向对象编程技巧编写更高效的代码避免常见的陷阱和错误随着 ES6+ 新特性的引入,虽然 class 语法让继承更加直观,但原型链仍然是 JavaScript 底层实现的基础。建议开发者:理解原型链的工作原理合理使用原型继承避免滥用原型扩展关注性能影响通过深入理解原型链,你将能够编写出更优雅、更高效的 JavaScript 代码。 阅读详情

相关推荐

Zynq裸机调试RTL8211FS网卡踩坑记:从ping不通到完美兼容的完整代码修改

本文详细记录了在Zynq平台上使用Xilinx SDK(XSDK)调试RTL8211FS网卡的完整过程,从最初的ping不通问题到最终实现完美兼容的解决方案。通过分析PHY芯片的寄存器配置差异,提供了关键代码修改和调试技巧,帮助开发者快速解决类似问题。

weixin_42550597的博客 422

JS学习笔记 - Array常用原型扩展方法

>>>取两个数组的交集 ///集合取交集 Array.intersect = function () { var result = new Array(); var obj = {}; for (var i = 0; i < arguments.length; i++) { ...

Nic的博客 654

NT35310 LCD屏的初始化与图形显示实战:从画点到UI设计的完整指南

本文详细介绍了NT35310 LCD屏的初始化与图形显示实战,从硬件配置到UI设计全流程。内容包括8080总线连接、初始化序列、基础图形绘制算法、显示优化技巧以及UI框架实现,帮助开发者快速掌握TFT-LCD驱动开发技术,适用于工业控制和智能家居等嵌入式应用场景。

table的专栏 371

JS原型模式扩展

本篇文章 主要接上篇文章 JS原型模式 1.扩展原型链 function Fn() { this.x = 100; this.y = 200; this.getY = function() { console.log(this.y); } } //扩展公有属性 Fn.prototype = { constructor: Fn, //---&...

weixin_33843409的博客 320

STM32单片机语音提示盲人拐杖整点报时夜间警示超声波测距

STM32单片机语音提示盲人拐杖整点报时夜间警示超声波测距 关键词:语音提示盲人拐杖 整点报时 超声波测距拐杖

LS840233684的博客 2047

HCIE-Datacom笔试题库

关于HCIE Datacom笔试考试题目整理!

坏坏-5的博客 612

收集JavaScript内置对象扩展原型函数1

<br />String对象的几个原型方法:<br />String.prototype.trim = function(){<br />return this.replace(/(^/s*)|(/s*$)/g, "");<br />};<br />String.prototype.ltrim = function(){<br />    return this.replace(/(^/s*)/g, "");<br />};<br />String.prototype.rtrim = function(){

felixfeng的专栏 521

AI在保险产品定价优化中的创新应用

在当今保险市场中,准确合理的产品定价是保险公司实现可持续发展的关键因素之一。传统的保险产品定价主要基于经验数据和精算模型,但这种方式往往存在数据处理效率低、对复杂风险因素考虑不足等问题。本文的目的在于深入探讨AI技术如何在保险产品定价中进行创新应用,以提高定价的准确性、效率和灵活性,更好地满足市场需求和客户个性化需求。本文的范围涵盖了AI技术在保险产品定价各个环节的应用,包括风险评估、费率计算、产品设计等方面。同时,还会涉及到相关的核心算法、数学模型以及实际应用案例等内容。

欢迎来到我的优快云空间!这里聚焦AI大模型应用实战,分享前沿技术、实战案例与开发经验。 983

JS 拓展对象原型方法的正确姿势

一、为什么要拓展原型对象方法    我们在平时的项目工作中,虽然很多的时候很多方法都有我们的第三方库件或者定义类已经完全可以满足我们的方法需求,但是有的时候由于需求或者场景的需要,不得不自己手动封装一下对象原型拓展,即便如此,小编还是不太建议修改原生对象,因为如果封装不慎,就有可能会导致后续的维护问题二、不正确的封装姿势        2.1  Array.encapsulation       ...

qingzhishui的博客 3037

解决Google Play签名问题:Android App Bundle上传指南

摘要:本文分享了解决Android App Bundle上传至Google Play时遇到的签名问题的经验。当使用pepk.jar工具加密私钥时,出现"NoSuchAlgorithmException"错误。解决方案包括:确保使用JDK 11+版本、更新pepk.jar工具、验证密钥库信息,并提供详细命令行示例。通过升级开发环境和正确配置签名参数,最终成功生成加密密钥文件。文章为开发者提供了实用的技术参考,强调耐心排查问题的重要性。(149字)

m0_62153576的博客 148

神经形态芯片:IBM TrueNorth技术详解以及应用案例

2018年的一项演示中,机器人使用TrueNorth处理了复杂的路径规划,功耗仅为传统系统的1/10。它通过模仿人脑的结构,解决了传统芯片在功耗和并行性上的痛点,并在图像识别、物联网和机器人等领域展现了强大潜力。:不同于传统芯片的时钟驱动,TrueNorth是事件驱动的。例如,工厂中的振动传感器使用TrueNorth检测设备故障的早期迹象,实现了更高效的维护策略,避免了停机时间。:在医疗领域,TrueNorth可以用于可穿戴设备,比如一个智能助听器,它能过滤噪音并增强特定声音,功耗低到可以用纽扣电池供电。

远程部署调试 运行安装 项目调试 二次开发 项目技术新 持续迭代 部分源码免费分享 2477

常用string原型扩展js

/** 在字符串末尾追加字符串 **/ String.prototype.append = function (str) { return this.concat(str); } /** 删除指定索引位置的字符,索引无效将不删除任何字符 **/ String.prototype.deleteCharAt = function (index) { if (index = this.l

liuqiang211的专栏 3241

【Dify】36氪新闻热榜智能自动化采集与AI处理

本文介绍如何利用Dify等自动化工具实现36氪新闻热榜的智能采集与处理。通过HTTP请求节点获取数据,JSON解析节点结构化处理,AI处理节点生成智能摘要,最终格式化输出结果。工作流程包含数据获取、解析、AI摘要、文本整理和内容输出五个环节,支持批量化、定制化的新闻处理需求。该方案适用于行业监测、内容创作、舆情管理等场景,显著提升信息获取效率,实现"所需即得"的自动化新闻服务。系统采用OpenAI GPT和Dify API作为核心模型,无需复杂人工干预即可完成全流程处理。

Mr数据杨 601

js function myfun(){} var myfun =function(){} 区别

函数的几种定义方式: myfun:function(){} myfun = function(){} function myfun(){} var myfun =function(){} myfun.prototype.myfunPro = function (){} 这几种方法每一个都有不一样的作用。 1.myfun:function(){} 这个是必须写在

hp420的博客 2537

SAP B1中文培訓教材_SDK

公司内部培训资料,对开发工具 ,DIAPI, UIAPI,Add-ON有详细解说

STM32F407中文手册

STM32f407中文手册 本参考手册面向应用开发人员,提供有关使用 STM32F405xx/07xx、STM32F415xx/17xx、 STM32F42xxx 和 STM32F43xxx 微控制器存储器与外设的完整信息。STM32F405xx/07xx、STM32F415xx/17xx、STM32F42xxx 和 STM32F43xxx 构成一个微 控制器系列,各产品具有不同的存储器大小、封装和外设。有关订购信息以及器件的机械与电气特性,请参见数据手册。有关 ARM Cortex™-M4F 内核的信息,请参见《Cortex™-M4F 技术参考手册》。

【JavaScript高级2】构造函数实例对象和原型对象的三角关系,以及查找机制不来了解一下?

本文章主要内容是原型对象、原型链、原型对象中this指向问题,ES6新增的数组方法等内容

qq_44588612的博客 885

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。,新界面,新视觉,

ES6学习笔记(2)

1. 构造函数和原型 1.1 概述 在典型的OOP语言中(如JAVA),都存在类的概念,类就是对象的模板,对象就是类的实例,但在ES6之前,JS中并没有引入类的概念 ES6,全称 ECMAScript 6.0 , 2015.06 发版. 在ES6之前,对象不是基于类创建的,而是用一种称为构建函数的特殊函数来定义对象和它们的特征 创建对象可以通过以下三种方式: 对象字面量 new Object() 自定义构造函数 1.2 构造函数 构造函数是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它

雨过天晴后的博客 725

js面向对象学习

JavaScript面向对象 十六、为每个对象动态添加属性或方法 功能:返回对象类型原型的引用  prototype的使用  格式:class.prototype 场景: 比如说:A写了一个类,交给B,B在使用时发现A写的类的功能有所欠缺,但是B没有权力改写A的文件,这时该怎么办? Function Person(name1,age1){ This.

976

深入理解 JavaScript 对象原型,解密原型链之谜(下)

在 JavaScript 中,对象原型是一种重要的机制,它允许对象继承其他对象的属性和方法,从而实现代码的复用和减少内存的消耗。原型链是 JavaScript 中对象继承属性和方法的一种机制,它使得我们可以共享通用的属性和方法,从而减少内存占用和提高性能。对象原型的应用场景包括:属性和方法的继承:对象原型允许我们在一个对象上添加或修改属性和方法,然后在其派生对象中继承这些属性和方法。这种机制可以减少代码的重复,提高代码的可维护性和可读性。

你若盛开,清风自来 1044

JavaScript原型与原型链:深入理解面向对象的核心机制

javaScript中原型和原型链。__proto__、protoType

Yue 929

深入理解 JavaScript 原型 (Prototype):面向对象编程的基石

JavaScript 原型机制是其面向对象编程的核心,采用基于原型的继承而非传统类继承。每个对象都有原型(Prototype),通过原型链实现属性和方法的查找与共享。ES6 的 class 语法只是原型继承的语法糖。教程详细解析了显式原型(prototype 属性)和隐式原型([[Prototype]])的协同工作机制,包括原型链的形成、继承实现方式,以及 Object.create()、class 语法等现代特性的底层原理。同时涵盖原型污染风险和防范措施,帮助开发者深入理解 JavaScript 对象模型

weixin_42107409的博客 1878

深入理解JavaScript原型继承:原理、应用与最佳实践

本文深入解析JavaScript原型继承机制,包括其底层原理、应用场景和常见问题。原型继承基于对象委托机制,通过原型链实现属性和方法的共享。文章详细介绍了使用Object.create、构造函数和ES6类创建原型对象的方法,并探讨了原型继承在方法共享、实现继承和扩展内置对象中的应用。针对原型链污染、属性继承和性能问题,提出了相应的解决方案和最佳实践,如谨慎扩展内置对象、优化原型链查找等。掌握这些知识有助于开发者更高效地利用原型继承,提升代码质量和性能。

你若盛开,清风自来 892

【JavaScript知识总结二】全方位从5个方面深入理解JS中的原型和原型链

1. 所有的引用类型(数组,对象,函数),都是具有对象特性的,即可以自由扩展属性(除了null以外) // 1.引用类型可以扩展属性 var obj = {}; obj.a = 100; // 对象属性的扩展 var arr = []; arr.a = 100; // 数组属性的扩展 function fn() { ...

小牛itbull的博客 233

JavaScript原型与原型链详解

原型(Prototype)是JavaScript中最重要的核心概念之一,它是JavaScript实现继承的基础机制。深入理解JavaScript对象模型掌握JavaScript中继承的实现方式理解内置对象(如Array、String等)的工作原理能够更好地使用和扩展JavaScript内置对象理解现代JavaScript框架和库的源码// 在学习原型前,我们可能写出这样的代码来共享方法return {age: age,return `你好,我是${this。

yk_dflkg的博客 1838

JavaScript 原型与原型链:深入理解与进阶用法

在 JavaScript 中,每个对象都有一个原型(__proto__),原型是一个对象,用于共享属性和方法。当我们访问一个对象的属性或方法时,如果对象本身没有该属性或方法,JavaScript 会沿着原型链向上查找。通过原型,我们可以创建自定义对象和方法,提高代码的复用性。// true原型是 JavaScript 中一个核心概念,通过合理使用原型,可以提高代码的复用性、灵活性和性能。

lina_mua的博客 1226

33-js-concepts中的原型继承:JavaScript面向对象编程的精髓

33-js-concepts是一个帮助开发者掌握JavaScript核心概念的优质开源项目,其中原型继承作为JavaScript面向对象编程的核心机制,是每个JavaScript开发者必须理解的关键知识点。本文将深入解析原型继承的工作原理、实际应用以及在33-js-concepts项目中的相关资源,助你轻松掌握这一JavaScript精髓。 ## 什么是JavaScript原型继承? Java

gitblog_00347的博客 1044

深入理解JavaScript原型链

深入理解JavaScript原型链

liuxinghuashao1的博客 1012
上一篇: 解决axios跨域请求出错的问题
下一篇: JS按照特定的条件对数组进行归类
遛狗的代码
博客等级 码龄11年 10粉丝 52原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值