js函数方法apply，bind，call，手写new操作符

news2024/11/17 9:59:46

函数方法

函数方法可以用来改变函数的this指向，对于内置的标准函数来说，改变this就相当于改变了函数的作用目标；比如说，对于一个对象的方法toString()，可以将它的使用目标修改成指定的参数，

这里原本是对obj起作用的tostring方法使用call改成了对‘123’起作用，这就是函数方法的作用，改变函数的作用目标（this指向），理解了这个之后下面介绍一下apply，bind，call的用法以及它们的区别

apply

apply(thisArg,args) thisArg ：函数执行时的this指向， args：函数执行时的参数集合

apply 会让执行函数实例并改变函数执行时的this目标

// 全局调用的函数,this指向windows（浏览器）或global（node）
function fn() {
  console.log(this);
  
}

fn()
fn.apply('新this指向')

// 对象调用的函数，this指向这个对象
const obj = {
  fn:function (){
    console.log(this);
  }
}

obj.fn()
obj.fn.apply('新this指向')

第一次调用this指向全局（浏览器-window，node-global），

第二次调用this指向字符串对象 ‘新的this指向’

第三次调用this指向obj对象

第四次调用this指向字符串对象 ‘新的this指向’

call

call(thisArg,...args) thisArg：函数执行时的this指向， ...args：函数执行时的参数

效果和apply一样，会执行函数实例，同时改变this指向，但是区别在call提供的实例参数是零散的而非集合

// call(thisArg,...args) 函数执行时的this指向 ， 函数执行时的参数
// 效果和apply一样，会执行函数实例，同时改变this指向，但是区别在call提供的实例参数是零散的而非集合

function add(a,b,c){
  console.log(this,a+b+c);
}

add(1,2,3);
add.apply('新this指向',[1,2,3]);
add.call('新this指向',1,2,3);

同apply，区别在于apply参数是一个集合，而call是分散的

bind

bind(thisArg,...args) thisArg 函数执行时的this指向， ...args函数执行时的参数

用法和call一样，但是bind不会立刻执行实例函数，而是返回一个新函数，新函数的this指向变成thisArg

// bind(thisArg,...args) 函数执行时的this指向 ， 函数执行时的参数
// 用法和call一样，但是bind不会立刻执行实例函数，而是返回一个新函数，新函数的this指向变成thisArg

const bind = {
  fn(){
    console.log(this,this.name)
  },
  name: '原来的this指向'
}

bind.fn();
const newFn = bind.fn.bind({name:'新的this指向'});// 返回了一个函数 ，没有立即执行原函数
newFn();

在使用bind方法时，fn并没有直接执行，而是返回了一个新函数newFn，newFn和fn逻辑一致但this指向不同

区别

apply	call	bind
立即执行函数	立即执行函数	不执行函数返回一个新this指向且逻辑相同的函数
参数以单个的可迭代对象（数组）传递	参数散列的传递	参数散列的传递

使用场景举例，判断引用数据的类型

使用typeof判断类型时，只能区分出function和object，对于数组array，set，map等其他的引用数据类型就无法区分了，这时就可以使用object.toString方法来打印判断，

为什么是object.toString？因为虽然object在原型链的最顶层，所有对象都会继承object的方法，但是它们都重写了toString方法，下面以array举例

// array 类型判断

let arr = [1,2,3,4,5];
console.log(arr.toString());
console.log(Object.prototype.toString.call(arr));

array重写了toString方法，在调用tostring时，会使用重写后的而不是object.toString，

array.toString会打印出数组的元素，而Object.toString会打印对象的类型，

通过字符串的分割就可以根据另一半的字符判断出对象的类型

new操作符

手写new关键字，new Function() new关键字的作用：

1.新建了一个对象，

2.将函数的prototype属性指向新对象，如果函数的原型不是一个对象（为null），则新对象的原型会保持为{}（Object）

3.执行这个函数并将函数的this指向这个对象

4.如果函数没有返回值或者返回值为基本数据类型值则返回新对象，函数返回值为引用数据类型则返回原函数返回值

注意：new的第4步操作表示作为构造函数不应该返回引用数据类型，最好也不要返回基本数据类型

因为要改变this指向所以这里需要使用函数方法

// 实现一个new

/**
 * @param {Function} fn 构造函数
 * @param {Array} args 构造函数的参数 
 * @returns {Object} 返回构造的新对象
 */
function myNew(fn,args){
  const obj = {};// 1
  if(fn.prototype){// 2
    Object.setPrototypeOf(obj,fn.prototype);
  }
  const result = fn.apply(obj,args); // 3
  // 4
  if(typeof result !== 'object'&& typeof result !=='function'){// 基本数据类型
    return obj;
  }
  return result;
}

function User(name,age){
  this.name = name;
  this.age = age;
  console.log('构造一个user对象')

}

const user1 = new User('tom',18);
const user2 = myNew(User,['jerry',18])

console.log(user1)
console.log(user2)