Vue的学习笔记 ---- 源码分析001

call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。

常用Array.prototype.slice.call()使伪数组调用Array的slice方法生成新的数组

一、Array.slice()    返回一个新的数组对象，下标从0开始 ;

<ul>
  <li>test1</li>
  <li>test2</li>
  <li>test3</li>
</ul>

<script type='text/javascript'>
 const lis = document.getElementsByTagName('li') 
  // lis是伪数组(是一个特别的对象, length和数值下标属性)
  console.log(lis instanceof Object, lis instanceof Array,lis.forEach)
  //上面的输出结果true false undefined

  const lis2 = Array.prototype.slice.call(lis)  // 转换为数组
  console.log(lis2 instanceof Object, lis2 instanceof Array,lis2.forEach)
  // 上面的输出结果true true ƒ forEach() { [native code] }

</script>

二、 node.nodeType: 得到节点类型（不同类型的节点有不同的值）

nodeType 属性可用来区分不同类型的节点，比如 元素、文本、标签、属性等。

<div id="test"> test </div>

<script type='text/javascript'>
  const elementNode = document.getElementById('test')
  const attrNode = elementNode.getAttributeNode('id')
  const textNode = elementNode.firstChild
  console.log(elementNode.nodeType, attrNode.nodeType, textNode.nodeType)
  // 输出结果为1 2 3

</script>

三、Object.defineProperty() ；直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。

//3. Object.defineProperty(obj, propertyName, {}): 给对象添加属性(指定描述符)
  const obj = {
    firstName: 'A',
    lastName: 'B'
  }
  
  Object.defineProperty(obj, 'fullName', {
    // 属性描述符:

    // 数据描述符

    //访问描述符
    // 读取对象属性值时自动调用, 将函数返回值作为属性值, this为obj
    get () {
      return this.firstName + "-" + this.lastName
    },
    // 修改对象当前属性值时自动调用, 监视当前属性值变化, 修改相关的属性, this为obj
    set (value) {
      const names = value.split('-')
      this.firstName = names[0]
      this.lastName = names[1]
    }
  })

  console.log(obj.fullName) // A-B
  obj.fullName = 'C-D'   // 修改fullName
  console.log(obj.firstName, obj.lastName) // C D

  // 定义另一个属性
  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,不可以修改所以还是A-B

四、Object.keys() ；返回对象自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for...in  循环遍历该对象时返回的顺序一致 。如果对象的键-值都不可枚举，那么将返回由键组成的数组。

  //4. Object.keys(obj): 得到对象自身可枚举属性组成的数组
  const names = Object.keys(obj)
  console.log(names)

五、hasOwnProperty() 方法会返回一个布尔值，判断 对象自身属性中是否具有指定的属性（也就是，是否有指定的键）

const obj = {
    firstName: 'A',
    lastName: 'B',
    fullName:'A-B'
}
obj.hasOwnProperty(prop): 判断prop是否是obj自身的属性 
console.log(obj.hasOwnProperty('fullName'), obj.hasOwnProperty('toString')) // true false

六、DocumentFragment是一个存放xml标签的容器。

<ul id="fragment_test">
   <li>test1</li>
   <li>test2</li>
   <li>test3</li>
</ul>

<script type="text/javascript">
  const ul = document.getElementById('fragment_test')

  // 1. 创建fragment
  const fragment = document.createDocumentFragment()

  // 2. 取出ul中所有子节点取出保存到fragment
  let child
  while(child=ul.firstChild) { // 一个节点只能有一个父亲
    fragment.appendChild(child)  // 先将child从ul中移除, 添加为fragment子节点
  }

  // 3. 更新fragment中所有li的文本
  Array.prototype.slice.call(fragment.childNodes).forEach(node => {
    if (node.nodeType===1) { // 元素节点 <li>
      node.textContent = 'testFragment'
    }
  })

  // 4. 将fragment插入ul
  ul.appendChild(fragment)
</script>