JS：Function对象call、apply、bind改变this指向

原创

彭世瑜 2022-02-12 10:53:24 ©著作权

文章标签 node.js javascript 返回函数 chrome 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者彭世瑜的原创作品，请联系作者获取转载授权，否则将追究法律责任

文档

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function

语法

Function.length // 返回形参个数
Function.name //  返回函数实例的名称

Function.prototype.call(thisArg, arg1, arg2, ...)

Function.prototype.apply(thisArg, [arg1, arg2, ...]) // 调用给定this值的函数

Function.prototype.bind(thisArg[, arg1[, arg2[, ...]]]) // 创建一个新的函数

1、对象中的this

var name = 'Tom';

let obj = {
  name: this.name,
};

console.log(obj);

// Chrome
// {name: "Tom"}

// Node.js
// { name: undefined }

2、函数中的this

let tom = {
  name: 'Tom',

  sayHello() {
    //   this 默认指向了tom 对象
    console.log(`name is ${this.name}`);
  }
};

let jack = {
  name: 'Jack',
};

tom.sayHello();
// name is Tom


// 改变 this指向

tom.sayHello.call(jack);
// name is Jack

tom.sayHello.apply(jack);
// name is Jack

// 注意bind之后需要再次调用执行
tom.sayHello.bind(jack)();
// name is Jack