如何实现对象方式的链式调用
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>
```
