初识vue（14）—— 源码分析前的准备

妖狐艹你老母 2023-01-12 01:55 64阅读 0赞

### 1. \[\].slice.call(lis): 将伪数组转换为真数组 ###

// lis是伪数组(是一个特别的对象, length和数值下标属性)
    const lis = document.getElementsByTagName('li'); 
    console.log(lis instanceof Object, lis instanceof Array,lis.forEach);//true false undefined
    // 数组的slice()截取数组中指定部分的元素, 生成一个新的数组
    const lis2 = Array.prototype.slice.call(lis);  // lis.slice()
    console.log(lis2 instanceof Object, lis2 instanceof Array,lis2.forEach);//true true function

![在这里插入图片描述][20210127191146111.png]

### 2. node.nodeType: 得到节点类型 ###

const elementNode = document.getElementById('test');
    const attrNode = elementNode.getAttributeNode('id');
    const textNode = elementNode.firstChild;
    console.log(elementNode.nodeType, attrNode.nodeType, textNode.nodeType);

![在这里插入图片描述][20210127211929365.png]

### 3. Object.defineProperty(obj, propertyName, \{\}): 给对象添加/修改属性(指定描述符) ###

> configurable：true/false 是否可以重新define  
> enumerable：true/false 是否可以枚举(for…in / keys())  
> value：指定初始值  
> writable：true/false value是否可以修改存取(访问)描述符  
> get：函数，用来得到当前属性值  
> set：函数，用来监视当前属性值的变化

![在这里插入图片描述][2021012721242464.png]

const obj = { 
      firstName: 'A',
      lastName: 'B'
    };
    Object.defineProperty(obj, 'fullName2', { 
      configurable: false, //是否可以重新define
      enumerable: true, // 是否可以枚举(for..in / keys())
      value: 'A-B', // 指定初始值
      writable: false // value是否可以修改
    });
    console.log(obj.fullName2);  // A-B
    obj.fullName2 = 'E-F';
    console.log(obj.fullName2); // A-B

![在这里插入图片描述][20210127212404827.png]

### 4. Object.keys(obj): 得到对象自身可枚举的属性名的数组 ###

const obj = { 
      firstName: 'A',
      lastName: 'B'
    };
    obj.fullName = 'A-B'
    const names = Object.keys(obj);
    console.log(names);

![在这里插入图片描述][2021012721272719.png]

### 5. DocumentFragment: 文档碎片(高效批量更新多个节点) ###

*  document: 对应显示的页面，包含n个elment 一旦更新document内部的某个元素界面更新。
 *  documentFragment：内存中保存n个element的容器对象(不与界面关联)，如果更新framgnet中的某个element，界面不变。

![在这里插入图片描述][20210127213156103.png]

### 6. obj.hasOwnProperty(prop): 判断prop是否是obj自身的属性 ###

const obj = { 
      firstName: 'A',
      lastName: 'B'
    };
    obj.fullName = 'A-B'
    console.log(obj.hasOwnProperty('fullName'), obj.hasOwnProperty('toString'));  // true false

![在这里插入图片描述][20210127212907155.png]

[20210127191146111.png]: /images/20221119/cdda9482756a4798b117b44df975d0e4.png
[20210127211929365.png]: /images/20221119/30e093e7bdb449fb8287c24d32796bac.png
[2021012721242464.png]: /images/20221119/fc3df6c7aa464807a911386d14852e90.png
[20210127212404827.png]: /images/20221119/3bfcda2d8fa64cff99df5c2065c5b24d.png
[2021012721272719.png]: /images/20221119/e6cbc3d515434e11981c1c5d018922a0.png
[20210127213156103.png]: /images/20221119/138a4124e5144496812facb0cc2af4eb.png
[20210127212907155.png]: /images/20221119/e890b2eaf55e42519b04e590243f18cf.png