js prototype深入理解及应用实例分析


Posted in Javascript onNovember 25, 2019

本文实例讲述了js prototype深入理解及应用。分享给大家供大家参考,具体如下:

上一篇讲了js的prototype概念,在这里回顾一下prototype的定义:

prototype是函数的一个属性,并且是函数的原型对象。引用它的必然是函数,这个应该记住。

但是,很奇怪,各位看官,你有没有看过类似下面这样引用prototype的js代码:

function func(){
  var args = Array.prototype.slice.call(arguments, 1);
  return args;
}

咦???看着上面这行代码,你是不是对prototype只是属于函数产生深深的怀疑呢?

你明白上面那个函数的意思吗?我还是解释一下吧。

call是函数的一个方法,关于这个方法,它也是只有····函数····才能够调用的,它的作用是:调用引用它的函数。

就拿这个Array.prototype.slice.call(arguments,1)来讲,这里面包含太多信息了,我一个个分析一下。

slice(start[,end])是js的一个原生数组函数,作用是获取数组中从start下标开始到end下标结束的元素。举个例子:

var arr1 = [2,3,'l',4,5,'j','i'];
alert(arr1.slice(1));//结束下标省略表示从开始下标截取到末尾
//这里alert的是3,'l',4,5,'j','i',你自己可以试一下

arguments是js函数对象的一个属性,作用是获取函数的实参,返回的是一个以函数实参为属性元素的对象。举个例子:

function args(){
  return this.arguments;//这里的this可以省略,你自己可以试一下
  //我加上是为了说明,调用arguments的只能是对象
}
alert(JSON.stringify(args(1,3,5,6,8)));
//返回的是{"0":"1","1":"3","2":"5","3":"6","4":"8"}

关于函数的对象属性arguments这里就讲这么多了,要详细理解,可以百度。

而Array是js中生成数组的关键字。

这里为什么要用Array.prototype来调用slice函数呢?而不用Array.slice,原因很简单,因为数组的关键字Array不能这样子Array.xx直接调用js的数组函数。但为什么不能直接这样调用呢?不急,下面我们来做实验,你就会很清楚了。

alert(Array.slice());
//Uncaught TypeError: Array.slice is not a function

这里直接给你报错了,说明了什么?呵呵,这说明Array关键字确实不能直接调用数组的函数。

alert(JSON.stringify(Array.prototype));
alert(JSON.stringify(Array.prototype.slice()));

这里返回都是空数组···[]···,说明了什么?说明了Array关键字确实是可以调用prototype函数的属性的,同时也说明js是可以这样子Array.prototype调用js的数组函数的。

说到这里,问题就来了,我上面不是说,prototype是js函数的一个属性,只能被函数调用吗?怎么这里Array关键字可以调用这个属性prototype呢?那么,我这不是坑自己对prototype的定义是错误的吗?我这不是给自己打脸吗?哎,看官,没错,你这里看到的都是正确的。可是,至于Array关键字可以调用函数的prototype属性,我有没有给自己打脸,这里,我们先别急得下结论。

转个弯说,看官是否还记得js生成数组的几种方式?应该有多种,但,我这里就不介绍了。

不过,你是否看过这样生成数组的方式?我们先来看下面的代码:

var arr = new Array();

这个方式生成数组还记得吧?那么,我们js的function是不是也可以像下面这样子生成对象呢?

function func(){
}
var obj = new func();

上面生成数组的方式和下面构造函数生成对象的方式是不是很相似?没错,js中function和Array都是可以通过new来生成对象这样的东西,这说明了什么呢?你看Array()和func()是不是很像?是不是最后面都有一对圆括号?是就对了,呵呵,说了这么多,我只是想揭露一样东西,这个东西就是,假如我猜的的没有错的话,Array()这个东西其实是js一个·····构造数组的内置函数····,不然,可以用new Array()的方式生存数组的方式就说不过去了是吧?

讲到这里,我们再返回来说js可以这样子Array.prototype调用prototype就很明白不过了是吧?Array()是js的一个内置函数,既然Array是一个函数,那么Array肯定拥有prototype这个属性对吧?所以说,Array关键字调用prototype并没有违反prototype是函数的一个属性这个原则,prototype是函数的一个属性依然是一个不变的结论。

关于Array生成数组的方式,类似的我们是否可以这样子new Object()生成对象,或者new String()这样子生成字符串?既然可以这样子构造对象和字符串,那么我们下面的代码也应该是可行的,对吧?

alert(JSON.stringify(String.prototype));
alert(JSON.stringify(Object.prototype));

根据上面的解释,你应该知道这里是可以执行的吧?你应该知道这里的之所以能执行的原理吧?你自己试试。这里就不再解释了。

讲到这里,哎,我既然把行文开始的那个函数给忘了?这里讲解一下本文开始那个func函数的作用:

func函数的作用就是,从第二个实参数开始获取func函数的实参。

我来给你分析一下:

function func(){
var args = Array.prototype.slice.call(arguments, 1);
return args;
}
alert(func(0,1,2,3,4));//给func函数传实参

Array.prototype是一个空数组,

Array.prototype.slice()的意思是一个空数组调用数组的函数slice(),

Array.prototype.slice.call()的意思是call函数调用数组的函数slice(),

这里call()怎么调用slice()呢?

是这样子的,Arguments获取func函数实参列表,生成一个对象传递给call()函数,call函数又把Arguments生成的对象传递给Array.prototype这个空数组,把第二个参数···1···传递给slice函数,然后,call就让引用它的函数slice执行slice(1),所以slice就从1下标开始获取数组的元素了,而这个数组的元素其实就是Arguments的元素,因此,这个函数func的作用就是获取下标为1开始的所有实参。不相信,你自己可以执行一下上面的函数。

下面讲讲prototype的应用:

应用1:

给原型对象增加函数,就是让对象拥有公用的函数。

例子:我给数组原型对象增加一个打乱数组方法:

//给数组原型增加一个打乱数组的函数
Array.prototype.shuffle=function(){
var value = this.valueOf(),len = this.length,temp,key;
while(len--){
//随机生成数组的下标
key = Math.floor(Math.random()*len);
//temp为中间交换变量
temp = value[key];
value[key] = value[len];
value[len] = temp;
}
return value;
}
var arr1 = [0,1,2,3,4,5,6,7,8,9];
var arr2 = ['a','b','c','d','e','f'];  
alert(JSON.stringify(arr1.shuffle()));
alert(JSON.stringify(arr2.shuffle()));

你可以尝试着再增加一个数组arr3看看它能不能调用shuffle函数,因为我这里是给Array的原型对象增加的函数,所以在这个脚本内,所有数组都拥有shuffle这个函数。

应用2:

给原型对象增加属性,也就是给对象增加公用的属性

例子:

function fun(){
}
fun.prototype.name = '小东';
fun.prototype.arr = [1,2,3,4];//这里的属性可以是数组,也可以是对象
var ob1 = new fun();
var ob2 = new fun();
alert(JSON.stringify(ob1.name));
alert(JSON.stringify(ob2.arr));

应用3:

实现原型继承;

function P1(){
}
function P2(){
}
//原型对象增加属性和方法
P2.prototype.name = 'P2"s name';
P2.prototype.get=function(value){
  return value;
}
//实例化P2构造函数的一个对象
var obp2 = new P2();//这个对象应该包含所有原型对象的属性和方法
//给P1的原型对象赋值一个对象,相当于P1继承了obp2的所有属性和方法
P1.prototype = obp2;//这个式子,简单来讲就类似于a = b, b赋值给a这个总该明白吧?
//调用P1从obp2继承过来的get函数
alert(P1.prototype.get('out"s name'));
//展示P1从obp2继承过来的name属性
alert(P1.prototype.name);
//用构造函数P1实例化一个obp1对象
var obp1 = new P1();
//P1的原型对象prototype既然已经继承了obp2的所有属性和函数,那么依据P1所实例化出来的对象也都有obp2的属性和函数了
alert(obp1.get('obp1"s name'));

关于prototype就讲到这里,假如本文有什么错误,还望各位看官指出,我好纠正。

特别指出:

  • Array.prototype是一个数组
  • String.prototype是一个字符串
  • Object.prototype是一个对象

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
利用404错误页面实现UrlRewrite的实现代码
Aug 20 Javascript
Js日期选择器并自动加入到输入框中示例代码
Aug 02 Javascript
javascript制作的滑动图片菜单
May 15 Javascript
学习JavaScript设计模式之代理模式
Jan 12 Javascript
JS查找数组中重复元素的方法详解
Jun 14 Javascript
使用JavaScript实现一个小程序之99乘法表
Sep 21 Javascript
javascript高仿热血传奇游戏实现代码
Feb 22 Javascript
Vue实现日历小插件
Jun 26 Javascript
JS原型和原型链原理与用法实例详解
Feb 05 Javascript
node.js中module模块的功能理解与用法实例分析
Feb 14 Javascript
javascript 设计模式之组合模式原理与应用详解
Apr 08 Javascript
微信小程序整个页面的自动适应布局的实现
Jul 12 Javascript
KnockoutJS数组比较算法实例详解
Nov 25 #Javascript
js实现简单的日历显示效果函数示例
Nov 25 #Javascript
VUE.CLI4.0配置多页面入口的实现
Nov 25 #Javascript
用Golang运行JavaScript的实现示例
Nov 25 #Javascript
JS插入排序简单理解与实现方法分析
Nov 25 #Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
Nov 25 #Javascript
python实现迭代法求方程组的根过程解析
Nov 25 #Javascript
You might like
手冲咖啡应该是现代精品咖啡店的必备选项吗?
2021/03/03 冲泡冲煮
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
2007/01/11 Javascript
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/01/13 Javascript
jQuery 使用手册(四)
2009/09/23 Javascript
页面回到顶部的三种实现(锚标记,js)
2012/10/01 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
jQuery图片特效插件Revealing实现拉伸放大
2015/04/22 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
2015/10/16 Javascript
js实现文本框输入文字个数限制代码
2015/12/25 Javascript
javascript数据类型验证方法
2015/12/31 Javascript
基于javascript实现简单计算器功能
2016/01/03 Javascript
javascript遍历json对象的key和任意js对象属性实例
2017/03/09 Javascript
JS获取url参数,JS发送json格式的POST请求方法
2018/03/29 Javascript
对vue下点击事件传参和不传参的区别详解
2018/09/15 Javascript
React父子组件间的传值的方法
2018/11/13 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
2019/11/20 Javascript
Vue使用鼠标在Canvas上绘制矩形
2020/12/24 Vue.js
Django接受前端数据的几种方法总结
2016/11/04 Python
numpy使用fromstring创建矩阵的实例
2018/06/15 Python
Python访问MongoDB,并且转换成Dataframe的方法
2018/10/15 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
使用K.function()调试keras操作
2020/06/17 Python
python邮件中附加文字、html、图片、附件实现方法
2021/01/04 Python
Monnier Frères美国官网:法国知名奢侈品网站
2016/11/22 全球购物
美国二手复古奢侈品包包购物网站:LXRandCo
2019/06/18 全球购物
WINDOWS域的具体实现方式是什么
2014/02/20 面试题
法学函授自我鉴定
2014/02/06 职场文书
护理专科毕业自荐信范文
2014/04/21 职场文书
卫生院健康教育实施方案
2014/06/07 职场文书
酒店前台接待岗位职责
2015/04/02 职场文书
七一晚会主持词
2015/06/29 职场文书
pytorch MSELoss计算平均的实现方法
2021/05/12 Python
浅谈 JavaScript 沙箱Sandbox
2021/11/02 Javascript
Go语言编译原理之源码调试
2022/08/05 Golang