《The Joy of Javascript》- 1 - Object/Function

关于此书 - 从此我给别人面试可以出究极难度的题目了 😏

请支持正版书籍 Amazon 购买链接

相关文章

一本书里面内容较多, 因此分成了多篇 Post, 可以从此处看到相关文章:

• Tag: The Joy of Javascript

Object

通过使用 mixin 实现对象继承

Mixin 模式的优势:

1. 支持多继承
2. 可以对现有的对象添加独立的方法, 这些方法可以在多个对象里面复用

Mixin 实现多继承

const TerrestrialAnimal = {
  walk() {},
  breathe() {
    console.log("Using my lungs to breathe");
  },
};

const AquaticAnimal = {
  swim() { },
  breathe() {
    console.log("Using my gills to breathe");
  },
};

const Amphibian = (name) =>
  Object.assign(
    {
      name,
    },
    AquaticAnimal, /* Using my gills to breathe */
    TerrestrialAnimal  /* Using my lungs to breathe */
  );

const frog = Amphibian("Frog");

frog.walk();
frog.swim();
frog.breathe(); /* Using my lungs to breathe */

OLOO(Objects-linked-to-other-objects) 模式对象扩展

/* HasHash 返回一个含有 calculateHash 方法的对象 */
const HasHash = (keys) => ({ /* keys 接受一个字符串数组 */
  calculateHash() {
    const data = keys.map((f) => this[f]).join(""); /* 注意此处会获取 this 里面的属性 */
    let hash = 0,
      i = 0;
    while (i < data.length) {
      hash = ((hash << 5) - hash + data.charCodeAt(i++)) << 0;
    }
    return hash ** 2;
  },
});

const Transaction = {
  init(sender, recipient, funds = 0.0) {
    this.sender = sender;
    this.recipient = recipient;
    this.funds = Number(funds);
    return this;
  },
  displayTransaction() {
    return `Transaction from ${this.sender} to ${this.recipient} for ${this.funds}`;
  },
};



/* 核心代码, 通过 Object.create 创建一个对象并绑定 this, 同时使用 Object.assign 对对象进行扩展 */
const HashTransaction = Object.assign(
  Object.create(Transaction),  
  HasHash(["sender", "recipient", "funds"])
);




const t = HashTransaction.init("Alice", "Bob", 100.0);
console.log(t.calculateHash());  // 620300900133850900
console.log(t.displayTransaction()); // Transaction from Alice to Bob for 100

Class 模式对象扩展

const DEFAULT_ALGO_SHA256 = 'SHA256';
const DEFAULT_ENCODING_HEX = 'hex';

const HasHash = (
  keys,
  options = {
    algorithm: DEFAULT_ALGO_SHA256,
    encoding: DEFAULT_ENCODING_HEX
  }
) => ({
  calculateHash() {
    const data = keys.map(f => this[f]).join('');
    let hash = 0, i = 0;
    while (i < data.length) {
      hash = ((hash << 5) - hash + data.charCodeAt(i++)) << 0;
    }
    return hash ** 2;
  }
})

class Transaction {
  transactionId = '';
  timestamp = Date.now();
  #feePercent = 0.6;
  constructor(sender, recipient, funds = 0.0, description = 'Generic') {
    this.sender = sender;
    this.recipient = recipient;
    this.funds = Number(funds);
    this.description = description;
    this.transactionId = this.calculateHash();  /* 特别注意这个地方调用了 calculateHash, 并且 calculateHash 不是 Transaction 自带的方法 */
  }
  displayTransaction() {
    return `Transaction ${this.description} from ${this.sender} to 
 ${this.recipient} for ${this.funds}`;
  }
  get netTotal() {
    return Transaction.#precisionRound(
      this.funds * this.#feePercent, 2);
  }
  static #precisionRound(number, precision) {
    const factor = Math.pow(10, precision);
    return Math.round(number * factor) / factor;
  }
}


/* 在扩展前直接实例化会报错: TypeError: this.calculateHash is not a function, 因为 Transaction 自身还没有这个方法 */
// const t1 = new Transaction('Mike', 'Jack', 10.0, 'Generic');  




/* 核心代码 */
/* 通过 Object.assign 将 HasHash Mixin 扩展到 Transaction 里面 */
Object.assign(
  Transaction.prototype,
  HasHash(['timestamp', 'sender', 'recipient', 'funds']),
  // HasSignature(['sender', 'recipient', 'funds']),
  // HasValidation()
)




/* 此时进行实例化就可以调用 HasHash 返回的 calculateHash 方法 */
const t2 = new Transaction('Mike', 'Jack', 10.0, 'Generic');
console.log(t2.transactionId); 

Function

函数式编程和 OOP 的比较 | FP vs OOP | Differences between FP and OOP

Functional Programming Example | 函数式编程示例

一个命令式编程的例子:

const arr = ['john-reese', 'harold-finch', 'sameen-shaw'];
const newArr = [];
for (let i = 0, len = arr.length; i < len ; i++) {
  let name = arr[i];
  let names = name.split('-');
  let newName = [];
  for (let j = 0, naemLen = names.length; j < naemLen; j++) {
  let nameItem = names[j][0].toUpperCase() + names[j].slice(1);
  newName.push(nameItem);
  }
  newArr.push({ name : newName.join(' ') });
}
return newArr;

一个函数式编程的例子:

const capitalize = x => x[0].toUpperCase() + x.slice(1).toLowerCase();

const genObj = curry((key, x) => {
  let obj = {};
  obj[key] = x;
  return obj;
}) 

// 使用 compose 将多个方法进行结合
const capitalizeName = compose(join(' '), map(capitalize), split('-'));
const convert2Obj = compose(genObj('name'), capitalizeName)
const convertName = map(convert2Obj);

convertName(['john-reese', 'harold-finch', 'sameen-shaw'])

FP 核心专注于以下几个方法:

1. compose
2. curry

使用这些方法可以对函数进行合成和连锁调用

主流三方库已经有类似实现, 比如 lodash 的 _.curry , _.flow. 甚至这些库还支持使用 _.curryRight , _.flowRight 来进行从右向左的执行顺序

compose 方法实现

function compose(……funcs) {
  if (funcs.length === 0) {
    return arg => arg
  }
 
  if (funcs.length === 1) {
    return funcs[0]
  }
 
  return funcs.reduce((a, b) => (……args) => a(b(……args)))
} 

使用方法:

const operate = compose(div2, mul3, add1, add1)
operate(0) // 相当于 div2(mul3(add1(add1(0)))) 
operate(2) // 相当于 div2(mul3(add1(add1(2))))

curry 方法的实现

export const curry = fn => (……args1) =>
  args1.length === fn.length
    ? fn(……args1)
    : (……args2) => {
      const args = [……args1, ……args2]
      return args.length >= fn.length ? fn(……args) : curry(fn)(……args)
    }

Summary

• JavaScript offers many choices for building objects, including prototypal inheritance, constructor functions, and classes.
• The phrase prototype inheritance is an oxymoron because the idea of a shared linked prototype object is contradictory to the class inheritance model, in which instances gain copies of the inherited data.
• Constructor functions have been the standard mechanisms used to mimic the idea of classes in JavaScript.
• Classes smooth over the details of the prototype configuration for newcomers or developers coming from other class-based languages and have become the preferred choice of JavaScript developers.
• The class syntax can blur your understanding of JavaScript』s prototype inheritance mechanism. Classes are useful, but remember that JavaScript is different from other class-based languages you may have seen or used.