使用"method语法糖"来简化链式调用
10.使用method语法糖来简化链式调用
============================
**知识点**
1.语法糖
2.Function构造函数
3.prototype原型对象
---------------------------------------------------------
1.语法糖
-------
向语法添加一些便利的功能, 通常叫做: "语法糖"
---------------------------------------------------------
2.Function构造函数
----------------
- 任何函数都是`Function`构造函数的实例
- 语法: `var funcName = new Function('参数列表', '函数体')`
---------------------------------------------------------
3.prototype原型对象
------------------
- 任何函数都有一个原型对象属性: `prototype`
- 原型对象上定义的属性或方法,可以被函数所有实例所共享
---------------------------------------------------------
### 示例代码: code/demo10.html
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用method语法糖来简化链式调用</title>
</head>
<body>
<script>
// 上个例子,链式调用看上去似乎工作的很好,其实有很大的弊端
// 所有链式方式全部添加到当前this对象上,会造成大量的内存消耗,而这些方法却是所有实例所共享的
// 所以,应该将这些方法添加到构造函数的原型对象上: prototype
// 向语法添加一些便利的功能, 通常叫做: "语法糖"
// 下面我们用语法糖,来改写上节课的小案例
// 判断这个方法是否已经在函数的构造函数Function原型上实现过,以防止覆盖
// 在构造函数原型prototype对象上添加一个方法: method
if (typeof Function.prototype.method !== 'function') {
// 该方法接受二个参数: 方法名称, 方法的实现
Function.prototype.method = function (methodName, implementation) {
// 为安全起见, 这里使用了方括号,没有使用点语法,想想这是为什么?
// implementation,最终会被一个回调的函数方法体实现
this.prototype[methodName] = implementation;
return this;
}
}
var Calculate = function (data) {
// 保存被计算的初值到this对象上,便于后面的链式方式引用
this.initValue = data;
// 属性: 接受用户参数
this.value = data;
}.method('add',function (data) {
this.value += data;
return this;
}).method('sub', function (data) {
this.value -= data;
return this;
}).method('inc',function () {
this.value += 1;
return this;
}).method('dec',function () {
this.value -= 1;
return this;
}).method('show', function () {
console.log( this.value );
this.value = this.initValue; // 重置
});
// 实例化计算类
var cal = new Calculate(100);
cal.add(50).sub(20).show();
// 自增自增
cal.inc().show(); // 101
cal.dec().show(); // 99
</script>
</body>
</html>
```