类数组的理解和使用

最新推荐文章于 2023-10-06 00:28:54 发布

麦乐乐

最新推荐文章于 2023-10-06 00:28:54 发布

阅读量3.9k

点赞数 2

分类专栏： JavaScript专题

本文链接：https://blog.csdn.net/qq_41831345/article/details/97508354

版权

JavaScript专题专栏收录该内容

23 篇文章 0 订阅

订阅专栏

一什么是类数组？

1 定义：

JavaScript类型化数组是一种类似数组的对象，并提供了一种用于访问原始二进制数据的机制。

2 具体表现形式：

     var arr = ['你好', 'json', 'array']
     var obj = {
        0: '你好',
        1: 'json',
        2: 'array',
        length: 3
     }

上面代码不难看出，obj也有length属性，访问属性也可以通过obj[0]的方式去访问，这样的对象就可以说是类数组。但是他又不是数组，因为它不能使用数组的push等方法。但是我们也可以通过下面的方法去调用。

   arr.push('新的元素');
   [].push.call(obj, '新的元素');
   console.log(arr, obj)

注意obj的length属性自动变成了4。类数组是可以使用数组的api的。那我们使用类数组有什么好处呢？我们何必这么麻烦要写一个类数组，然后再用上面的方式去调用呢？接着看下文。。。

二类数组的好处？

看下面一串代码的打印结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="myDiv1" class="box1">你好</div>
    <span id="mySpan1" class="box1 box2">单例模式</span>
    <div id="myDiv2" class="box1 box2 box3"></div>
    <a id="myA1" class=""></a>

</body>
    <script>
        console.log(myDiv1.classList);
        console.log(mySpan1.classList);
        console.log(myDiv2.classList);

    </script>
</html>

元素本身有classList属性,存放结果上面可以看的很清楚，这个属性就是类数组的形式。

另外呢，这个属性上还有一些api,

    <script>
        console.log(myDiv1.classList);
        console.log(mySpan1.classList);
        console.log(myDiv2.classList);
        var div1 = myDiv1.classList;
        var span1 = mySpan1.classList;
        var div2 = myDiv2.classList;
        div1.add('box2');
        span1.remove('box2'); // 增加class名
        div2.toggle('box3'); // 删除class名
        span1.toggle('box3'); // 有就增加class名, 无就删除class名
    </script>

看我们的body发什么了什么变化？

可以看出，操作classList就是操作class，我们可以对class进行增加，删除。或者有就删除，无就添加的操作。那classList跟class有什么关系呢？由于classList属性不兼容IE10一下的浏览器，带着问题，我们来做下兼容，自己写一个classList属性，扩展一些需要的api。

先来看下元素是什么？

console.log(myDiv1.constructor)
console.log(mySpan1.constructor)
console.log(document.body.constructor)

可以说所有的标签都是有构造函数创建出来的，标签元素就是本身构造函数的实例。那我们怎么给所有的元素都增加一个属性呢？

我们不能把所有元素的构造函数都增加这个属性，元素标签的种类很多，这样做显然不科学。我们来个实验。

HTMLElement.prototype.say = function() {
   console.log(this + '调用了我')
}
myDiv1.say() // [object HTMLDivElement]调用了我
mySpan1.say() // [object HTMLSpanElement]调用了我
document.body.say() // [object HTMLBodyElement]调用了我

给HTMLElement这个对象原型上加一个方法，然后每个元素都去调用这个方法，发现函数执行了，我们可以大胆的猜测，每个元素的构造函数可能继承了HTMLElement这个构造函数。所以函数可以执行。我们好像找到了他们共同的父级，这样就可以对HTMLElement进行操作了。

但是，问题来了，我们可以给原型上增加共享的方法，那我们可以给原型上增加共享的属性吗？

HTMLElement.prototype.newClassList = []
myDiv1.newClassList.push('classA')
console.log(myDiv1.newClassList); // ["classA"]
console.log(mySpan1.newClassList);// ["classA"]

我们给地 div1的newClassList属性增加了一个元素，span上面的newClassList属性也会跟着改变，所以属性是不能共享的。我们来给HTMLElement.prototype增加一个监听属性

        Object.defineProperty(HTMLElement.prototype, 'newClassList', {
            get: function() {
                console.log(this); // html元素
                if(!this._dtl_) {
                    this._dtl_ = this.className.split(' ');
                }
                return this._dtl_
            },
        })
        var div1 = myDiv1.newClassList;
        var span1 = mySpan1.newClassList;
        var div2 = myDiv2.newClassList;
        console.log(div1) // 
        console.log(span1)
        console.log(div2)

这里是this的打印结果

这里是div1 span1 div2的打印结果

这里我们就定位到了每一个html元素，里面的this就指向调用它的html元素，也就是说，谁去访问这个属性，this就指向谁。下面我们就可以对这个this进行操作了。现在我们的newClassList属性还是一个数组，由于这个属性不仅仅是一个属性，上面还要有一些方法，我们怎么给一个数组增加方法呢？增加到数组的原型上？这样我们会污染数组的原型，我们只需要newClassList这个数组上有这些api（add, remove等方法),所以我们加在数组的原型上肯定是不合理的。这时，就需要用到我们的类数组了。

 function myDOMTokenList(dom) {

        }
        myDOMTokenList.prototype = {
            constructor: myDOMTokenList,
            contains: function(val) {
            },
            add: function(val) {
                
            },
            remove: function(val) {
                
            },
            toggle: function(val) {
               
            }
        }
        Object.defineProperty(HTMLElement.prototype, 'newClassList', {
            get: function() {
                console.log(this); // html元素
                if(!this._dtl_) {
                    this._dtl_ = this.className.split(' ');
                    console.log(this._dtl_.__proto__); // 这里指向Array的原型
                    // 重新构建原型指向
                    this._dtl_.__proto__ = new myDOMTokenList(this);
                    console.log(this._dtl_.__proto__) // myDOMTokenList {}
                    console.log(this._dtl_.add === this._dtl_.__proto__.__proto__.add) // true
                }
                return this._dtl_
            },
        })

定义一个构造函数，原型上增加一些方法，然后改变this._dtl_也就是newClassList的原型指向，指向myDOMTokenList构造函数的实例，这样，我们就把数组变成了类数组。然后我们来完善这些方法。

     function myDOMTokenList(dom) {
             // this 每一个实例,  myDiv1.newClassList。 dom是html元素
            console.log(this, dom)
            Object.defineProperty(this, 'value', {
                set: function(val) {
                    dom.className = val;
                }
            })

        }
        myDOMTokenList.prototype = {
            constructor: myDOMTokenList,
            contains: function(val) {
                for(var i=0; i< this.elngth; i++) {
                  return this[i] === val
                }
            },
            add: function(val) {
                [].push.call(this, val);
                this.value = [].join.call(this, ' ');
                return this;
            },
            remove: function(val) {
                for(var i=0; i<this.elngth; i++) {
                    if(this[i] === val) {
                        [].splice.call(this, i, 1)
                        this.value  = this
                    }
                }
                return this;
            },
            toggle: function(val) {
                this.contains(val) ? this.remove(val) : 
                this.add(val);
                return this;
            }
        }

myDOMTokenList构造函数中的参数就是dom元素，this则指向每一个实例，也就是myDiv1.newClassList mySpan1.newClassList

给this增加一个监听属性value，当value改变时，去改变dom。注意数据流，数据是产生于dom, 原型上的方法参数传入进来，改变后，又进入到dom中的。

麦乐乐

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
类数组的理解和使用

一什么是类数组？1 定义： JavaScript类型化数组是一种类似数组的对象，并提供了一种用于访问原始二进制数据的机制。2 具体表现形式： var arr = ['你好', 'json', 'array'] var obj = { 0: '你好', 1: 'json', 2: 'array', ...
复制链接

扫一扫