少写重复代码的精髓：JS方法借用

前言

在JavaScript的世界里，方法借用是一种强大而灵活的技术，它允许我们在不同对象之间共享和复用方法。这种机制充分利用了JavaScript动态语言的特性，使代码更加简洁高效。本文将深入探讨方法借用的原理、应用场景以及实现技巧。

一、什么是方法借用？

方法借用，顾名思义，就是一个对象"借用"另一个对象的方法来使用 。在JavaScript中，函数本质上是可复用的代码块，而方法则是附加到对象上的函数。通过方法借用，我们可以在不同的上下文中执行同一个方法，而无需为每个对象都定义相同的方法。

二、方法借用的核心原理

方法借用的核心原理基于以下几点：

• 1. JavaScript中的函数是一等公民：函数可以作为值传递、存储和操作。
• 2. 函数执行上下文的动态绑定 ：通过call()、apply()和bind()方法，我们可以显式指定函数执行时的this值。
  • 不了解的可以看《深入理解JS(三) - 执行上下文、作用域链与闭包》补补课。
• 3. 原型链机制 ：JavaScript对象通过原型链继承方法，方法借用允许我们跨原型链使用方法。
  • 不了解的可以看《深入理解JS(五) - 原型与原型链》补补课。
• 4. this的动态性 ：在JavaScript中，this关键字不是在函数定义时确定的，而是在函数调用时确定的。
  • 不了解的可以看《深入理解JS(六) - this与月下三兄贵call、apply、bind》补补课。

原型与方法借用

JavaScript的原型系统是方法借用机制的基础。每个JavaScript对象都有一个原型（[[Prototype]]），可以通过__proto__属性或Object.getPrototypeOf()方法访问。当我们调用对象的方法时，如果对象本身没有该方法，JavaScript会沿着原型链查找。

方法借用允许我们直接使用其他对象原型上的方法，而不需要通过原型链查找：

// 通过原型链访问方法
const arr = [];
console.log(arr.__proto__ === Array.prototype); // true
arr.push(1, 2, 3); // 通过原型链调用Array.prototype.push

// 方法借用：直接使用Array.prototype上的方法
const obj = { length: 0 };
Array.prototype.push.call(obj, 1, 2, 3);
console.log(obj); // { '0': 1, '1': 2, '2': 3, length: 3 }

this指向详解

在JavaScript中，this的值取决于函数的调用方式，而非定义方式：

1. 默认绑定 ：在非严格模式下，独立函数调用时this指向全局对象；在严格模式下指向undefined。
2. 隐式绑定 ：作为对象方法调用时，this指向调用该方法的对象。
3. 显式绑定 ：通过call、apply或bind方法指定this。
4. new绑定 ：使用new关键字调用函数时，this指向新创建的对象。
5. 箭头函数 ：箭头函数没有自己的this，它的this继承自外层作用域。

方法借用主要利用了显式绑定，让我们能够控制函数执行时的this值：

// 不同调用方式下的this指向
function showThis() {
  console.log(this);
}

// 默认绑定
showThis(); // 全局对象(非严格模式)或undefined(严格模式)

// 隐式绑定
const obj = { method: showThis };
obj.method(); // obj

// 显式绑定(方法借用)
showThis.call({ name: '张三' }); // { name: '张三' }

// new绑定
new showThis(); // showThis {}

// 箭头函数
const arrowFn = () => { console.log(this); };
arrowFn.call({ name: '李四' }); // 不受call影响，this仍指向定义时的外层作用域

三、常用的方法借用技术

1. call()方法

call()方法允许我们调用一个函数，并明确指定函数执行时的this值和参数列表。

function greet(greeting) {
  console.log(`${greeting}, 我是${this.name}`);
}

const person1 = { name: '张三' };
const person2 = { name: '李四' };

// 借用greet函数
greet.call(person1, '你好'); // 输出: 你好, 我是张三
greet.call(person2, '早上好'); // 输出: 早上好, 我是李四

2. apply()方法

apply()方法与call()类似，区别在于它接受一个参数数组而非参数列表。

function introduce(greeting, farewell) {
  console.log(`${greeting}, 我是${this.name}. ${farewell}`);
}

const person = { name: '王五' };

// 借用introduce函数
introduce.apply(person, ['大家好', '谢谢观看']); 
// 输出: 大家好, 我是王五. 谢谢观看

3. bind()方法

bind()方法创建一个新函数，该函数的this值被永久绑定到指定对象，不会在调用时被改变。

function sayHobby() {
  console.log(`${this.name}喜欢${this.hobby}`);
}

const person = { name: '赵六', hobby: '编程' };

// 创建一个绑定到person的新函数
const boundFunction = sayHobby.bind(person);
boundFunction(); // 输出: 赵六喜欢编程

// 即使尝试改变this，也不会成功
const anotherPerson = { name: '钱七', hobby: '游泳' };
boundFunction.call(anotherPerson); // 仍然输出: 赵六喜欢编程

四、实际应用场景

1. 类数组对象转换为数组

一个经典的方法借用案例是将类数组对象（如arguments、DOM元素集合）转换为真正的数组。

function convertToArray() {
  // 借用Array.prototype.slice方法
  return Array.prototype.slice.call(arguments);
}

const args = convertToArray(1, 2, 3, 4);
console.log(args); // [1, 2, 3, 4]
console.log(Array.isArray(args)); // true

更现代的方式是使用Array.from()或展开运算符：

function modernConvert() {
  // 使用Array.from
  const argsArray1 = Array.from(arguments);
  
  // 使用展开运算符
  const argsArray2 = [...arguments];
  
  return [argsArray1, argsArray2];
}

2. 借用数组方法处理字符串

字符串没有数组的许多实用方法，但我们可以借用它们：

const str = 'hello';

// 借用Array.prototype.map方法处理字符串
const result = Array.prototype.map.call(str, char => char.toUpperCase()).join('');
console.log(result); // "HELLO"

// 借用Array.prototype.filter方法
const vowels = Array.prototype.filter.call(str, char => 'aeiou'.includes(char)).join('');
console.log(vowels); // "eo"

3. 继承和混入模式

方法借用在实现继承和混入模式时非常有用：

// 基础对象
const calculator = {
  add(x, y) {
    return x + y;
  },
  subtract(x, y) {
    return x - y;
  }
};

// 科学计算器对象
const scientificCalculator = {
  square(x) {
    return x * x;
  },
  // 借用calculator的方法
  performOperation(operation, x, y) {
    return calculator[operation].call(this, x, y);
  }
};

console.log(scientificCalculator.performOperation('add', 5, 3)); // 8
console.log(scientificCalculator.square(4)); // 16

五、方法借用的高级技巧

1. 批量方法借用

有时我们需要一次性借用多个方法：

const arrayMethods = ['push', 'pop', 'shift', 'unshift', 'slice', 'map', 'filter'];
const myCollection = {
  length: 0,
  addAll(...items) {
    Array.prototype.push.apply(this, items);
    return this;
  }
};

// 批量借用数组方法
arrayMethods.forEach(method => {
  myCollection[method] = function(...args) {
    return Array.prototype[method].apply(this, args);
  };
});

myCollection.addAll(1, 2, 3, 4);
console.log(myCollection.length); // 4
console.log(myCollection.map(x => x * 2)); // [2, 4, 6, 8]

2. 借用原生方法提高性能

借用原生方法通常比自己实现更高效：

// 低效方式
function hasOwnPropertyCustom(obj, prop) {
  for (let key in obj) {
    if (key === prop && !obj.constructor.prototype[key]) {
      return true;
    }
  }
  return false;
}

// 高效方式：借用Object.prototype.hasOwnProperty
function hasOwnPropertyEfficient(obj, prop) {
  return Object.prototype.hasOwnProperty.call(obj, prop);
}

// 性能测试会显示第二种方法更快

3. 安全的方法借用

在某些情况下，我们需要确保方法借用的安全性：

// 不安全的方法借用
function unsafeToString(obj) {
  return obj.toString(); // 如果obj为null或undefined，会抛出错误
}

// 安全的方法借用
function safeToString(obj) {
  return Object.prototype.toString.call(obj);
}

console.log(safeToString(null)); // "[object Null]"
console.log(safeToString(undefined)); // "[object Undefined]"

六、方法借用的注意事项

1. 箭头函数无法借用

箭头函数的this值在定义时就已确定，无法通过call、apply或bind改变：

const obj = { name: '小明' };

const regularFunction = function() {
  console.log(this.name);
};

const arrowFunction = () => {
  console.log(this.name);
};

regularFunction.call(obj); // "小明"
arrowFunction.call(obj); // undefined (或全局对象的name属性)

2. 严格模式下的差异

在严格模式下，如果未指定this值，函数内的this将为undefined而非全局对象：

"use strict";

function showThis() {
  console.log(this);
}

showThis(); // undefined
showThis.call(null); // null

3. 性能考虑

方法借用虽然灵活，但可能带来性能开销。在性能敏感的场景中，应谨慎使用：

// 性能测试
function testPerformance() {
  const arr = [];
  console.time('直接调用');
  for (let i = 0; i < 1000000; i++) {
    arr.push(i);
  }
  console.timeEnd('直接调用');
  
  const obj = { length: 0 };
  console.time('方法借用');
  for (let i = 0; i < 1000000; i++) {
    Array.prototype.push.call(obj, i);
  }
  console.timeEnd('方法借用');
}

// 通常，方法借用会比直接调用慢

七、现代JavaScript中的替代方案

随着JavaScript的发展，一些方法借用的经典用例现在有了更简洁的替代方案：

1. 展开运算符和解构赋值

// 旧方式：借用数组方法处理arguments
function oldWay() {
  const args = Array.prototype.slice.call(arguments);
  return args.map(x => x * 2);
}

// 新方式：使用剩余参数和箭头函数
const newWay = (...args) => args.map(x => x * 2);

2. Object.assign()和对象展开

// 旧方式：通过方法借用实现对象混入
function mixin(target, source) {
  Object.keys(source).forEach(key => {
    if (typeof source[key] === 'function') {
      target[key] = function(...args) {
        return source[key].apply(this, args);
      };
    }
  });
  return target;
}

// 新方式：使用Object.assign或对象展开
const target = {};
const source = { method() { return this; } };

// 使用Object.assign
Object.assign(target, source);

// 或使用对象展开
const enhanced = { ...target, ...source };

八、原型链与方法借用的深层关系

理解原型链对于掌握方法借用至关重要。JavaScript中的继承主要通过原型链实现，而方法借用提供了一种跨原型链共享功能的机制。

原型链基础

每个JavaScript对象都有一个内部属性[[Prototype]]，指向其原型对象。当我们尝试访问对象的属性或方法时，如果对象本身没有，JavaScript引擎会沿着原型链向上查找。

// 原型链示例
function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log(`你好，我是${this.name}`);
};

const person = new Person('王小明');
person.sayHello(); // 输出: 你好，我是王小明

// person对象本身没有sayHello方法
console.log(person.hasOwnProperty('sayHello')); // false

// sayHello方法位于Person.prototype上
console.log(Person.prototype.hasOwnProperty('sayHello')); // true

方法借用与原型链的区别

方法借用与原型链继承的主要区别在于：

1. 原型链是自动的：当调用对象方法时，JavaScript引擎自动沿着原型链查找。
2. 方法借用是显式的：我们明确指定要借用的方法和执行上下文。
3. 原型链是静态关系：对象与其原型之间的关系在创建后通常不变。
4. 方法借用是动态行为：可以在运行时灵活地从任何对象借用方法。

// 原型链继承
const array = [1, 2, 3];
array.forEach(item => console.log(item)); // 通过原型链调用Array.prototype.forEach

// 方法借用
const arrayLike = { 0: 1, 1: 2, 2: 3, length: 3 };
// arrayLike.forEach不存在，无法通过原型链调用
Array.prototype.forEach.call(arrayLike, item => console.log(item)); // 通过方法借用调用

this绑定规则与方法借用

方法借用的核心是改变函数执行时的this绑定。理解JavaScript的this绑定规则对于掌握方法借用至关重要：

// 创建一个方法
const method = function(prefix) {
  return prefix + this.name;
};

// 四种this绑定规则

// 1. 默认绑定
// 在非严格模式下，独立调用函数时this指向全局对象
console.log(method('Hello, ')); // "Hello, " + 全局对象的name属性(可能是undefined)

// 2. 隐式绑定
const obj1 = { name: '张三', method: method };
console.log(obj1.method('Hi, ')); // "Hi, 张三"

// 3. 显式绑定(方法借用)
console.log(method.call({ name: '李四' }, 'Hey, ')); // "Hey, 李四"
console.log(method.apply({ name: '王五' }, ['Hello, '])); // "Hello, 王五"

// 4. new绑定
function Constructor(name) {
  this.name = name;
}
const instance = new Constructor('赵六');
console.log(method.call(instance, 'Greetings, ')); // "Greetings, 赵六"

结语

方法借用是JavaScript中一种强大的编程技术，它充分利用了语言的动态特性、函数的灵活性以及this关键字的动态绑定机制。通过call()、apply()和bind()方法，我们可以在不同对象间共享和复用功能，编写更简洁、更模块化的代码。

虽然现代JavaScript提供了一些替代方案，但理解和掌握方法借用机制仍然对深入理解JavaScript语言特性、阅读遗留代码以及解决特定问题至关重要。在适当的场景中合理使用方法借用，可以让我们的代码更加优雅和高效。

希望通过本文的讲解，能对你有所帮助，如果本文中有错误或缺漏，请你在评论区指出，大家一起进步，谢谢🙏。