当前位置 主页 > 网站技术 > 代码类 >

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

    栏目:代码类 时间:2019-11-25 12:06

    本文实例讲述了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()的方式生存数组的方式就说不过去了是吧?