Js：函数增强、对象的增强（vue2响应式原理）、原型对象

1、函数的增强

1. 获取函数参数的个数

function foo(param1,param2){
    
    
}
console.log(foo.length) // 2

注意：
（1）length不包含默认参数、剩余参数，只统计定义函数时正常的形参个数。

2. 函数的arguments（用剩余参数代替）

function foo(x,y,z){
    
    
	// [Arguments]: [10, 20, 30]
	console.log(arguments)
}
foo(10,20,30)

注意：
（1）arguments只是类数组，而不是数组
（2）arguments可以转Array，之后就可以使用Array的方法
（3）箭头函数没有arguments

3. 函数的剩余参数

// 剩余参数: rest parameters
function foo(num1, num2, ...args) {
    
    
  // args数组
  console.log(args) // [111, 222, 333]
}

foo(20, 30, 111, 222, 333)

注意：
（1）剩余参数需要写到其他的参数最后
（2）剩余参数是一个真正的数组

4. 纯函数（概念）

纯函数的维基百科定义：
在程序设计中，若一个函数符合以下条件，那么这个函数被称为纯函数：
（1）此函数在相同的输入值时，需产生相同的输出。
（2）函数的输出值和输入值以外的其他隐藏信息或状态无关，也和由I/O设备产生的外部输出无关（输出值只与参数有关）。
（3）该函数不能有语义上可观察的函数副作用，诸如“触发事件”，使输出设备输出，或更改输出值以外物件的内容等。
（4）副作用：修改了全局变量，修改参数或者改变外部的存储等。因为副作用往往是产生bug的 “温床”。

优势
安心的写：你不需要去关心外层作用域中的值, 目前是什么状态
安心的用：调用函数时, 可以知道: 确定的输入一定产生确定的输出

4. 柯里化（概念）

优势
（1）函数的职责单一
（2）函数的参数复用

// 普通的函数
function foo1(x, y, z) {
    
    
  console.log(x + y + z)
}
// foo1(10, 20, 30)

// 柯里化函数
function foo2(x) {
    
    
  return function(y) {
    
    
    return function(z) {
    
    
      console.log(x + y + z)
    }
  }
}

foo2(10)(20)(30)

// 另外一种写法: 箭头函数的写法
// function foo3(x) {
    
    
//   return y => {
    
    
//     return z => {
    
    
//       console.log(x + y + z)
//     }
//   }
// }
var foo3 = x => y => z => {
    
    
  console.log(x + y + z)
}

foo3(10)(20)(30)

2、对象的增强

var obj = {
    
    
  name: "why",
  age: 18
}

默认情况下属性都是没有特别的限制，可以删除，修改对象中的属性。

如果我们想要对一个属性进行比较精准的操作控制，那么我们就可以使用属性描述符Object.defineProperty来对属性进行添加或者修改。

Object.defineProperty就是vue2的响应式原理实现的核心

1. Object.defineProperty

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

语法：
Object.defineProperty(obj, prop, descriptor)
参数：
（1）obj 要定义属性的对象；
（2）prop 要定义或修改的属性的名称或 Symbol；
（3）descriptor 要定义或修改的属性描述符，是个对象；
返回值：
（1）被传递给函数的对象。

1.1 属性描述符的类型

（1）数据属性（Data Properties）描述符（Descriptor）；
（2）存取属性（Accessor访问器 Properties）描述符（Descriptor）；
在这里插入图片描述

（1）数据属性描述符

[[Configurable]]：表示属性是否可以通过delete删除属性，是否可以修改它的特性，或者是否可以将它修改为存取属性描述符；
- 当我们直接在一个对象上定义某个属性时，这个属性的[[Configurable]]为true；
- 当我们通过属性描述符定义一个属性时，这个属性的[[Configurable]]默认为false；
[[Enumerable]]：表示属性是否可以通过for-in或者Object.keys()返回该属性；
- 当我们直接在一个对象上定义某个属性时，这个属性的[[Enumerable]]为true；
- 当我们通过属性描述符定义一个属性时，这个属性的[[Enumerable]]默认为false；
[[Writable]]：表示是否可以修改属性的值；
- 当我们直接在一个对象上定义某个属性时，这个属性的[[Writable]]为true；
- 当我们通过属性描述符定义一个属性时，这个属性的[[Writable]]默认为false；
[[value]]：属性的value值，读取属性时会返回该值，修改属性时，会对其进行修改；
- 默认情况下这个值是undefined；

<script>
var obj = {
    
    
  name: "why", // configurable: true
  age: 18
}

Object.defineProperty(obj, "name", {
    
    
  configurable: false, // 告诉js引擎, obj对象的name属性不可以被删除
  enumerable: false, // 告诉js引擎, obj对象的name属性不可枚举(for in/Object.keys)
  writable: false, // 告诉js引擎, obj对象的name属性不写入(只读属性 readonly)
  value: "coderwhy" // 告诉js引擎, 返回这个value
})

delete obj.name
console.log(obj)

// 通过Object.defineProperty添加一个新的属性
Object.defineProperty(obj, "address", {
    
    })
delete obj.address
console.log(obj)

console.log(Object.keys(obj))

obj.name = "kobe"
console.log(obj.name)

</script>

（2）存取属性描述符（Vue2响应式的原理）

[[Configurable]]：跟数据属性描述符一致
[[Enumerable]]：跟数据属性描述符一致
[[get]]：获取属性时会执行的函数。默认为undefined
[[set]]：设置属性时会执行的函数。默认为undefined

单个属性添加存取属性描述符

<script>
// vue2响应式原理
var obj = {
    
    
  name: "why"
}

// 对obj对象中的name添加描述符(存取属性描述符)
var _name = "" // 存储set方法里的数据
Object.defineProperty(obj, "name", {
    
    
  configurable: true,
  enumerable: false,
  set: function(value) {
    
    
    console.log("set方法被调用了", value)
    _name = value // 将数据另存，方便后续get方法获取
  },
  get: function() {
    
    
    console.log("get方法被调用了")
    return _name // 获取数据
  }
})

obj.name = "coderwhy"

// 获取值
console.log(obj.name)

</script>

多个属性添加存取属性描述符

<script>

  var obj = {
    
    
    name: "why",
    age: 18,
    height: 1.88
  }

  // Object.defineProperty(obj, "name", {})
  // Object.defineProperty(obj, "age", {})
  // Object.defineProperty(obj, "height", {})

  // 新增的方法
  Object.defineProperties(obj, {
    
    
    name: {
    
    
      configurable: true,
      enumerable: true,
      writable: false
    },
    age: {
    
    
    },
    height: {
    
    
    }
  })

</script>

（3）Object.defineProperty局限性

首先，设计的初衷，并不是监听一个对象所有的属性
其次，只能监听get/set，如果想监听其他操作，比如删除操作，新增操作，是无法监听的，需要重写对应的方法。
- 例如vue2中$set()方法，设置对象的响应式属性（新增属性）

3、原型

3.1 原型对象、原型链的概念理解

构造函数：也是函数，只是使用方式要通过new关键字来调用，
原型对象：也叫“原型”、“实例原型”，也是一个对象。
①原型对象=构造函数.prototype。
②定义每个构造函数时都会自带一个原型对象——prototype
③原型对象的作用是存放这个类型创建的所有实例共享的属性和方法。
④每一个JavaScript对象(除了 null )都具有__proto__属性（私有属性），指向该对象的原型。
原型链：原型对象指向另一个类型的实例，类似于套娃，就形成了原型链。下图绿色的就是原型链

对象获取原型：obj.__proto__
函数（构造函数）获取原型：foo.prototype
原型的constructor 又指回函数：Person.prototype.constructor === Person

在这里插入图片描述

JS中顶级对象是Object，
Object.prototype: 最顶层的原型对象。即：原型链最顶层的原型对象就是Object的原型对象
Object.prototype.__proto__ === null // true

3.2 原型对象的应用

一般会将方法放在原型上进行共用，属性除非需要共用，一般不放在原型上。

3.3 对象的继承（继承属性和方法）（ES5）（理解即可）

<script>
  // 定义Person构造函数(类)
  function Person(name) {
    
    
    this.name = name
  }
  Person.prototype.running = function() {
    
    
    console.log("running~")
  }

  // 定义学生类
  function Student(name, age) {
    
    
    // 继承属性 重点: 借用构造函数
    Person.call(this, name)

    this.age = age
  }

  // 继承方法: 创建一个父类的实例对象(new Person()), 用这个实例对象来作为子类的原型对象
  var p = new Person("why", 18)
  Student.prototype = p

  Student.prototype.studying = function() {
    
    
    console.log("studying~")
  }

  // 创建学生
  var stu1 = new Student("kobe", 30)
  stu1.running()
  stu1.studying()
  
</script>

在这里插入图片描述