Js利用prototype自定义数组方法示例

前言

在开始之前,先给大家介绍下js中使用使用原型(prototype)定义方法的好处

经常在前端面试或是和其他同行沟通是,在谈到构造在JS定义构造函数的方法是最好使用原型的方式:将方法定义到构造方法的prototype上,这样的好处是,通过该构造函数生成的实例所拥有的方法都是指向一个函数的索引,这样可以节省内存。

而本文主要给大家介绍了关于Js利用prototype自定义数组方法的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。

题目

如何实现下列代码:

[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]

解决方法

使用array的prototype属性,自定义duplicator()方法,js代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style></style>
 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>
 <script>
 Array.prototype.duplicator = function() {
 let s = this.concat(this)
 return s
 }
 let t = [1,2,3,4,5].duplicator()
 console.log(t)
</script>

</body>
</html>

在控制台显示效果如下:

注意点

在书写这段代码时Array.prototype.duplicator注意不要添加任何括号,function 内部的this 指代调用这个方法的对象,即array.

总结

以上就是这篇文章的全部内容了,本文还有许多不足,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

时间: 2017-10-19

Javascript remove 自定义数组删除方法

复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Javascript自定义数组删除方法remove()</title> <script type="text/javascript"> Array.prototype.remove=function(dx){ if(isNaN(dx)||dx>this.lengt

JS 面向对象之神奇的prototype

JavaScript中对象的prototype属性,可以返回对象类型原型的引用.这是一个相当拗口的解释,要理解它,先要正确理解对象类型(Type)以及原型(prototype)的概念. 1 什么是prototype JavaScript中对象的prototype属性,可以返回对象类型原型的引用.这是一个相当拗口的解释,要理解它,先要正确理解对象类型(Type)以及原型(prototype)的概念. 前面我们说,对象的类(Class)和对象实例(Instance)之间是一种"创建"关系,

JavaScript自定义数组排序方法

本文实例讲述了JavaScript自定义数组排序方法.分享给大家供大家参考.具体分析如下: Array中有自带的排序功能,这个使用起来比较方便,我们有一点必须清楚,就是排序的依据,如果sort不传入参数的话,那就是按照字符编码(Unicode编码)的顺序排序. var a=["3","2","1"]; console.log(a[0].charCodeAt(0)); // 51 console.log(a[1].charCodeAt(0)); /

深入了解javascript中的prototype与继承

通常来说,javascript中的对象就是一个指向prototype的指针和一个自身的属性列表.javascript创建对象时采用了写时复制的理念.只有构造器才具有prototype属性,原型链继承就是创建一个新的指针,指向构造器的prototype属性.prototype属性之所以特别,是因为javascript时读取属性时的遍历机制决定的.本质上它就是一个普通的指针. 构造器包括: 1.Object2.Function3.Array4.Date5.String 下面我们来举一些例子吧 复制代

JavaScript prototype 使用介绍

用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访问,其它的就不清楚了,最近看了一些 JavaScript高级程序设计,终于揭开了其神秘面纱. 每个函数都有一个prototype属性,这个属性是指向一个对象的引用,这个对象称为原型对象,原型对象包含函数实例共享的方法和属性,也就是说将函数用作构造函数调用(使用new操作符调用)的时候,新创建的对象会从原型对象上继承属性和

JavaScript中的prototype使用说明

1.prototype 在JavaScript中并没有类的概念,但JavaScript中的确可以实现重载,多态,继承.这些实现其实方法都可以用JavaScript中的引用和变量作用域结合prototype来解释. 2.简单的例子 复制代码 代码如下: var Blog = function( name, url ){ this.name = name; this.url = url; }; Blog.prototype.jumpurl = ''; Blog.prototype.jump = fu

类似php的js数组的in_array函数自定义方法

PHP的数组函数in_array()非常方便,可JS就不是了.其实我很不喜欢JS的数组~ 别说了,直接上方法 复制代码 代码如下: Array.prototype.in_array = function(e) { for(i=0;i<this.length;i++) { if(this[i] == e) return true; } return false; } 或者 复制代码 代码如下: Array.prototype.in_array = function(e) { for(i=0;i<

js中继承的几种用法总结(apply,call,prototype)

一,js中对象继承 js中有三种继承方式 1.js原型(prototype)实现继承 复制代码 代码如下: <SPAN style="BACKGROUND-COLOR: #ffffff"><SPAN style="FONT-SIZE: 18px"><html>  <body>  <script type="text/javascript">      function Person(na

js中prototype用法详细介绍

prototype 是在 IE 4 及其以后版本引入的一个针对于某一类的对象的方法,而且特殊的地方便在于:它是一个给类的对象添加方法的方法!这一点可能听起来会有点乱,别急,下面我便通过实例对这一特殊的方法作已下讲解: 首先,我们要先了解一下类的概念,JavaScript 本身是一种面向对象的语言,它所涉及的元素根据其属性的不同都依附于某一个特定的类.我们所常见的类包括:数组变量(Array).逻辑变量(Boolean).日期变量(Date).结构变量(Function).数值变量(Number)

Spring中@Transactional用法详细介绍

Spring中@Transactional用法详细介绍 引言: 在spring中@Transactional提供一种控制事务管理的快捷手段,但是很多人都只是@Transactional简单使用,并未深入了解,其各个配置项的使用方法,本文将深入讲解各个配置项的使用. 1.  @Transactional的定义 Spring中的@Transactional基于动态代理的机制,提供了一种透明的事务管理机制,方便快捷解决在开发中碰到的问题.在现实中,实际的问题往往比我们预期的要复杂很多,这就要求对@Tr

PHP中error_reporting函数用法详细介绍

PHP中error_reporting函数用法详细介绍 PHP中对错误的处理会用到error_reporting函数,看到最多的是error_reporting(E_ALL ^ E_NOTICE),这个是什么意思呢?下面我们具体分析error_reporting函数. 定义用法 error_reporting() 设置 PHP 的报错级别并返回当前级别. 语法 error_reporting(report_level) 如果参数 report_level 未指定,当前报错级别将被返回.下面几项是

JS中prototype的用法实例分析

本文实例讲述了JS中prototype的用法.分享给大家供大家参考.具体分析如下: JS中的phototype是JS中比较难理解的一个部分   本文基于下面几个知识点:   1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是,现在有1个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展.我们称B的原型为A.   2 javascript的方法可以分为三类: a 类方法 b 对象方法 c 原型方法 例子如下: function People(name

JS中prototype关键字的功能介绍及使用示例

prototype 关键字可以为 JS原有对象 或者 自己创建的类 中添加方法或者属性. 也可以实现继承. 例子: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org

vue.js中toast用法及使用toast弹框的实例代码

1.首先引入 import { Toast } from 'vant' 写个小列子 绑定一个click事件 2.写事件 在methods写方法 showToast() { this.$toast({ message: "今日签到+3", }) }, 3.效果图如下 一个简单的toast提示成就好了 下面通过实例代码看下vue 中使用 Toast弹框 import { ToastPlugin,ConfirmPlugin,AlertPlugin} from 'vux' Vue.use(To

nginx命令参数用法详细介绍

nginx命令参数用法详细介绍 nginx命令:启动nginx 在Windows上安装好nginx后,我们需要启动nginx服务,启动nginx服务的命令行操作主要有两种方式,即 C:/nginx-0.8.53>nginx.exe 或者 C:/nginx-0.8.53>start nginx 启动nginx命令说明:需要注意,由于nginx默认端口也是80端口,如果此时你的机器上开启了Apache或者IIS服务,切忌在启动nginx之前务必关闭IIS或Apache服务,否则nginx启动命令不

JS中split()用法(将字符串按指定符号分割成数组)

废话不多说了,直接给大家贴代码. <!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <title></title> </head> <body> </body> <script type="text/javascript"> //在Javascript脚本中,将字符串按指定符号进行分割

Java多线程的用法详细介绍

Java多线程的用法详细介绍 最全面的Java多线程用法解析,如果你对Java的多线程机制并没有深入的研究,那么本文可以帮助你更透彻地理解Java多线程的原理以及使用方法. 1.创建线程 在Java中创建线程有两种方法:使用Thread类和使用Runnable接口.在使用Runnable接口时需要建立一个Thread实例.因此,无论是通过Thread类还是Runnable接口建立线程,都必须建立Thread类或它的子类的实例.Thread构造函数: public Thread( ); publi

maven中pom.xml详细介绍

POM 代表工程对象模型.它是使用 Maven 工作时的基本组建,是一个 xml 文件.它被放在工程根目录下,文件命名为 pom.xml. POM 包含了关于工程和各种配置细节的信息,Maven 使用这些信息构建工程. POM 也包含了目标和插件.当执行一个任务或者目标时,Maven 会查找当前目录下的 POM,从其中读取所需要的配置信息,然后执行目标.能够在 POM 中设置的一些配置如下: project dependencies plugins goals build profiles pr