点击切换帐号登陆
帐号密码登陆

如何实现对象方式的链式调用

9.链式操作
========

**知识点**
1. 链式调用的优点
2. 链式调用的原理

----------------------------------------------------

1.链式调用的优点
-------------
使对象方法的调用更加的优雅,直观

----------------------------------------------------

2.链式调用的原理
-------------
如果前一个方法返回无意义的值时,可以让他返回`this`对象,让链式调用进行下去

----------------------------------------------------

### 示例代码: code/demo09.html

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>链式调用</title>
</head>
<body>
<script>
    // 学过jQuery的同学一定对链式调用不陌生,在原生javascript中是如何实现的呢?
    // 类似: obj.m1().m2().m3()...,一个接一个的方法调用,不必每次都要赋值给变量后再调用
    // 优点:  语法非常的优雅和直观
    // 原理: 如果前一个方法返回无意义的值时,可以让他返回this对象,让链式调用进行下去

    var Calculate = function (data) {
        // 属性: 接受用户参数
        this.value = data;

        // 创建加,减二个方法用于链式调用,更多方法可自己扩充
        this.add = function (data) {
            this.value += data;
            return this;
        };
        this.sub = function (data) {
            this.value -= data;
            return this;
        };

        // 创建二个快捷方法,专用于自增自增
        this.inc = function () {
            this.value += 1;
            return this;
        };
        this.dec = function () {
            this.value -= 1;
            return this;
        };

        // 返回结果,暂时在控制台中查看
        this.show = function () {
            console.log( this.value );
            this.value = data;  // 重置
        };
    };

    // 实例化计算类
    var cal = new Calculate(100);

    cal.add(50).sub(20).show();

    // 自增自增

    cal.inc().show();  // 101
    cal.dec().show(); // 99

</script>
</body>
</html>
```


任务

?不会了怎么办
无数据提示暂无评论哟...我要评论
网站导航
网站首页
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ交流群
微信公众号
微信公众号