我还是搞不明白bind、call、apply的使用和区别

写个通俗易懂的例子,bind、call、apply的使用和区别


this.name = 'pink'
const obj = {
    name: 'coderkey',
    way(age,sex) {
        console.log(`姓名:${this.name} 年龄:${age} 性别:${sex}`);
    }
}
const newObj = {
    name: 'why'
}

obj.way(24,'男')  // 姓名:coderkey 年龄:24 性别:男   对象obj的方法
let fn = obj.way
fn(24,'男')  // 姓名:pink 年龄:24 性别:男      全局window  

let fn = obj.way
fn.call(obj,17,'女')  // 姓名:coderkey 年龄:17 性别:女
fn.call(newObj,17,'女')  // 姓名:why 年龄:17 性别:女 
fn.apply(obj,[18,'女'])   // 姓名:coderkey 年龄:18 性别:女
fn.apply(newObj,[18,'女'])    // 姓名:why 年龄:18 性别:女
fn.bind(obj,19,'女')()  // 姓名:coderkey 年龄:19 性别:女
fn.bind(newObj,19,'女')()  // 姓名:why 年龄:19 性别:女 

下面是详细解答,望采纳,有问题再沟通


JavaScript 中的 bind、call、apply 方法都是用来改变函数的 this 指向的。它们都可以用来调用函数,但是有一些区别。这些方法的通用形式如下:

function.bind(thisArg, arg1, arg2, ...)
function.call(thisArg, arg1, arg2, ...)
function.apply(thisArg, [arg1, arg2, ...])
  • bind 方法会创建一个新的函数,并将函数的 this 指向指定的对象。它不会立即执行函数,而是会返回一个新的函数,需要使用返回的函数来调用原函数。
  • call 和 apply 方法也可以用来改变函数的 this 指向,但它们不会创建新的函数,它们会立即执行原函数。
  • call 方法和 apply 方法的区别在于它们接受参数的方式不同,call 方法接受多个独立的参数,而 apply 方法接受一个数组。

bind 方法的示例:

// 定义一个对象
var obj = {
  name: "John"
};

// 定义一个函数
function sayHello() {
  console.log("Hello, " + this.name);
}

// 使用 bind 方法绑定函数的 this 指向
var sayHelloToJohn = sayHello.bind(obj);

// 调用函数
sayHelloToJohn();  // 输出 "Hello, John"

call 方法的示例:

// 定义一个对象
var obj = {
  name: "John"
};

// 定义一个函数
function sayHello(greeting) {
定义一个函数
function sayHello(greeting) {
console.log(greeting + ", " + this.name);
}

// 使用 call 方法调用函数
sayHello.call(obj, "Hello"); // 输出 "Hello, John"

apply 方法的示例:

// 定义一个对象
var obj = {
name: "John"
};

// 定义一个函数
function sayHello(greeting) {
console.log(greeting + ", " + this.name);
}

// 使用 apply 方法调用函数
sayHello.apply(obj, ["Hello"]); // 输出 "Hello, John"