深入理解js的prototype以及prototype的一些应

2020-05-20 22:27:11

参考地址 深入理解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是一个对象



  • 2017-02-10 15:19:51

    Git:代码冲突常见解决方法

    如果系统中有一些配置文件在服务器上做了配置修改,然后后续开发又新添加一些配置项的时候, 在发布这个配置文件的时候,会发生代码冲突:

  • 2017-02-10 15:24:14

    linux学习之——vim简明教程

    学习 vim 并且其会成为你最后一个使用的文本编辑器。没有比这个更好的文本编辑器了,非常地难学,但是却不可思议地好用。 我建议下面这四个步骤: 存活 感觉良好 觉得更好,更强,更快 使用VIM的超能力

  • 2017-02-10 16:22:13

    git历史记录查询

    查看提交历史:git log 查看提交历史并显示版本间的差异:git log -p 查看指定历史:git log xxx(sha1值) -p 查看提交历史(指定时间):

  • 2017-02-13 17:50:05

    cURL error 60: SSL certificate problem: unable to get local issuer certificate

    Drupal 8 version uses Guzzle Http Client internally, but under the hood it may use cURL or PHP internals. If you installed PHP cURL on your PHP server it typically uses cURL and you may see an exception with error Peer certificate cannot be authenticated with known CA certificates or error code CURLE_SSL_CACERT (60).