基础内容学习总结

基础内容学习总结

JavaScript红宝书

变量、作用域

• js函数参数的传递都是按值传递的（函数的参数可以看做是局部变量）；
• 全局作用域和局部作用域；
• 变量对象：保存着执行环境中定义的所有变量和函数；
• 作用域链：由代码的当前所在环境的变量对象一直延伸到全局执行环境形成的作用域链，解析时从作用域链最前端（当前环境的变量对象）逐级向后搜索；

对象

原型：

• 每个函数都有一个prototype属性，指向一个对象，包含其所有实例共享的属性和方法；
• Obj.prototype.constructor = Obj；
• obj.prototype可以理解为类，类的构造函数与类同名。

继承：

原型链：

（1）基本实现：让原型对象指向另一个类型的实例，此时原型对象将包含一个指向另一个原型对象的指针，层层递进形成原型链；

SubType.prototype = new SuperType();

（2）缺点：原型中包含的引用类型的属性会被所有实例共享；给超类的构造函数传参会影响到所有实例对象。

借用构造函数：

（1）基本实现：子类型的构造函数内部调用超类的构造函数；

function SubType(){
    //继承了SuperType
    SuperType.call(this);
}

（2）缺点：函数不能复用；超类原型中定义的方法，子类也不可见。

组合继承：

（1）基本实现：用原型链实现原型属性和方法的继承，用借用构造函数实现对实例属性的继承。

（2）解决了单独使用原型链或者借用构造函数模式实现继承的缺点。

---

ES6

let和const

let：

• 绑定当前作用域；
• 不存在变量提升；
• 造成暂时性死区；
• 块级作用域。

const:

• 指向的内存地址保存的值不可改变。

Set和Map

Set:

• 类似于值不重复的数组；
• 通过new Set()可以生成；
• keys()返回键名的遍历器；values()返回键值的遍历器；entries()返回键值对的遍历器；forEach()使用回调函数遍历每个成员；
• keys()和values()行为一致，因为Set结构没有键名。

Map:

• 类似于键值可以为任意类型的JavaScript对象，即“值-值”的Hash结构；
• 内存地址不同，则视为两个键名；
• keys()返回键名的遍历器；values()返回键值的遍历器；entries()返回所有成员的遍历器；forEach()遍历所有成员。

Proxy

• 拦截器，拦截外界对目标对象的访问；
• var p = new Proxy(target, handler),target表示要拦截的目标对象，handler定制拦截行为；
• 一共支持13种拦截器......

用途（个人感受）：

1. 真正的实现了私有属性：使用get/set拦截读写请求；
2. 实现日志功能。

Promise

• 处理异步操作；
• then()方法有两个参数，分别是resolved和rejected的回调，返回一个新的Promise对象，因此可以链式调用；
• catch()方法捕获Promise的错误，等同于then(null,rejection),也返回一个新的Promise对象；
• 解决了回调地狱，可读性更好。

Class

• 感觉只是个语法糖...单纯使用ES5也可以实现；
• 生成对象、实现继承更加清晰明了，更符合面向对象的编程语法；
• static关键字表示该方法是类的静态方法，只能通过类调用，不能通过实例调用；
• extends关键字实现继承，比ES5的原型链或者构造函数等实现继承更清晰简洁；
• super关键字作为函数使用，在子类的构造函数里必须执行super()来调用父类构造函数；作为对象使用，在普通方法里，代表父类的原型对象，在静态方法里，代表父类。

---

Vue

总结一下新学到的：

1.计算属性默认只有getter方法，可以手动添加setter方法：

computed: {
  fullName: {
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

2.侦听器watch的使用：

watch用于观察和响应Vue实例上的数据变动，是一个对象，其键为需要侦听的对象，值有以下几类：

（1）值可以是方法，是当侦听的对象变化时执行的方法，该方法接收两个参数，第一个参数是当前值，第二个参数是变化后的值：

<div id="app">
  <input type="text" v-model="value"></input>
</div>
...
...
watch:{
  value(newValue, oldValue){
  if(newValue > 999){
    this.value = oldValue
    console.log(oldValue)
    }
  }
}

（2）值可以是方法名（必须用单引号包裹）;

（3）值可以是一个对象，该对象有三个选项：

1）handler：一个回调函数，监听到变化时应该执行的函数:

watch:{
  value: {
    handler(newValue, oldValue) {
      if(newValue > 999){
      this.value = oldValue
      console.log(oldValue)
      }
    }
  }
}

2）deep：boolean值，表示是否深度监听（监听对象的属性值的变化，性能消耗会变大）；

3）immediate：boolean值，表示是否在数据绑定时就执行handler方法，而不是在数据发生改变时才执行handler方法。

3.v-model修饰符

.lazy：只在“change”时而非“input”时更新；

.number：自动将输入的值转为数字；

.trim：自动去除输入值的首位空白字符。

4.动态组件

通过使用保留的component元素，动态地绑定到它的 is 特性，可以实现动态组件。

<component :is="myComponent"></component>

---

vue-router

新学到的：

1.动态路由匹配

• 路由可以使用自定义正则进行匹配，例如?表示参数可选，*表示零或多个参数匹配
• 同一个路径对应多个路由的，谁先定义，则优先匹配谁。

2.导航守卫

• 个人理解为每次路由有变化时执行的某些操作；
• 守卫一般接收三个参数，to表示要进入的目标路由对象，from表示即将离开的路由对象，next()根据不同的参数，有不同的执行效果。

用途（个人理解）：

• 拦截某些页面的非法访问；
• 控制全局路由跳转；
• 页面离开前的确认等。

Vuex

双向绑定问题

在页面上被双向绑定的state数据，在update时会报错，因为不是通过提交mutation更改state的；

解决：在计算属性里添加setter，在setter里通过提交mutation改变state。

SASS/SCSS和LESS

个人感觉比较常用的可能有：

• 变量，一处定义，多处复用；
• 属性嵌套，无论是写还是看，都很简洁直观；
• 父级选择器，减少重复代码量；
• extend，直接使用已有的样式

转载于:https://www.cnblogs.com/melonsinsummer/p/basic.html