Làm thế nào để thực hiện chức năng chainable mà không thực hiện? như `obj.fn.fn` thay vì` obj.fn(). fn() `

Question

Tôi có hai chức năng trong một đối tượng

var obj = {}; 
obj.fn1 = function(){ console.log('obj.fn1'); return this; }; 
obj.fn2 = function(){ console.log('obj.fn2'); return this; }; 

Tôi muốn để có thể làm

obj.fn1.fn2() 
obj.fn2.fn1() 

Làm cách nào để thực hiện việc này?

EDIT: fn1 và fn2 có thể là chức năng hoặc người truy cập thuộc tính, tôi không quan tâm miễn là họ làm công cụ.

Tôi đã nhìn thấy nó trong nhiều thư viện, như chalkcolor.red.bold('string').

Answer 1

Tôi nghĩ rằng đó chỉ là một số đối tượng lồng nhau. Hãy nhìn vào mã này:

function Color(c) { this.color = c; } 
 
Color.prototype.bold = function(text) { return '<strong style="color: ' + this.color + '">' + text + '</strong>'; } 
 

 
var colors = { 
 
    red: new Color('red'), 
 
    blue: new Color('blue') 
 
} 
 

 
document.write(
 
    colors.red.bold('text')); 
 

 
document.write(
 
    colors.blue.bold('text'));

Answer 2

Bạn có thể làm điều đó nếu fn1, fn2 và obj có tham chiếu đến cả hai chức năng. Object.assign (ES6) giúp ở đây:

var base = { 
    fn1: function fn1() { console.log('fn1'); return this; }, 
    fn2: function fn2() { console.log('fn2'); return this; } 
} 

Object.assign(base.fn1, base); 
Object.assign(base.fn2, base); 
var obj = Object.assign({}, base); 

obj.fn1(); 
obj.fn1.fn2(); 
obj.fn2(); 
obj.fn1.fn2.fn1.fn1(); 

babel.js repl

Tôi hy vọng đây là cách dụ thư viện của bạn hoạt động.

Nếu không có Object.assign, bạn có thể sử dụng số polyfill hoặc phương án thay thế phổ biến như _.assign từ lodash.