龙空技术网

javascript之实现链式调用

小焱2018 599

前言:

此时小伙伴们对“js链式”大体比较重视,看官们都需要了解一些“js链式”的相关内容。那么小编也在网摘上汇集了一些关于“js链式””的相关知识,希望看官们能喜欢,你们一起来学习一下吧!

链式调用的核心就在于调用完的方法将自身实例返回

1)示例一

function Class1() {    console.log('初始化')}Class1.prototype.method = function(param) {    console.log(param)    return this}let cl = new Class1()//由于new 在实例化的时候this会指向创建的对象, 所以this.method这个方法会在原型链中找到。cl.method('第一次调用').method('第二次链式调用').method('第三次链式调用')

2)示例二

var obj = {    a: function() {        console.log("a");        return this;    },    b: function() {        console.log("b");        return this;    },};obj.a().b();

3)示例三

// 类class Math {    constructor(value) {        this.hasInit = true;        this.value = value;        if (!value) {            this.value = 0;            this.hasInit = false;        }    }    add() {        let args = [...arguments]        let initValue = this.hasInit ? this.value : args.shift()        const value = args.reduce((prev, curv) => prev + curv, initValue)        return new Math(value)    }    minus() {        let args = [...arguments]        let initValue = this.hasInit ? this.value : args.shift()        const value = args.reduce((prev, curv) => prev - curv, initValue)        return new Math(value)    }    mul() {        let args = [...arguments]        let initValue = this.hasInit ? this.value : args.shift()        const value = args.reduce((prev, curv) => prev * curv, initValue)        return new Math(value)    }    divide() {        let args = [...arguments]        let initValue = this.hasInit ? this.value : args.shift()        const value = args.reduce((prev, curv) => prev / (+curv ? curv : 1), initValue)        return new Math(value)    }}let test = new Math()const res = test.add(222, 333, 444).minus(333, 222).mul(3, 3).divide(2, 3)console.log(res.value)// 原型链Number.prototype.add = function() {    let _that = this    _that = [...arguments].reduce((prev, curv) => prev + curv, _that)    return _that}Number.prototype.minus = function() {    let _that = this    _that = [...arguments].reduce((prev, curv) => prev - curv, _that)    return _that}Number.prototype.mul = function() {    let _that = this    _that = [...arguments].reduce((prev, curv) => prev * curv, _that)    return _that}Number.prototype.divide = function() {    let _that = this    _that = [...arguments].reduce((prev, curv) => prev / (+curv ? curv : 1), _that)    return _that}let num = 0;let newNum = num.add(222, 333, 444).minus(333, 222).mul(3, 3).divide(2, 3)console.log(newNum)

标签: #js链式