Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

directory

  1. Constructor + returns this implementation
  2. Plain object + returns this implementation
  3. Class implementation (same)

A constructor + returns this implementation

The whole point of a chain call is that the invoked method returns an instance of itself

1) (Arrow function)Error writing

The arrow function causes this on the constructor prototype to point to the window

function Fn1(name){
    this.name = name;
}
Fn1.prototype.test = (param) = > {
    // This refers to the window, so using arrow functions in constructors is not recommended
    console.log(this,param);
    return this; 
}
var instance = new Fn1('andy');

instance.test('1 call ').test('2').test('3')
Copy the code

2) Constructor + prototype method (return this) Correct term

2.1) Implementation of new

The constructor is called through new, and the key points can be seen from previous implementations of new

function _new(constructor, ... args) {
    // The constructor type is valid
    if(typeof constructor! = = 'function') {
      throw new Error('constructor must be a function');
    }
    // Create an empty object instance
    let obj = new Object(a);// Bind the constructor prototype to the newly created object instance
    obj.__proto__ = Object.create(constructor.prototype); 
    // Call the constructor and determine the return value
    let res = constructor.apply(obj, args); // 'just focus on it'
    let isObject = typeof res === 'object'&& res ! = =null;
    let isFunction = typeof res === 'function';
    If there is a return value and the return value is an object type, it is returned, otherwise the newly created object is returned
    return isObject || isFunction ? res : obj;
};

Copy the code
2.2) Constructor + prototype method (return this)Correct term
function Fn1(name){
    this.name = name;
}
Fn1.prototype.test = function(param) {
    console.log(this,param);
    return this;
}
// After the new call, instance is the empty object created when new, and 'this' points to the instance object created
var instance = new Fn1('andy');

instance.test('1 call ').test('2').test('3')
// '1 call ' '2 times' '3 times'
Copy the code

Two plain object + return this implementation

This is implemented using this in a normal object when called as obj

var obj = {
    a: function() {
        console.log("a");
        return this;
    },
    b: function() {
        console.log("b");
        return this; }}; obj.a().b().a().b().a().b();// a b a b a b 
Copy the code

Three class implementations (same)

1) Error writing

Error when calling, you can use parentheses, or save the instance to a variable before calling.

class Obj1 {
    a(){
        console.log('a');
        return this;
    }
    b(){
        console.log('b');
        return this; }}new Obj1.a().a().b().b().a();// Call error, you can use parentheses, or save the instance to the variable before calling.
Copy the code

1) Correct term

class Obj1 {
    a(){
        console.log('a');
        return this;
    }
    b(){
        console.log('b');
        return this; }} (new Obj1).a().a().b().b().a();
// a a b b a
Copy the code

conclusion

  • Chain calls were probably first implemented in JQ, and we tried them all the time. Its implementationThe key point is return this, in addition toNotice how to callCan be