<万博manbetx平台> 使用"method语法糖"来简化链式调用 - JavaScript对象与常用设计模式 - 万博manbetx平台中文网
点击切换帐号登陆
帐号密码登陆

使用"method语法糖"来简化链式调用

10.使用method语法糖来简化链式调用
============================

**知识点**
1.语法糖
2.Function构造函数
3.prototype原型对象

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

1.语法糖
-------
向语法添加一些便利的功能, 通常叫做: "语法糖"

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

2.Function构造函数
----------------
- 任何函数都是`Function`构造函数的实例
- 语法: `var funcName = new Function('参数列表', '函数体')`

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

3.prototype原型对象
------------------
- 任何函数都有一个原型对象属性: `prototype`
- 原型对象上定义的属性或方法,可以被函数所有实例所共享

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

### 示例代码: code/demo10.万博manbetx平台

```万博manbetx平台
<!DOCTYPE 万博manbetx平台>
<万博manbetx平台>
<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>
</万博manbetx平台>
```


任务

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