(转)this、apply、call、bind

19 九月,2017

this 的指向

在 ES5 中,其实 this 的指向,始终坚持一个原理:this 永远指向最后调用它的那个对象,来,跟着我朗读三遍:this 永远指向最后调用它的那个对象,this 永远指向最后调用它的那个对象,this 永远指向最后调用它的那个对象。记住这句话,this 你已经了解一半了。

下面我们来看一个最简单的例子:

例 1:

var name = "windowsName";

function a() {
    var name = "Cherry";

    console.log(this.name); // windowsName

    console.log("inner:" + this); // inner: Window
}
a();
console.log("outer:" + this) // outer: Window

module 模块组

13 九月,2017

随着项目的复杂性增加,共享的状态越来越多,这时候就需要把状态的各种操作进行一个分组,分组后再进行按组编写。这时就需要用到 module:状态管理器的模块组操作。

本篇文章还是接着在Vuex 状态管理 Demo的基础上进行。

1、声明模块组

在 mystore.js 中声明模块组,还是用 const 常量的方法声明模块组。代码如下:

// 声明模块组
const moduleA = {
    state: mystate,
    mutations: mymutations,
    getters: mygetters,
    actions: myactions
}

actions 异步修改状态

13 九月,2017

actions 和 Mutations 功能基本一样,不同点是,actions 是异步的改变 state 状态,而 Mutations 是同步改变状态。

1、在 mystore.js 中声明 actions

actions 是可以调用 Mutations 里的方法的,还是继续原有代码基础上进行,在 actions 里调用 add 和 reduce 两个方法。

const myactions = {
    addAction(context) {
        context.commit('add', 10)  // 调用 mymutations 中的 add 方法,并传值
    },
    reduceAction({ commit }) {
        commit('reduce') //  调用 mymutations 中的 reduce 方法,并传值
    }
}

getters 计算过滤操作

13 九月,2017

接上Vuex 状态管理 Demo,本篇分享如何操作 getters 计算过滤操作

有时候需要从 store 中的 state 中派生出一些状态,例如对列表进行过滤并计数。

如果有多个组件需要用到此属性,我们要么复制这个函数,或者抽取到一个共享函数然后在多处导入它 —— 无论哪种方式都不是很理想。

Vuex 允许我们在 store 中定义『getters』(可以认为是 store 的计算属性)。就像计算属性一样,getters的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。

getters 从表面看是获得的意思,可以把他看作在获取数据之前进行的一种再编辑,相当于对数据的一个过滤和加工。可以把它看作 mystore.js 的计算属性。

getters 基本用法

比如现在要对 mystore.js 文件中的 count 进行一个计算属性的操作,就是在它输出前,给它加上100.

1、首先要在 store.js 里用 const 声明我们的 getters 属性

const mygetters = {
    count: function(state) { // Getters 接受 state 作为其第一个参数,也可以接受其他 getters 作为第二个参数
        return state.count += 100;
    }
}

Mutations 修改状态

13 九月,2017

接上Vuex 状态管理 Demo,本篇分享如何操作 mutations

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutations 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数

参数传递

可以向 store.commit 传入额外的参数,即 mutation 的 载荷(payload)

1、打开原来的 mystore.js,修改其中的 const mymutations , 如下:

const mymutations = {
    // 加一个 num 参数
    add(mystate, num){
        // 修改方法为 += num
        return mystate.count += num;
    },
    // 加一个 num 参数
    reduce(mystate, num){
        // 修改方法为 -= num
        return mystate.count -= num;
    }
}
1 2 3 31