JS中的链式调用是怎么实现的?

Question

举个栗子：

比如说获取属性这个功能。一般是obj.style.属性名。扩展开来，IE有obj.currentStyle.属性名,其他浏览器是getComputedStyle()方法。这里我有个疑问，方法的实现好理解，就是属性名对应一个函数，直接传参调用就可以了。但是JS了里面的点式调用内部是如何实现的呢？在比如，str.length就能直接返回长度，这个我猜测是一个length对应的立即执行函数所以不要加小括号，但是str.charAt(),这种就是一个一个属性名对应的一个函数。

    总的来说，我就是不清楚a.b.c.d这种在JS里面该怎么实现。
    ps：前端小白，理解应该会有很多不到位的地方，应该也会有很多错误，请各位见谅！

Answer 1

一般就是return this

Answer 2

可以用函数式的方式实现：

var Container = function(x) {
    this.value = x;
}
Container.of = x => new Container(x);
var a = Container.of(1);
Container.prototype.map = function(f) {
    return Container.of(f(this.value))
};

var b = Container.of(3)
    .map(x => x + 2)
    .map(x => x + '?'); //5?

Answer 3

就像是链式运动一样，js里面有封装好的，并且jq里面的事件或者运动都有链式的，
理解起来就是干了a事件紧接着干b事件，依次执行

Answer 4

搜一下练市函数语法

Answer 5

str.length 是调用str(或者是原型链的)length的属性。str.charAt() 是它的方法。跟立即执行函数毫无关系。

你要理解属性与方法的概念。
例如：

var a = {
    length: 2,
    charAt: function() {
        console.log('调用了charAt函数')
    }

}

length 是属性，charAt是方法。

Answer 6

链式调用，用过jquery的都知道这很方便

模拟一下就是
var obj={};
obj.a=function(){
    console.log("a")
    return this
}
obj.b=function(){
    console.log("n")
    return this
}
obj.a().b();

至于楼主不理解的 a.b.c.d怎么实现,我觉得就没必要，返回对象本身有什么意义。。

Answer 7

thenable

Answer 8

方法链，当方法的返回值是一个对象，这个对象就可以继续调用它的方法。一般当函数不需要返回值时，直接return this，余下的方法就可以基于此继续调用。如：
shape.setX(100).setY(100).setSize(100)

Answer 9

如果是一般的对象比如jq对象的链式调用的话会在方法里面写上 return this把原对象返回做调用的，也不一定是原对象也可能是数组或者是字符串取决于你的函数到底是干什么用的。

Answer 10

链式调用在 JS 里面是一个专有名词，指 $('#demo').css('color', 'red').show() 这种形式的，通过链式来执行多个函数。

你想问的是JS 中的对象方法和对象属性吧？

var obj = {
    name: 'test',
    say: function(){
        alert('my name is'+ this.name);
    }
}

obj.name; // 访问 obj 的 name 属性
obj.say(); // 执行 obj 的 say 方法