[Javascript] Decorators in JavaScript

你的名字 2022-03-27 04:45 247阅读 0赞

First, what is 'High Order function', basic just a function, inside the function return another fuction.

// High order fucntion
    
    function fn() {
      return function(){
        
      }
    }

For example:

function compose(a, b) {
      return function(c){
        return a(b(c));
      }
    }
    
    function addTwo(val){
      return val + 2;
    }
    
    function tiemsTwo(val){
      return val * 2;
    }
    
    const val = compose(addTwo, tiemsTwo)(50);
    console.info(val); // 102

Decorators is a subset of high order fucntion:

function fluent(fn){
      return function(...args){
        fn.apply(this, args);
        return this;
      }
    }
    
    function Person(){}
    
    Person.prototype.setName = fluent(function(firstName, lastName){
      this.firstName = firstName;
      this.lastName = lastName;
    })
    
    Person.prototype.getName = fluent(function(){
      console.log(this.firstName + ' ' + this.lastName);
    })
    
    var p = new Person();
    
    console.log( p.setName('John', 'Kent').getName());

In this code, fluent actually decorate Person class, make it chainable.

But In ES6:

class Person {
      setName(f, l) {
        this.firstName = f;
        this.lastName = l;
      }
      
      getName() {
        console.log(this.firstName, this.lastName);
      }
    }

We have no way to wrap setName and getName fucntion in fluent(). So that's way decorator comes in.

To use decorator to descorate a function in class:

function decorate(target, keys, descriptor){
      var fn = descriptor.value;
      
      // Overwrite the value, which in this case is function
      descriptor.value = function(...args){
        fn.apply(target, args);
        return target;
      }
    }
    
    class Person {
      
      @decorate
      setName(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
      }
      
      @decorate
      getName(){
        console.log(this.firstName, this.lastName);
      }
    }
    
    const p = new Person();
    console.log(p.setName("Wan", "Zhentian").getName());

And it would be nice to reuse the fluent function:

function fluent(fn){
      return function(...args){
        fn.apply(this, args);
        return this;
      }
    }

So we can do:

function fluent(fn){
      return function(...args){
        fn.apply(this, args);
        return this;
      }
    }
    
    
    function decorateWith(fn){
      return (target, keys, descriptor) => {
        // fn here refers to setName or getName
        // fn should be call with in target context, which means Person{}
        // the second argument in call() is function to be passed into fluent() function
    
        descriptor.value = fn.call(target, descriptor.value);
      }
    }
    
    class Person {
      
      @decorateWith(fluent)
      setName(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
      }
      
      @decorateWith(fluent)
      getName(){
        console.log(this.firstName, this.lastName);
      }
    }
    
    const p = new Person();
    console.log(p.setName("Wan", "Zhentian").getName());

\[Note\]: call(context, arguement, arguement, ....); here arguement is sinlge value

apply(context, arguements): here arguements is array

发表评论取消回复

表情：

评论列表（有 0 条评论，247人围观）

还没有评论，来说两句吧...

相关阅读

相关 javascript基础：　for in循环

形式为： for ( i in c){ alert(i); alert(c[i]); } 注意，对于数组来说，该变量存储的

àì夳堔傛蜴生んèń/ 2023年08月17日 17:33/ 0 赞/ 117 阅读

相关 javascript中in用法介绍

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUw

素颜马尾好姑娘i/ 2023年01月04日 14:30/ 0 赞/ 137 阅读

相关 .trim() in JavaScript not working in IE

trim 方法 (String) (JavaScript) 从字符串中移除前导空格、尾随空格和行终止符。 IE8下，Javascript的St

痛定思痛。/ 2022年09月25日 15:19/ 0 赞/ 167 阅读

相关 Polymorphism in JavaScript(javascript中的多态)

Introduction Polymorphism in Object-Oriented Programming is the ability to create a v

本是古典何须时尚/ 2022年09月11日 03:21/ 0 赞/ 48 阅读

相关【javascript笔记】this in javascript

之前一直对this的理解就是大概知道是个什么东西.最近看到MDN上面的介绍，就记录一下。 mdn官方英文解释：The this keyword refers to the

本是古典何须时尚/ 2022年08月21日 11:45/ 0 赞/ 211 阅读

相关 == and === in JavaScript

运算符==读作相等, 而运算符===则读作等同。这两种运算符操作都是在 JavaScript代码中经常见到的,但是意义则不完全相同,简而言之,相等操作符会对两

旧城等待，/ 2022年06月14日 01:26/ 0 赞/ 258 阅读

相关 Thinking in Python:Decorator

Thinking in Python:Decorator 简介 demo 简介在代码运行期间动态增加功能的方式，称之为“装饰器

﹏ヽ暗。殇╰゛Y/ 2022年04月23日 07:20/ 0 赞/ 166 阅读

相关 JavaScript-for~in循环

`for...in`语句以任意顺序遍历一个对象的可枚举属性。对于每个不同的属性，语句都会被执行。语法： for (variable in object) \{

朱雀/ 2022年04月18日 05:20/ 0 赞/ 290 阅读

相关 [Javascript] Decorators in JavaScript

First, what is 'High Order function', basic just a function, inside the function return

你的名字/ 2022年03月27日 04:45/ 0 赞/ 248 阅读

相关 JavaScript 的in 操作符

[点击去原文][Link 1] 在编写JavaScript时，遇到一个常见的问题“如何判断某值是否数组中的元素”？这让我想起了PHP中的in\_array()函数和

矫情吗；*/ 2021年12月05日 16:24/ 0 赞/ 271 阅读