在JavaScript中,链式编程是通过在每个方法执行完毕后返回当前对象(`return this`)来实现的。这样,调用者可以继续在该对象上调用其他方法。以下是一些链式编程的示例:
示例1:简单的对象链式调用
```javascript
function Dog() {
this.run = function() {
alert('dog is run');
return this;
};
this.eat = function() {
alert('dog is eat');
return this;
};
this.sleep = function() {
alert('dog is sleep');
return this;
};
}
var d1 = new Dog();
d1.run().eat().sleep().run().eat().sleep();
```
示例2:模拟jQuery底层代码实现
```javascript
(function() {
// 特点一,程序启动即执行
alert('i am running');
// 特点二,内部的成员变量,外部无法访问。除了不加var修饰的变量
})();
```
示例3:链式操作的对象方法
```javascript
var o = {
f: function(r) {
console.log(+new Date, r);
return this;
}
};
o.f(1).f(2).f(3).f(4).f(5).f(6).f(7).f(8).f(9);
```
示例4:工厂模式实现链式调用
```javascript
function Obj() {}
Obj.prototype = {
setNum: function(num) {
this.num = num;
return this;
},
fn_a: function() {
this.num++;
return this;
},
fn_b: function(pram) {
this.num = this.num * pram;
return this;
}
};
var a = new Obj();
a.setNum(1).fn_a().fn_b(2).fn_a().setNum(3);
```
示例5:类实现链式调用
```javascript
class Calculator {
constructor() {
this.result = 0;
}
add(num) {
this.result += num;
return this;
}
}
const calc = new Calculator();
const result = calc.add(1).add(2).result;
console.log(result); // 输出: 3
```
示例6:用户对象链式调用
```javascript
var user = function(name, age) {
this.name = name;
this.age = age;
};
user.prototype.getName = function() {
console.log(this.name);
return this;
};
user.prototype.getAge = function() {
console.log(this.age);
return this;
};
var user1 = new user("zjf", 22);
user1.getName().getAge();
```
总结
链式编程的核心在于每个方法在执行完毕后返回当前对象,从而允许连续调用多个方法。这种编程风格使得代码更加简洁和易读。在实现链式编程时,需要注意方法返回值的使用,并确保每个方法都返回`this`以支持链式调用。